display | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных значений.
| Значение | Описание | IE6 | IE7 | IE8 | Cr2 | Cr8 | Op9.2 | Op10 | Sa3.1 | Sa5 | Fx3 | Fx4 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. | |||||||||||
| inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. | |||||||||||
| inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. | |||||||||||
| inline-table | Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. | |||||||||||
| list-item | Элемент выводится как блочный и добавляется маркер списка. | |||||||||||
| none | Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. | |||||||||||
| run-in | Устанавливает элемент как блочный или встроенный в зависимости от контекста. | |||||||||||
| table | Определяет, что элемент является блочной таблицей подобно использованию тега <table>. | |||||||||||
| table-caption | Задает заголовок таблицы подобно применению тега <caption>. | |||||||||||
| table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>). | |||||||||||
| table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <col>. | |||||||||||
| table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>. | |||||||||||
| table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>. | |||||||||||
| table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>. | |||||||||||
| table-row | Элемент отображается как строка таблицы (тег <tr>). | |||||||||||
| table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>. |
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display</title> <style> .example { border: dashed 1px #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: "Courier New", Courier, monospace; /* Шрифт текста */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы вокруг */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Устанавливаем как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер текста */ margin: 0; /* Убираем отступы вокруг */ white-space: nowrap; /* Отменяем переносы текста */ } </style> </head> <body> <p>Пример</p> <p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <body><br> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i><br> </body><br> </html></p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById(«elementID»).style.display
Браузеры
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
- для элементов <li> понимает значение block как list-item;
- значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для тега <col>;
- значение table-column-group поддерживается только для тега <colgroup>.
Chrome 2.0, а также Safari версии 3 и старше, iOS:
- значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.
Safari 3.1
- Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.
| align-content | Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство |
| align-items | Задает выравнивание для элементов внутри гибкого контейнера |
| align-self | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
| all | Сбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления) |
| animation | Сокращенное свойство для всех свойств анимации |
| animation-delay | Указывает задержку начала анимации |
| animation-direction | Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах |
| animation-duration | Указывает, как долго должна проходить анимация для завершения одного цикла |
| animation-fill-mode | Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое) |
| animation-iteration-count | Указывает, сколько раз должна воспроизводиться анимация |
| animation-name | Задает имя для анимации @keyframes |
| animation-play-state | Указывает, запущена ли анимация или приостановлена |
| animation-timing-function | Задает кривую скорости анимации |
| backface-visibility | Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю |
| background | Сокращенное свойство для задания всех свойств фона в одном объявлении |
| background-attachment | Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано |
| background-blend-mode | Задает режим наложения для каждого слоя фона (цвет/изображение) |
| background-clip | Определяет, насколько фон (цвет или изображение) должен расширяться в элементе |
| background-color | Задает цвет фона элемента |
| background-image | Задание одного или нескольких фоновых изображений для элемента |
| background-origin | Задает исходную позицию фонового изображения |
| background-position | Определяет положение фонового изображения |
| background-repeat | Устанавливает, если/как фоновое изображение будет повторяться |
| background-size | Определяет размер фоновых изображений |
| border | Сокращенное свойство для ширины границы, стиля границы и цвета границы |
| border-bottom | Сокращенное свойство для задания всех свойств нижней границы в одном объявлении |
| border-bottom-color | Задает цвет нижней границы |
| border-bottom-left-radius | Определяет радиус границы нижнего левого угла |
| border-bottom-right-radius | Определяет радиус границы нижнего правого угла |
| border-bottom-style | Задает стиль нижней границы |
| border-bottom-width | Задает ширину нижней границы |
| border-collapse | Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены |
| border-color | Задает цвет четырех границ |
| border-image | Сокращенное свойство для установки всех свойств Border-Image-* |
| border-image-outset | Определяет величину, на которую область изображения границы выходит за границы рамки |
| border-image-repeat | Указывает, должно ли изображение границы повторяться, округляться или растягиваться |
| border-image-slice | Определяет способ среза изображения границы |
| border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границы |
| border-image-width | Задает ширину изображения границы |
| border-left | Сокращенное свойство для задания всех свойств левой границы в одном объявлении |
| border-left-color | Задает цвет левой границы |
| border-left-style | Задает стиль левой границы |
| border-left-width | Задает ширину левой границы |
| border-radius | Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS |
| border-right | Сокращенное свойство для задания всех свойств правой границы в одном объявлении |
| border-right-color | Задает цвет правой границы |
| border-right-style | Задает стиль правой границы |
| border-right-width | Задает ширину правой границы |
| border-spacing | Устанавливает расстояние между границами соседних ячеек |
| border-style | Задает стиль четырех границ |
| border-top | Сокращенное свойство для задания всех свойств верхнего края в одном объявлении |
| border-top-color | Задает цвет верхней границы |
| border-top-left-radius | Определяет радиус границы верхнего левого угла |
| border-top-right-radius | Определяет радиус границы верхнего правого угла |
| border-top-style | Задает стиль верхней границы |
| border-top-width | Задает ширину верхней границы |
| border-width | Задает ширину четырех границ |
| bottom | Устанавливает положение элементов в нижней части родительского элемента |
| box-decoration-break | Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки. |
| box-shadow | Прикрепление одной или нескольких теней к элементу |
| box-sizing | Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет |
| break-after | Задает поведение разрыва страницы, столбца или региона после созданного поля |
| break-before | Задает поведение разрыва страницы, столбца или региона перед созданным полем |
| break-inside | Определяет поведение разрыва страницы, столбца или региона в созданном поле |
| caption-side | Задает размещение заголовка таблицы |
| caret-color | Определяет цвет курсора (стрелка) в входах, текстового ввода или любого элемента, редактируемого |
| @charset | Задает кодировку символов, используемую в таблице стилей |
| clear | Указывает, на каких сторонах элемента плавающие элементы не могут плавать |
| clip | Зажимы абсолютно позиционированного элемента |
| color | Задает цвет текста |
| column-count | Указывает количество столбцов, элемент должен быть разделен на |
| column-fill | Указывает, как заполнять столбцы, сбалансированные или нет |
| column-gap | Указывает зазор между столбцами |
| column-rule | Сокращенное свойство для установки всех свойств столбца-Rule-* |
| column-rule-color | Задает цвет правила между столбцами |
| column-rule-style | Задает стиль правила между столбцами |
| column-rule-width | Задает ширину правила между столбцами |
| column-span | Указывает, сколько столбцов элемент должен охватывать поперек |
| column-width | Задает ширину столбца |
| columns | Сокращенное свойство для задания ширины столбца и счетчика столбцов |
| content | Используется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое |
| counter-increment | Увеличивает или уменьшает значение одного или нескольких счетчиков CSS |
| counter-reset | Создает или сбрасывает один или несколько счетчиков CSS |
| cursor | Указывает курсор мыши, отображаемый при наведении на элемент |
| direction | Задает направление текста/направление письма |
| display | Указывает, как должен отображаться определенный элемент HTML |
| empty-cells | Указывает, отображать ли границы и фон на пустых ячейках таблицы |
| filter | Определяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента |
| flex | Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства |
| flex-basis | Задает начальную длину гибкого элемента |
| flex-direction | Указывает направление гибких элементов |
| flex-flow | Сокращенное свойство для свойств Flex-Direction и Flex-Wrap |
| flex-grow | Указывает, сколько будет расти номенклатура относительно остальных |
| flex-shrink | Указывает, как элемент будет сжиматься относительно остальных |
| flex-wrap | Указывает, следует ли обернуть гибкие элементы |
| float | Указывает, должно ли поле плавать |
| font | Задает все свойства шрифта в одном объявлении |
| @font-face | Правило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами |
| font-family | Задает семейство шрифтов для текста |
| font-feature-settings | Позволяет контролировать расширенные типографские функции шрифтов OpenType |
| @font-feature-values | Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType |
| font-kerning | Управляет использованием информации о кернинге (как буквы расположены в пространстве) |
| font-language-override | Управляет использованием глифов, специфичных для языка, в шрифте |
| font-size | Задает размер шрифта текста |
| font-size-adjust | Сохраняет читаемость текста, когда происходит откат шрифта |
| font-stretch | Выбор нормальной, сжатой или расширенной грани из семейства шрифтов |
| font-style | Задает стиль шрифта для текста |
| font-synthesis | Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем |
| font-variant | Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами |
| font-variant-alternates | Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения |
| font-variant-caps | Управление использованием альтернативных глифов для заглавных букв |
| font-variant-east-asian | Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского) |
| font-variant-ligatures | Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится |
| font-variant-numeric | Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров |
| font-variant-position | Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта |
| font-weight | Определяет вес шрифта |
| grid | Сокращенное свойство |
| grid-area | Либо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца |
| grid-auto-columns | Задает размер столбца по умолчанию |
| grid-auto-flow | Указывает, как автоматически размещаемые элементы вставляются в сетку |
| grid-auto-rows | Задает размер строки по умолчанию |
| grid-column | Сокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца |
| grid-column-end | Указывает, где закончить элемент сетки |
| grid-column-gap | Определяет размер зазора между столбцами |
| grid-column-start | Указывает, где начать элемент сетки |
| grid-gap | Сокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор |
| grid-row | Сокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки |
| grid-row-end | Указывает, где закончить элемент сетки |
| grid-row-gap | Определяет размер зазора между строками |
| grid-row-start | Указывает, где начать элемент сетки |
| grid-template | Сокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки |
| grid-template-areas | Указывает, как отображать столбцы и строки с использованием именованных элементов сетки |
| grid-template-columns | Определяет размер столбцов и количество столбцов в макете сетки |
| grid-template-rows | Определяет размер строк в макете сетки |
| hanging-punctuation | Указывает, может ли знак пунктуации размещаться вне поля строки |
| height | Задает высоту элемента |
| hyphens | Задание разбиения слов для улучшения макета абзацев |
| image-rendering | Дает подсказку браузеру о том, какие аспекты изображения наиболее важны для сохранения при масштабировании изображения |
| @import | Позволяет импортировать таблицу стилей в другую таблицу стилей |
| isolation | Определяет, должен ли элемент создавать новое содержимое стека |
| justify-content | Задает выравнивание между элементами внутри гибкого контейнера, если элементы не используют все доступное пространство |
| @keyframes | Указывает код анимации |
| left | Задает левое положение позиционного элемента |
| letter-spacing | Увеличивает или уменьшает расстояние между символами в тексте |
| line-break | Указывает, как/если разбить линии |
| line-height | Установка высоты линии |
| list-style | Задает все свойства для списка в одном объявлении |
| list-style-image | Задает изображение в качестве маркера элемента списка |
| list-style-position | Определяет положение маркеров элементов списка (маркеров) |
| list-style-type | Указывает тип маркера элемента списка |
| margin | Устанавливает все свойства полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Задает левое поле элемента |
| margin-right | Задает правое поле элемента |
| margin-top | Задание верхнего поля элемента |
| max-height | Задает максимальную высоту элемента |
| max-width | Задает максимальную ширину элемента |
| @media | Устанавливает правила стиля для различных типов носителей/устройств/размеров |
| min-height | Задает минимальную высоту элемента |
| min-width | Задает минимальную ширину элемента |
| object-fit | Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной |
| object-position | Задает выравнивание заменяемого элемента внутри его поля |
| opacity | Задает уровень непрозрачности для элемента |
| order | Задает порядок гибкого элемента по отношению к остальным |
| orphans | Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента |
| outline | Задает все свойства структуры в одном объявлении |
| outline-color | Задает цвет контура |
| outline-offset | Смещение контура и его выводит за пределы края границы |
| outline-style | Задает стиль контура |
| outline-width | Задает ширину контура |
| overflow | Указывает, что происходит, если содержимое переполнено полем элемента |
| overflow-wrap | Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле) |
| overflow-x | Указывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента |
| overflow-y | Указывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента |
| padding | Задает все свойства заполнения в одном объявлении |
| padding-bottom | Устанавливает нижнее заполнение элемента |
| padding-left | Задает левое заполнение элемента |
| padding-right | Задает правое заполнение элемента |
| padding-top | Задает верхнее заполнение элемента |
| page-break-after | Задает поведение разбиения страницы после элемента |
| page-break-before | Задает поведение разбиения страницы перед элементом |
| page-break-inside | Задает поведение разбиения страниц внутри элемента |
| perspective | Придает элементу с трехмерной позицией некоторую перспективу |
| perspective-origin | Определяет, в какой позиции пользователь смотрит на 3D-позиционный элемент |
| pointer-events | Определяет, реагирует ли элемент на события указателя |
| position | Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) |
| quotes | Задает тип кавычек для внедренных предложений |
| resize | Определяет, является ли (и как) элемент изменяемым по размерам пользователем |
| right | Задает правильное положение позиционного элемента |
| tab-size | Задает ширину символа табуляции |
| table-layout | Определяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов |
| text-align | Задает выравнивание текста по горизонтали |
| text-align-last | Описывает, как последняя строка блока или строки перед принудительным разрывом строки выравнивается при выравнивании текста «justify» |
| text-combine-upright | Задает комбинацию нескольких символов в пространстве одного символа |
| text-decoration | Указывает украшение, добавляемое в текст |
| text-decoration-color | Определяет цвет текста-украшение |
| text-decoration-line | Указывает тип линии в тексте-украшение |
| text-decoration-style | Задает стиль линии в оформлении текста |
| text-indent | Задает отступ первой строки в текстовом блоке |
| text-justify | Задает метод выравнивания, используемый при выравнивании текста «justify» |
| text-orientation | Определяет ориентацию текста в строке |
| text-overflow | Указывает, что должно происходить при переполнении содержащегося в тексте элемента |
| text-shadow | Добавление тени к тексту |
| text-transform | Управляет капитализацией текста |
| text-underline-position | Определяет положение подчеркивания, которое задается с помощью свойства Text-декорирование |
| top | Определяет верхнюю позицию позиционного элемента |
| transform | Применяет 2D или 3D преобразование к элементу |
| transform-origin | Позволяет изменить положение на преобразованных элементах |
| transform-style | Определяет способ визуализации вложенных элементов в трехмерном пространстве |
| transition | Сокращенное свойство для задания четырех свойств перехода |
| transition-delay | Указывает, когда начнется эффект перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода |
| transition-property | Задает имя свойства CSS, для которого используется эффект перехода |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
| unicode-bidi | Используется вместе со свойством direction для установки или возврата текста, который должен быть переопределен для поддержки нескольких языков в одном документе |
| user-select | Указывает, можно ли выбрать текст элемента |
| vertical-align | Задание вертикального выравнивания элемента |
| visibility | Указывает, является ли элемент видимым |
| white-space | Указывает, как обрабатываются пробелы внутри элемента |
| widows | Задает минимальное число строк, которые должны быть оставлены в верхней части страницы при возникновении разрыва страницы внутри элемента |
| width | Задает ширину элемента |
| word-break | Указывает, как слова должны прерываться при достижении конца строки |
| word-spacing | Увеличивает или уменьшает расстояние между словами в тексте |
| word-wrap | Позволяет длинные, неразрывные слова, которые будут сломаны и обернуть к следующей строке |
| writing-mode |
CSS свойства не работают для абзацев с предварительными элементами внутри
У меня есть абзац, который содержит элемент <pre> и некоторый текст, например следующий:
<p>
<pre>
this is second paragraph
ok
ok
</pre>
These text are inside the paragraph must be RED
</p>
И я использовал следующий код, чтобы изменить цвет фона абзаца, но он не влияет на абзац, и я не знаю почему.
<style>
.par1{
background-color:red;
color:green;
}
</style>
Вот весь код:
<!doctype html>
<html>
<head>
<title>Test id and class attribute</title>
<style>
.par1 {
background-color: red;
color: green;
}
</style>
</head>
<body>
<div>
Some text
<h2>An important heading</h2>
<p>
<pre>
this is second paragraph
ok
ok
</pre>
This text is inside the paragraph and it must be red.
</p>
</div>
</body>
</html>Я знаю , что если я использую класс div .div1, он работает нормально, но я хочу знать, почему первый не работает.
.div1{
background-color:red;
color:green;
}
Поделиться Источник Hamreen Ahmad 08 июля 2016 в 11:01
2 ответа
- CSS-стилизованные абзацы с нумерацией абзацев и боковыми примечаниями
Я хочу разместить текст в интернете с номерами абзацев и боковыми примечаниями. Я использую Гекльберри Финна в качестве теста: см. http://jsfiddle.net/29Mdt/ . Я бы хотел, чтобы номера абзацев были на полях слева, а боковые примечания-на полях справа. Это очень легко сделать с таблицами в HTML, но…
- CSS свойства не работают в дочернем diff
Я сделал родителя DIV и ребенка DIV , ребенок DIV не центрируется, и ширина также не работает. Кроме того ,когда я добавляю IMG в дочерний DIV , свойства также не работают. Экс: HTML: <div id=parent> <div id=child> <img id=big .. /> </div> </div> CSS: #parent {…
4
Согласно спецификациям W3c , вы не можете иметь pre внутри p
4.4.1 ЭлементpМодель контента:
Формулировка содержания.
Где Содержание фразировки :
Содержание формулировки-это текст документа, а также элементы, которые выделяют этот текст на уровне внутри абзаца. Прогоны формулировки содержания формируют абзацы.
aabbrarea(if it is a descendant of amapelement)audiobbdibdobrbuttoncanvascitecodedatadatalistdeldfnemembediiframeimginputinskbdkeygenlabelmapmarkmathmeternoscriptobjectoutputprogressqrubyssampscriptselectsmallspanstrongsubsupsvgtemplatetextareatimeuvarvideowbr
вместо этого вы можете использовать span и установить его как display:block , что сделает его элементом уровня блока
.par1 {
background-color: red;
color: green;
display: block
}<div>
Some text
<h2>An important heading</h2>
<span>
<pre>
this is second paragraph
ok
ok
</pre>
These text are inside the paragraph must be RED
</span>
</div>Поделиться dippas 08 июля 2016 в 11:07
1
как сказал @dippas, речь идет о <pre>-теге внутри <p>-тега
<p> -теги не могут содержать элементы уровня блока. поскольку <pre> является элементом уровня блока, браузеры, похоже, закрывают <p>-тег, прежде чем откроется <pre>-тег (см. Инспектор браузера). таким образом, стили на <p> не могут быть унаследованы тегом <pre>
для хорошего обсуждения с полезными советами см.:
<pre> тег, заставляющий браузеры закрывать абзацы
EDIT:
В спецификациях W3C говорится, что «абзац, как правило, представляет собой набор фраз (…)».
https://www.w3.org/TR/html5/dom.html#пункты
Поделиться sasha 08 июля 2016 в 11:20
- Почему CSS работает с поддельными элементами?
В моем классе я играл и обнаружил, что CSS работает с вымышленными элементами. Пример: imsocool { color:blue; } <imsocool>HELLO</imsocool> Когда мой профессор впервые увидел, что я использую это, он был немного удивлен, что составные элементы работают, и рекомендовал мне просто…
- Как сопоставить периоды не в конце абзацев?
Если я хочу найти все точки, которые ARE в конце абзацев, я мог бы сделать \.($|\n) . Но как я могу отрицать это и сказать: точка, за которой следует любой символ, который не является одним из них, учитывая, что метасимволы не работают внутри классов символов, что мешает мне использовать…
Похожие вопросы:
IE9 CSS Hack-какие свойства не работают?
Я хотел бы использовать взлом IE9 в моем CSS, вместо того чтобы иметь отдельную условную таблицу стилей. Но они, похоже, не работают. .cover-header .cover-intro { text-align: center \9; font: 0/0 a…
Форматирование абзаца внутри контейнера css
Если у меня есть контейнер CSS, который я использую для цитат, но цитата охватывает несколько абзацев, как я могу расположить форматирование, чтобы показать несколько абзацев внутри контейнера?…
Некоторые свойства css не работают
Я хочу разместить тег noscript, как на этой странице (stackoverflow) : <noscript>Your browser has JavaScript turned off !</noscript> Но, комментируемые свойства не работают: noscript{…
CSS-стилизованные абзацы с нумерацией абзацев и боковыми примечаниями
Я хочу разместить текст в интернете с номерами абзацев и боковыми примечаниями. Я использую Гекльберри Финна в качестве теста: см. http://jsfiddle.net/29Mdt/ . Я бы хотел, чтобы номера абзацев были…
CSS свойства не работают в дочернем diff
Я сделал родителя DIV и ребенка DIV , ребенок DIV не центрируется, и ширина также не работает. Кроме того ,когда я добавляю IMG в дочерний DIV , свойства также не работают. Экс: HTML: <div…
Почему CSS работает с поддельными элементами?
В моем классе я играл и обнаружил, что CSS работает с вымышленными элементами. Пример: imsocool { color:blue; } <imsocool>HELLO</imsocool> Когда мой профессор впервые увидел, что я…
Как сопоставить периоды не в конце абзацев?
Если я хочу найти все точки, которые ARE в конце абзацев, я мог бы сделать \.($|\n) . Но как я могу отрицать это и сказать: точка, за которой следует любой символ, который не является одним из них,…
CSS гибкое отображение и центрирование абзацев
Я пытаюсь использовать display: flex вместо float: left для размещения абзацев рядом друг с другом в div , а затем я хотел бы расположить все абзацы в этом div в центре экрана (в настоящее время как…
css свойства не работают для protractor?
Я написал какой-то тест protractor для моего приложения angularjs и написал какой-то тестовый случай для проверки свойств css, но мой тестовый случай не работает для проверки свойств css, так что…
CSS сетка с квадратными SVG элементами
У меня возникла проблема сделать так, чтобы ячейки сетки css всегда были квадратными, а внутри каждой из них был квадратный элемент SVG. Сетка CSS должна соответствовать 100% родительскому…
размеры элемента — учебник CSS
Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.
Особенности вычисления ширины и высоты
Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение width будет пересчитано).
В качестве значения ширины можно использовать и единицу em, которая является примерно тем же, чем и размер шрифта текста, но только в условных единицах. К примеру, вы установили размер для шрифта 24px. Тогда 1em для этого элемента будет равен 24 пикселам, а если вы зададите width: 2em, то ширина составит 2×24px = 48 пикселов. Если размер шрифта не задан, он будет унаследован.
Высота height, заданная в процентах, вычисляется аналогичным образом, что и ширина, но расчет основывается уже на высоте родительского элемента, а не на его ширине. Если родитель отсутствует, высота будет зависеть от высоты окна браузера.
Что входит в ширину и высоту
Сразу стоит запомнить, что у свойств width и height есть особенность — они не включают в себя значения margin, padding и border. Значение, которое вы установите для width/height, будет означать лишь ширину/высоту области содержимого элемента.
Таким образом, для того чтобы вычислить, например, фактическую ширину элемента (место, которое он в действительности займет на экране), понадобится немного арифметики. Фактическая ширина — это сумма значений, таких как width, padding, border и margin. Напомним, что ранее мы рассматривали, как выглядит блочная модель CSS.
Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:
width: 200px; margin-left: 15px; margin-right: 15px; padding-left: 10px; border-left: 3px solid #333;
Для подсчета фактической ширины элемента выполним сложение:
width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)
Рекомендации по высоте
Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.
Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.
Другой способ избежать развала верстки — использовать запись overflow: auto. В таком случае, если высота содержимого будет превышать значение height своего контейнера, браузер добавит к контейнеру полосу прокрутки.
В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства box-sizing.
Css свойства оформления сайта: обзор самых основных
От автора: приветствую вас. В css есть достаточно много свойств, если так подумать, но действительно важных и наиболее употребляемых не так уж и много. В этой статье я хотел бы кратко описать самые используемые css свойства.
Что нужно знать для начала
Многие ошибочно называют свойства в css тегами. Так вот, это не совсем правильно. Теги – это команды html языка, и только его одного – все они пишутся в угловых скобках. В css же никаких тегов не нужно. Рассмотрим например, типичные правила для оформления веб-страницы, прописанные в таблице стилей:
body{ background: #fff; color: #ccc; … }
body{ background: #fff; color: #ccc; … } |
Это типичный синтаксис этого языка. Тут все очень просто – вначале пишется селектор (body или любой другой), потом открываются фигурные скобки, в которые и записывают все необходимые свойства и их значения.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееСначала пишется имя свойства, а потом через двоеточие его значение. Желательно каждый новый стиль писать с новой строки, ах да, еще нужно обязательно ставить точку с запятой в конце, иначе ничего не заработает.
Стили для текстового содержимого
Текст – всему голова на веб-странице. Для его оформления есть множество свойств. О них подробно написано в других статьях: Размер шрифта в html, Как задать цвет шрифта в html, Как задать шрифт в html.
С помощью свойств, описанных там, вы сможете сделать с текстом все, что угодно: изменить его размер, начертание, сам шрифт и многое другое.
Например, в css есть возможность определить расстояние между буквами и между отдельными словами. Это делается с помощью letter-spacing и word-spacing соответственно.
Отображение на экране
По умолчанию элементы делятся на строчные и блочные и разница в них только в том, что блочные не могут стоять в одной строке друг с другом. Зато строчным нельзя задать размер, он зависит от того, сколько в них содержимого.
Итак, иногда такое поведение нужно изменить и для этого используется display и множество его значений, но я расскажу лишь о самых основных:
Block – элемент становится блочным (то есть приобретает блочные особенности, даже если он был строчным. С этих пор ему можно записывать размеры, нормально определять внешние отступы и т.д.)
Inline- преобразование в строчный элемент.
Inline-block – блочно-строчный тип. Это такое поведение, при котором элемент сохраняет свои блочные свойства, но при этом может стать в одну строку с другими блоками, если им тоже прописано inline-block и им хватает места по ширине. Стоит помнить, что по умолчанию блок занимает в родителе все свободное место по ширине, потому нужно вручную определить ширину для него (абсолютную или относительную).
Table — преобразование элемента в таблицу (соответственно, есть также значения table-row и table-cell)
None – элемент исчезает со страницы и не оставляет никаких следов, как будто бы его на ней и не было.
Опять же, это не все значения, только самые основные.
Свойства размера
Блоки играют основную роль в создании сайта. Им нужно прописывать определенные размеры, это указывается с помощью таких свойств:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееWidth – ширина
Height – высота
Max-width, min-width – максимальная или минимальная ширина. Например, если указать блоку max-width, то эта ширина не будет жесткой, она сможет меняться в зависимости от размеров окна. Если же указать и min-width, то тогда блок не сможет стать уже, чем указанный размер. Такое же можно прописать и для высоты, но это делают гораздо реже.
Также на размеры блочных элементов могут повлиять дополнительные параметры. Например, внутренние отступы. Они задаются с помощью слова padding и значения в пикселях (но можно и в другой величине). Если нужно задать отступ только для одной стороны, можно указать это, дописав к padding- через дефис нужную сторону (left, right и т.д.)
Например, если мы определили ширину контейнера в 600 пикселей, а потом добавили внутренние отступы по бокам в 20 пикселей, то реальная новая ширина составит 640px. Если вы не хотите, чтобы размеры добавлялись, можно воспользоваться таким приемом:
*{ box-sizing: border-box; }
*{ box-sizing: border-box; } |
В итоге теперь, когда вы будете определять ширину через width, в нее автоматически будут включаться внутренние отступы и рамка. Рамку задают с помощью параметра border. Ее тоже можно определить как для всех сторон, так и для каждой отдельно. Синтаксис таков: border: ширина стиль цвет;
Соответственно, записав так:
div{border: 3px solid blue;}
div{border: 3px solid blue;} |
К блокам добавляется синяя рамка со всех сторон толщиной 3 пикселя с каждой. Суммарно ширина увеличивается на 6 пикселей, а если вы не хотите этого, нужно использовать то самое box-sizing.
Цвет и фон
Это основные параметры, которые отвечают за восприятие нами информации. В значении в этим свойствам записывается одно и то же – цвет, который можно определить с помощью ключевых слов, в шестнадцатеричном коде или каком-то цветовом формате (чаще всего rgb). Единственное отличие – цвет определяется с помощью свойства color, а фон – с помощью background.
CSS стили внутри тега – так тоже можно
Правильно будет создавать отдельный файл формата css и в нем писать все необходимые стили, но также существует возможность встроить все стили в html, в один тег. Этот тег – style. Он парный, писать его нужно обязательно в пределах тега head. Используется так:
<style> p{ font-size: 14px; } … другие стили </style>
<style> p{ font-size: 14px; } … другие стили </style> |
Синтаксис при написании свойств в этом теге идентичен тому, если бы мы записывали все это в отдельной таблице стилей.
Чтобы подробнее познакомиться с основными свойствами, я советую вам пройти наш курс по основам языка CSS, в котором вы можете узнать ту, базу, которая нужна для верстки любого макета. Оставайтесь с webformyself, чтобы увеличивать свои познания в сайтостроении.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьИзменение стилей и параметров шрифтов CSS в области Стилей в DevTools — Microsoft Edge Development
- Чтение занимает 3 мин
В этой статье
Типография в Интернете является важной частью пользовательского интерфейса. Необходимо убедиться, что вы соответствуете корпоративным рекомендациям по бренду, а содержимое отображается как ожидалось на различных устройствах. Текст должен быть простым для чтения с помощью размера и высоты строки. Пользователи могут повторно размеры шрифтов для удовлетворения индивидуальных потребностей. В ситуациях, когда конкретные шрифты недоступны на устройстве пользователя, необходимо предоставить параметры откатных шрифтов.
CSS обеспечивает лучшую поддержку типографии в последние годы. Для определения размера текста доступны десятки различных подразделений CSS. Кроме того, у вас есть несколько свойств CSS, которые влияют на размер шрифта, интервалы, высоту строки и другие типографические функции.
Чтобы упростить работу с типографией, визуальный **** редактор шрифтов теперь находится в области Стилей. Вы можете изменить параметры шрифта, и изменения будут немедленно отрисовки в браузере. Все без глубоких знаний о CSS.
В настоящее время эта функция является экспериментальной, и ее необходимо включить для Enable new font editor tool within the Styles pane Microsoft Edge средств разработки.
Любой CSS в области Стилей, определения шрифтов или стили в линию, автоматически отображает значок, открываю визуальный редактор шрифта. Чтобы открыть визуальный редактор шрифта, выберите значок Редактор шрифта.
Все поля в редакторе визуальных шрифтов заполняются из значений в CSS в области Стилей. Например, определение установлено в области Стилей, поэтому текстовое поле высоты строки отображает и отобразит отсев line-height 160% **** 160 % единицы. Кроме того, ползунок автоматически устанавливается в соответствие со значениями текстового поля.
Редактор шрифта состоит из двух частей: селектора семейства шрифтов и редактора свойств CSS.
Селектор семейства шрифтов
Селектор семейства шрифтов — верхняя часть визуального редактора шрифтов. Чтобы выбрать шрифты правила CSS, в редакторе CSS используйте селектор семейства шрифтов. Для каждого правила CSS можно выбрать основные и откатные шрифты.
Редактор шрифта, открытый поверх области Стилей с выделенным селектором семейства шрифтов
Используйте отсев семейства шрифтов, чтобы выбрать из списка шрифтов. Шрифты организованы в четыре группы.
- Вычислительные шрифты, которые являются шрифтами, доступными в таблице стилей в области Стилей.
- Системные шрифты, которые являются шрифтами, доступными в текущей операционной системе.
- Общие семейства шрифтов, например
serifилиsans-serif. - Глобальные значения, такие как
inheritinitial, иunset.
Редактор шрифта, открытый поверх области Стилей с выделенным селектором семейства шрифтов
После выбора шрифта отображается еще одно выпадение меню для выбора откатных шрифтов. Вы можете выбрать до восьми откатных шрифтов. Чтобы удалить шрифт, выберите значок Delete Font Family.
Примечание
Если вы выбираете глобальное значение для семейства шрифтов, вы не получите еще одного отката, так как в CSS нет отката для него.
Редактор CSS Properties
Свойства шрифта CSS можно изменить в нижней части визуального редактора шрифтов. Можно изменить размер шрифта, высоту строки, вес шрифта и интервал между буквами с помощью любого из элементов управления пользовательским интерфейсом. Изменения применяются немедленно в браузере.
Редактор шрифта, открытый поверх области Стилей с выделенными свойствами CSS
Кроме того, можно преобразовать подразделения CSS с помощью визуального редактора шрифтов. Например, вы можете использовать средство в правиле CSS, в котором изначально установлен ползунок размер шрифта 16 pixels . Теперь используйте выпадаемую единицу и выберите значение em . 1 emОтображаемая равна 16 pixels .
В отсеве единицы доступны все доступные числимые единицы CSS. Размер шрифта, высота строки, вес шрифта и интервалы использования различных единиц. Если в текстовых полях фокусируется, можно выбрать клавиши и клавиши для настройки arrow up arrow down параметров. Чтобы использовать ползунки с клавиатурой, выберите arrow left клавиши и arrow down клавиши.
Редактор CSS Properties также содержит заранее. Чтобы использовать заранее задатки ключевых слов, справа выберите Toggle Input Type значок. Отображаются изменения пользовательского интерфейса и отсев предустановленных ключевых слов. Чтобы вернуться к пользовательскому интерфейсу с помощью ползунок и других элементов управления пользовательским интерфейсом, выберите Toggle Input Type значок снова.
Откройте предустановленный интерфейс ключевого слова
Используйте следующие возможности, чтобы обсудить новые функции и изменения в публикации или другие вопросы, связанные со средствами разработчика.
- Отправляйте свои отзывы с помощью значка Отправить отзыв либо путем выбора
Alt+Shift+I(Windows, Linux) илиOption+Shift+I(macOS) в средствах разработчика. - Отправьте твит с упоминанием @EdgeDevTools.
- Отправьте предложение в разделе The Web We Want.
- Чтобы сообщить об ошибках в этой статье, используйте следующий раздел Отзывы.
Значок Отправить отзыв в средствах разработчика Microsoft Edge
CSS — Работа с текстом
На этом уроке мы познакомимся с основными приёмами для работы с текстом с помощью средств CSS.
Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.
Основные свойства CSS для работы с текстом
1. Свойство font-size
Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения (em, px, pt, %). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger, которые соответственно уменьшают или увеличивают текст по отношению к базовому.
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
2. Свойство font-weight
Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание), bolder и lighter.
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
3. Свойство font-style
Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
4. Свойство font-family
Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
5. Свойство color
Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
6. Свойство background-color
Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.
<p>Lorem ipsum <span>dolor sit</span> amet</p> <p>Lorem ipsum dolor <span>sit amet</span></p> <p><span>Lorem</span> ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
6. Свойство text-decoration
Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Подчёркивание также можно создать с помощью свойства CSS border.
<p>Lorem ipsum <span>dolor sit</span> amet</p> <p><span>Lorem </span>ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
7. Свойство text-transform
Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).
<p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
8. Свойство white-space
При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).
<p>Lorem ipsum dolor sit amet</p> <hr> <p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
9. Свойство text-align
Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).
<p>...</p> <hr> <p>...</p> <hr> <p>...</p> <hr> <p>...</p>
Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.
Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.
Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.
Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.
10. Свойство vertical-align
Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством display:inline-block), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).
<p>Lorem ipsum dolor <small>sit amet</small>.</p> <hr> <p>Lorem ipsum dolor <small>sit amet</small>.</p> <hr> <p>Lorem ipsum dolor <small>sit amet</small>.</p> <hr> <p>Lorem ipsum dolor <small>sit amet</small>.</p> <hr> <p>Lorem <span>ipsum</span> dolor <span>sit amet</span>.</p>
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
11. Свойство line-height
Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).
<p>...</p> <hr> <p>...</p> <hr> <p>...</p> <hr> <p>...</p> <hr> <p>...</p>
Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.
Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.
Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.
Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.
Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.
| align-content | Задает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все доступное пространство |
| align-items | Задает выравнивание элементов внутри гибкого контейнера |
| выровнять сам | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
| все | Сбрасывает все свойства (кроме unicode-bidi и direction) |
| анимация | Сокращенное свойство для всех свойств анимации — * |
| задержка анимации | Определяет задержку начала анимации |
| анимация-направление | Определяет, должна ли анимация воспроизводиться вперед, назад или попеременно |
| продолжительность анимации | Определяет, сколько времени должно занять анимация для завершения одного цикла |
| режим заливки анимации | Задает стиль элемента, когда анимация не воспроизводится (ранее он начинается, после того, как он заканчивается, или и то, и другое) |
| количество итераций анимации | Указывает, сколько раз должна воспроизводиться анимация |
| имя-анимации | Задает имя для анимации @keyframes |
| состояние воспроизведения анимации | Указывает, запущена или приостановлена анимация |
| функция синхронизации анимации | Определяет кривую скорости анимации |
| задняя видимость | Определяет, должна ли быть видна задняя грань элемента, когда он смотрит на пользователя. |
| фон | Сокращенное свойство для всех свойств фона — * |
| фон-приставка | Устанавливает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным. |
| фоновый режим наложения | Определяет режим наложения каждого фонового слоя (цвет / изображение) |
| фоновая клипса | Определяет, насколько далеко должен распространяться фон (цвет или изображение) в пределах элемент |
| цвет фона | Определяет цвет фона элемента |
| фоновое изображение | Задает одно или несколько фоновых изображений для элемента |
| фон-происхождение | Определяет исходную позицию фонового изображения |
| фон-позиция | Определяет положение фонового изображения |
| фон-повтор | Устанавливает, будет ли / как будет повторяться фоновое изображение |
| размер фона | Определяет размер фоновых изображений |
| граница | Сокращенное свойство для border-width, border-style и border-color |
| граница нижняя | Сокращенное свойство для border-bottom-width, border-bottom-style и нижний цвет границы |
| цвет нижней границы | Устанавливает цвет нижней границы |
| граница-нижний левый-радиус | Определяет радиус границы нижнего левого угла |
| граница-нижний-правый-радиус | Определяет радиус границы нижнего правого угла |
| с окантовкой снизу | Устанавливает стиль нижней границы |
| ширина по краю снизу | Устанавливает ширину нижней границы |
| граница-развал | Устанавливает, должны ли границы таблицы сворачиваться в единую границу или разделяться |
| цвет рамки | Устанавливает цвет четырех границ |
| бордюр | Сокращенное свойство для всех свойств border-image- * |
| граница-изображение-исход | Определяет величину, на которую область изображения границы выходит за пределы рамки |
| повтор изображения границы | Указывает, должно ли изображение границы повторяться, закругляться или растягиваться. |
| граница-изображение-фрагмент | Указывает, как нарезать изображение границы |
| border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границы |
| ширина границы изображения | Задает ширину изображения границы |
| граница левая | Сокращенное свойство для всех свойств border-left- * |
| цвет рамки слева | Устанавливает цвет левой границы |
| рамка-левая | Устанавливает стиль левой границы |
| ширина рамки слева | Устанавливает ширину левой границы |
| граница-радиус | Сокращенное свойство для четырех границ — * — радиус свойств |
| граница правая | Сокращенное свойство для всех свойств border-right- * |
| рамка-правая | Устанавливает цвет правой границы |
| граница-правая | Устанавливает стиль правой границы |
| ширина рамки справа | Устанавливает ширину правой границы |
| расстояние между границами | Устанавливает расстояние между границами соседних ячеек |
| с бордюром | Устанавливает стиль четырех границ |
| кайма-верх | Сокращенное свойство для border-top-width, border-top-style и цвет верхней границы |
| цвет верхней границы | Устанавливает цвет верхней границы |
| граница, верхний левый радиус | Определяет радиус границы верхнего левого угла |
| граница-верхний-правый-радиус | Определяет радиус границы верхнего правого угла |
| с бордюром | Устанавливает стиль верхней границы |
| ширина до верхней границы | Устанавливает ширину верхней границы |
| ширина рамки | Устанавливает ширину четырех границ |
| нижняя | Устанавливает позицию элемента от нижней части родительского элемента |
| коробка-отделка-перерыв | Задает поведение фона и границы элемента при разрыве страницы или, для встроенных элементов, при разрыве строки. |
| тень коробки | Добавляет одну или несколько теней к элементу |
| размер коробки | Определяет, как рассчитываются ширина и высота элемента: следует они включают отступы и границы, или нет |
| обрыв после | Указывает, должен ли происходить разрыв страницы, столбца или области после указанного элемента |
| перерыв до | Указывает, должен ли происходить разрыв страницы, столбца или области перед указанным элементом |
| взлом внутри | Указывает, должен ли происходить разрыв страницы, столбца или области внутри указанного элемента |
| сторона подписи | Задает размещение заголовка таблицы |
| каре | Определяет цвет курсора (курсора) во входных, текстовых или любых других редактируемый элемент |
| @charset | Задает кодировку символов, используемую в таблице стилей |
| прозрачный | Определяет, что должно произойти с элементом, который находится рядом с плавающим элемент |
| зажим | Зажимает абсолютно позиционированный элемент |
| цвет | Устанавливает цвет текста |
| количество столбцов | Задает количество столбцов, на которые должен быть разделен элемент. |
| колонка-заполнитель | Определяет способ заполнения столбцов, сбалансированный или несбалансированный. |
| колонна-зазор | Определяет зазор между столбцами |
| правило столбца | Сокращенное свойство для всех свойств column-rule- * |
| столбец-правило-цвет | Определяет цвет правила между столбцами |
| стиль правила столбца | Задает стиль правила между столбцами |
| ширина правила столбца | Определяет ширину правила между столбцами |
| колонна-пролет | Указывает, сколько столбцов должен занимать элемент в |
| ширина столбца | Задает ширину столбца |
| столбца | Сокращенное свойство для ширины столбца и количества столбцов |
| содержание | Используется с псевдоэлементами: before и: after для вставки сгенерированного содержимого |
| счетчик | Увеличивает или уменьшает значение одного или нескольких счетчиков CSS |
| сброс счетчика | Создает или сбрасывает один или несколько счетчиков CSS |
| курсор | Указывает курсор мыши, который будет отображаться при наведении указателя на элемент |
| направление | Задает направление текста / направление письма |
| дисплей | Определяет, как должен отображаться определенный элемент HTML |
| фильтр | Определяет эффекты (например,грамм. размытие или смещение цвета) на элементе перед отображением элемента |
| гибкий | Сокращенное свойство для flex-grow, flex-shrink и гибкая основа недвижимость |
| гибкая основа | Задает начальную длину гибкого элемента |
| гибкое направление | Определяет направление гибких элементов |
| гибкий поток | Сокращенное свойство для свойств flex-direction и flex-wrap |
| гибкий рост | Определяет, насколько элемент будет расти относительно остальных |
| гибкая термоусадочная | Определяет, как элемент будет уменьшаться по сравнению с остальными |
| гибкая пленка | Указывает, должны ли гибкие элементы оборачиваться или нет. |
| с плавающей запятой | Определяет, должен ли элемент плавать влево, вправо или нет. все |
| шрифт | Сокращенное свойство для font-style, font-variant, font-weight, font-size / line-height и свойство font-family |
| @ font-face | Правило, позволяющее веб-сайтам загружать и использовать шрифты, отличные от «веб-безопасных» шрифтов |
| семейство шрифтов | Задает семейство шрифтов для текста |
| font-feature-settings | Позволяет управлять расширенными типографскими функциями в шрифтах OpenType |
| @ font-feature-values | Позволяет авторам использовать общее имя в font-option-alternate для функции, активированной по-разному в OpenType |
| font-kerning | Управляет использованием информации кернинга (расстояние между буквами) |
| переопределение языка шрифта | Управляет использованием глифов для конкретного языка в гарнитуре |
| размер шрифта | Задает размер шрифта текста |
| регулировка размера шрифта | Сохраняет читаемость текста при восстановлении шрифта |
| растяжка шрифта | Выбирает обычное, сжатое или расширенное начертание из семейства шрифтов. |
| стиль шрифта | Задает стиль шрифта для текста |
| шрифт-синтез | Элементы управления, отсутствующие шрифты которых (полужирный или курсив) могут быть синтезированы браузером |
| вариант шрифта | Указывает, должен ли текст отображаться мелким шрифтом |
| вариант шрифта альтернативный | Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @ font-feature-values |
| варианты шрифтов | Управляет использованием альтернативных глифов для заглавных букв |
| вариант шрифта восточноазиатский | Управляет использованием альтернативных глифов для восточноазиатских шрифтов (например,г японский и китайский) |
| лигатуры вариантов шрифта | Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым применяется |
| вариант шрифта числовой | Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров |
| шрифт-вариант-позиция | Управляет использованием альтернативных глифов меньшего размера, расположенных как верхний или нижний индекс относительно базовой линии шрифта. |
| font-weight | Задает толщину шрифта |
| разрыв | Сокращенное свойство row-gap и column-gap properties |
| сетка | Сокращенное свойство для строк шаблона сетки , столбцы-шаблон-сетки, области-шаблона-сетки, автоматические строки сетки, grid-auto-columns и grid-auto-flow , свойства |
| сетка | Либо задает имя для элемента сетки, либо это свойство является сокращенным свойством для grid-row-start , grid-column-start , grid-row-end и grid-column-end недвижимость |
| сетка-автоматические столбцы | Задает размер столбца по умолчанию |
| сетка-автопоток | Определяет, как автоматически размещенные элементы вставляются в сетку. |
| сетка автоматических рядов | Задает размер строки по умолчанию |
| сетка-столбец | Сокращенное свойство для свойств grid-column-start и grid-column-end |
| конец столбца сетки | Указывает, где закончить элемент сетки |
| сетка-столбец-зазор | Определяет размер промежутка между столбцами |
| сетка-столбец-начало | Указывает, где начать элемент сетки |
| сетка-зазор | Сокращенное свойство grid-row-gap и grid-column-gap properties |
| сетка-рядка | Сокращенное свойство для свойств grid-row-start и grid-row-end |
| конец ряда сетки | Указывает, где закончить элемент сетки |
| сетка-рядок-зазор | Определяет размер зазора между рядами |
| сетка-ряд-начало | Указывает, где начать элемент сетки |
| сетка-шаблон | Сокращенное свойство для grid-template-rows , grid-template-columns и сетка объекта |
| области шаблона сетки | Задает способ отображения столбцов и строк с использованием именованных элементов сетки |
| столбцы шаблона сетки | Задает размер столбцов и количество столбцов в макете сетки. |
| рядов шаблонов сетки | Определяет размер строк в макете сетки |
| Знаки пунктуации | Указывает, можно ли помещать знак препинания за пределы строки. |
| высота | Устанавливает высоту элемента |
| дефиса | Устанавливает способ разбиения слов для улучшения компоновки абзацев |
| рендеринг изображений | Подсказывает браузеру, какие аспекты изображения наиболее важно сохранить при масштабировании изображения |
| @ импорт | Позволяет импортировать таблицу стилей в другую таблицу стилей |
| изоляция | Определяет, должен ли элемент создавать новое содержимое стека. |
| justify-content | Задает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство |
| осталось | Задает левую позицию позиционируемого элемента |
| межбуквенный интервал | Увеличивает или уменьшает расстояние между символами в тексте |
| разрыв строки | Указывает, как / если разрывать строки |
| высота строки | Устанавливает высоту строки |
| в виде списка | Устанавливает все свойства списка в одном объявлении |
| изображение в стиле списка | Задает изображение в качестве маркера элемента списка |
| позиция стиля списка | Определяет положение маркеров пунктов списка (пунктов списка) |
| тип списка | Определяет тип маркера элемента списка |
| маржа | Устанавливает все свойства полей в одном объявлении |
| нижнее поле | Устанавливает нижнее поле элемента |
| поле слева | Устанавливает левое поле элемента |
| поле справа | Устанавливает правое поле элемента |
| верхняя маржа | Устанавливает верхнее поле элемента |
| маска | Скрывает элемент, маскируя или обрезая изображение в определенных местах |
| маскировочная | Указывает, используется ли элемент маски в качестве маски яркости или альфа-маски. |
| макс. Высота | Устанавливает максимальную высоту элемента |
| макс. Ширина | Устанавливает максимальную ширину элемента |
| @media | Устанавливает правила стиля для различных типов / устройств / размеров носителей |
| мин. Высота | Устанавливает минимальную высоту элемента |
| Мин. Ширина | Устанавливает минимальную ширину элемента |
| режим смешивания | Определяет, как содержимое элемента должно сливаться с его прямым родительским фоном |
| пригонка объекта | Определяет, как содержимое заменяемого элемента должно быть размещено в блоке, установленном его используемой высотой и шириной. |
| объект-позиция | Задает выравнивание заменяемого элемента внутри его поля |
| непрозрачность | Устанавливает уровень непрозрачности для элемента |
| заказать | Устанавливает порядок гибкого элемента относительно остальных |
| дети-сироты | Устанавливает минимальное количество строк, которое должно оставаться внизу страницы, когда разрыв страницы происходит внутри элемента. |
| контур | Сокращенное свойство для outline-width, контурного стиля и контур-цвет свойства |
| контурный цвет | Устанавливает цвет контура |
| контур-офсет | Смещает контур и выводит его за край границы |
| контурный | Устанавливает стиль контура |
| ширина контура | Устанавливает ширину контура |
| перелив | Определяет, что происходит, если содержимое выходит за пределы поля элемента. |
| перелив-обертка | Указывает, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение (когда строка слишком длинна, чтобы уместиться в содержащем ее поле). |
| переполнение-x | Указывает, следует ли обрезать левый / правый края содержимого, если он выходит за пределы области содержимого элемента. |
| переполнение | Указывает, следует ли обрезать верхний / нижний края содержимого, если оно выходит за пределы области содержимого элемента. |
| изменить размер | Определяет, можно ли (и как) изменять размер элемента пользователем |
| правый | Определяет правую позицию позиционируемого элемента |
| междурядье | Определяет зазор между рядами сетки |
| поведение прокрутки | Указывает, следует ли плавно анимировать позицию прокрутки в прокручиваемом поле вместо прямого перехода. |
| размер табулятора | Задает ширину символа табуляции |
| стол-макет | Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы |
| выравнивание текста | Задает горизонтальное выравнивание текста |
| text-align-last | Описывает, как выравнивается последняя строка блока или строка непосредственно перед принудительным разрывом строки, когда выравнивание текста имеет значение «выравнивание по ширине». |
| текстовый комбайн вертикальный | Задает комбинацию нескольких символов в пространстве одного символа |
| текст-оформление | Указывает украшение, добавленное к тексту |
| текст-украшение-цвет | Определяет цвет оформления текста |
| текст-украшение-строка | Определяет тип линии в текстовом оформлении |
| оформление текста | Задает стиль линии в текстовом оформлении |
| текстовый отступ | Задает отступ первой строки в текстовом блоке |
| с выравниванием текста по ширине | Определяет метод выравнивания, используемый при выравнивании текста по ширине. |
| с ориентацией текста | Определяет ориентацию текста в строке |
| переполнение текста | Определяет, что должно произойти, когда текст переполняет содержащий элемент |
| тень текста | Добавляет тень к тексту |
| преобразование текста | Управляет использованием заглавных букв в тексте |
| текст-подчеркивание-позиция | Определяет положение подчеркивания, которое задается с помощью свойства text-decoration | .
| верх | Определяет верхнюю позицию позиционируемого элемента |
| преобразование | Применяет 2D или 3D преобразование к элементу |
| преобразование происхождения | Позволяет изменять положение трансформируемых элементов |
| стиль преобразования | Определяет, как вложенные элементы отображаются в трехмерном пространстве. |
| переход | Сокращенное свойство для всех свойств перехода — * |
| задержка перехода | Указывает, когда начнется эффект перехода. |
| продолжительность перехода | Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода. |
| переходная собственность | Задает имя свойства CSS, для которого применяется эффект перехода |
| функция времени перехода | Определяет кривую скорости эффекта перехода |
| юникод-биди | Используется вместе со свойством direction для установки или возврата, следует ли переопределить текст для поддержки нескольких языков в одном документе. |
| по выбору пользователя | Указывает, можно ли выделить текст элемента. |
| белое пространство | Определяет, как обрабатывается пустое пространство внутри элемента |
| вдовы | Устанавливает минимальное количество строк, которое должно оставаться в верхней части страницы, когда разрыв страницы происходит внутри элемента. |
| ширина | Устанавливает ширину элемента |
| разрыв слова | Определяет, как слова должны разрываться при достижении конца строки |
| межсловный интервал | Увеличивает или уменьшает расстояние между словами в тексте |
| перенос слов | Позволяет разбивать длинные неразрывные слова и переносить их на следующую строку |
| режим записи | Задает расположение строк текста по горизонтали или по вертикали. |
| Селектор | Пример | Описание примера |
|---|---|---|
| . класс | .intro | Выбирает все элементы с |
| .class1.class2 | .name1.name2 | Выбирает все элементы с name1 и name2 set в пределах своего атрибута класса |
| .класс1 .класс2 | .name1 .name2 | Выбирает все элементы с именем 2 , который является потомком элемент с именем 1 |
| # id | # имя | Выбирает элемент с |
| * | * | Выбирает все элементы |
| элемент | п. | Выбирает все элементы |
| элемент.класс | стр. Intro | Выбирает все элементы с |
| элемент, элемент | див, | п. Выбирает все элементы и все элементы |
| элемент элемент | дел p | Выбирает все элементы внутри элементов |
| элемент > элемент | div> p | Выбирает все элементы , где родительский элемент . |
| элемент + элемент | дел + п | Выбирает первый элемент , который помещается сразу после элементов |
| элемент1 ~ элемент2 | пр ~ ул | Выбирает каждый элемент
|
| [ атрибут ] | [цель] | Выбирает все элементы с целевым атрибутом |
| [ атрибут = значение ] | [target = _blank] | Выбирает все элементы с target = «_ blank» |
| [ атрибут ~ = значение ] | [название ~ = цветок] | Выбирает все элементы с атрибутом заголовка, содержащим слово «цветок» |
| [ атрибут | = значение ] | [lang | = en] | Выбирает все элементы со значением атрибута lang, равным «en» или начиная с «en-» |
| [ атрибут ^ = значение ] | а [href ^ = «https»] | Выбирает каждый элемент , значение атрибута href которого начинается с https. |
| [ атрибут $ = значение ] | а [href $ = «.pdf »] | Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf» |
| [ атрибут * = значение ] | a [href * = «w3schools»] | Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools». |
| : активный | a: активный | Выбирает активную ссылку |
| :: после | р :: после | Вставить что-нибудь после содержимого каждого элемента |
| :: до | р :: до | Вставить что-нибудь перед содержанием каждого элемента |
| : проверено | ввод: проверен | Выбирает каждый проверенный элемент |
| : по умолчанию | ввод: по умолчанию | Выбирает элемент по умолчанию |
| : отключено | вход: отключен | Выбирает каждый отключенный элемент |
| : пусто | п: пусто | Выбирает каждый элемент , не имеющий дочерних элементов (включая текстовые узлы). |
| : включен | вход: включен | Выбирает каждый активированный элемент |
| : первенец | р: первенец | Выбирает каждый элемент , который является первым дочерним элементом своего родительского |
| :: первая буква | п :: первая буква | Выбирает первую букву каждого элемента |
| :: первая линия | р :: первая линия | Выбирает первую строку каждого элемента |
| : первый в своем роде | п: первый номер | Выбирает каждый элемент , который является первым элементом его родительского |
| : фокус | ввод: фокус | Выбирает элемент ввода с фокусом |
| : полноэкранный | : полноэкранный | Выбирает элемент, который находится в полноэкранном режиме |
| : парение | a: парение | Выбирает ссылки при наведении указателя мыши на |
| : в пределах | вход: в пределах | Выбирает элементы ввода со значением в указанном диапазоне |
| : неопределенный | ввод: неопределенный | Выбирает элементы ввода, находящиеся в неопределенном состоянии |
| : недействительно | ввод: неверный | Выбирает все входные элементы с недопустимым значением |
| : lang ( язык ) | с: lang (it) | Выбирает каждый элемент с атрибутом lang, равным «it» (итальянский) |
| : последний ребенок | р: последний ребенок | Выбирает каждый элемент , который является последним дочерним элементом своего родительского |
| : последний тип | п: последний тип | Выбирает каждый элемент , который является последним элементом его родительского |
| : ссылка | а: ссылка | Выбирает все непосещенные ссылки |
| :: маркер | :: маркер | Выбирает маркеры пунктов списка |
| : нет ( селектор ) | : нет (p) | Выбирает каждый элемент, не являющийся элементом |
| : nth-ребенок ( n ) | р: nth-ребенок (2) | Выбирает каждый элемент , который является вторым дочерним элементом своего родительского |
| : nth-последний-ребенок ( n ) | p: nth-last-child (2) | Выбирает каждый элемент , который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента |
| : nth-last-of-type ( n ) | p: nth-last-of-type (2) | Выбирает каждый элемент , который является вторым элементом своего родительского элемента, считая от последнего дочернего элемента |
| : nth-of-type ( n ) | п: n-й тип (2) | Выбирает каждый элемент , который является вторым элементом его родительского |
| : только тип | п: одинарный | Выбирает каждый элемент , который является единственным элементом его родительского |
| : единственный ребенок | р: единственный ребенок | Выбирает каждый элемент , который является единственным дочерним элементом своего родительского |
| : опционально | вход: опционально | Выбирает элементы ввода без атрибута «обязательный» |
| : вне допустимого диапазона | вход: вне допустимого диапазона | Выбирает элементы ввода со значением вне указанного диапазона |
| :: заполнитель | input :: заполнитель | Выбирает элементы ввода с указанным атрибутом «заполнитель» |
| : только для чтения | вход: только чтение | Выбирает элементы ввода с указанным атрибутом «только для чтения» |
| : чтение-запись | вход: чтение-запись | Выбирает элементы ввода с НЕ указанным атрибутом «только для чтения» |
| : требуется | ввод: требуется | Выбирает элементы ввода с указанным атрибутом «обязательный». |
| : корень | : корень | Выбирает корневой элемент документа |
| :: выбор | :: выбор | Выбирает часть элемента, выбранную пользователем |
| : цель | # новости: цель | Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки) |
| : действует | ввод: действительный | Выбирает все входные элементы с допустимым значением |
| : посетил | а: посетил | Выбирает все посещенные ссылки |
Свойство отображения CSS
Пример
Использование различных отображаемых значений:
п.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Свойство display определяет поведение отображения
(тип окна рендеринга) элемента.
В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В значение по умолчанию в XML является встроенным, включая элементы SVG.
| Значение по умолчанию: | ? |
|---|---|
| Унаследовано: | № |
| Анимация: | нет. Прочитать о animatable |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.display = «none» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| дисплей | 4,0 | 8,0 | 3,0 | 3,1 | 7,0 |
Примечание: Значения «flex» и «inline-flex» требуют префикса -webkit- для работы в Safari.
Примечание: «display: contents» не работает в Edge предыдущая версия 79.
Синтаксис CSS
Стоимость недвижимости
| Значение | Описание | Играй | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| рядный | Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| блок | Отображает элемент как блочный (например, ). Это начинается на новая строка и занимает всю ширину | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| содержание | Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент на следующий уровень в DOM | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| гибкий | Отображает элемент как гибкий контейнер на уровне блока | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| сетка | Отображает элемент как контейнер сетки уровня блока | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| рядный блок | Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| линейно-гибкий | Отображает элемент как гибкий контейнер встроенного уровня | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| рядная сетка | Отображает элемент как контейнер сетки встроенного уровня | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| встроенный стол | Элемент отображается как таблица встроенного уровня | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| пункт списка | Пусть элемент ведет себя как элемент | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| обкатка | Отображает элемент как блочный или встроенный, в зависимости от контекста | Играй » | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| стол | Пусть элемент ведет себя как элемент
Другие примерыПримерДемонстрация того, как использовать значение свойства contents. В следующих Например, контейнер .a исчезнет, а дочерние элементы (.b) дочерние элементы элемента на следующий уровень в DOM: .дисплей {: содержание; граница: 2px сплошной красный; цвет фона: #ccc; отступ: 10 пикселей; ширина: 200 пикселей; } .b { ПримерДемонстрация использования наследуемого значения свойства: корпус {дисплей: встроенный; } p { ПримерУстановить направление некоторых гибких элементов внутри элемента в обратном направлении.
заказ: div { Связанные страницыУчебникCSS: Отображение CSS и видимость Ссылка на HTML DOM: свойство отображения CSS СвойстваАлфавитный список всех свойств CSS из спецификаций CSS2 и CSS3. Фильтровать по: CSS3 СвойстваПриведенный выше список включает свойства CSS2 и CSS3. W3C в настоящее время работает над CSS3. CSS3 состоит из различных автономных модулей, каждый из которых работает в определенной области CSS. Например, есть модуль цвета CSS, модуль фонов и границ CSS, модуль шрифтов CSS и т. Д. Каждый из этих модулей находится на своем собственном пути разработки, и поэтому они могут иметь разные номера уровней. Например, один может быть на уровне 3, а другой — на уровне 4.Тем не менее, все они считаются «CSS3». Вот отдельный список свойств CSS3. Это некоторые из новых свойств, которые вводятся в CSS через его различные модули. Эти свойства также включены в приведенный выше список. Как использовать свойства CSSСвойстваCSS используются для применения стилей к структурированным документам, например, созданным с помощью HTML или XML. CSS-свойства указаны в стандарте CSS. У каждого свойства есть набор возможных значений.Некоторые свойства могут влиять на любой тип элемента, а другие применяются только к определенным группам элементов. Таблица стилей состоит из списка правил. Каждое правило или набор правил состоит из одного или нескольких селекторов и блока объявления. CSS-свойства используются в блоке объявления с соответствующим значением. В следующем примере мы устанавливаем оранжевый цвет фона элемента body . тело { цвет фона: оранжевый; } В данном случае И в этом случае К любому селектору можно применить несколько свойств: тело { цвет фона: оранжевый; цвет: зеленый; размер шрифта: 1.5em; } Вы также можете применить одни и те же стили сразу к нескольким селекторам. статья, навигация .sidebar { цвет фона: оранжевый; цвет: зеленый; размер шрифта: 1.5em; } Вот пример того, как стили могут вписаться в HTML-документ: Пример базовых свойств CSSЭто базовый пример, демонстрирующий, как свойства CSS могут быть применены к веб-странице. Попробуй В этом примере используется встроенная таблица стилей. Вы также можете использовать внешнюю таблицу стилей и применять стили ко всему сайту. Дополнительные сведения об использовании CSS см. В руководстве по CSS.
postcss / postcss: преобразование стилей с помощью плагинов JSPostCSS — это инструмент для преобразования стилей с помощью плагинов JS.Эти плагины могут использовать ваш CSS, поддерживать переменные и миксины, переносить будущий синтаксис CSS, встроенные изображения и многое другое. PostCSS используется лидерами отрасли, включая Wikipedia, Twitter, Alibaba, и JetBrains. Плагин Autoprefixer PostCSS — один из самых популярных CSS-процессоры. PostCSS принимает файл CSS и предоставляет API для анализа и изменения его правил. (преобразовывая их в абстрактное синтаксическое дерево). Затем этот API может использоваться плагинами для множества полезных вещей, е.g., чтобы автоматически находить ошибки или вставлять префиксы поставщиков. Поддержка / Обсуждение: Gitter Для коммерческой поддержки PostCSS (консультирование, улучшение клиентской культуры вашей компании, плагины PostCSS), свяжитесь с Evil Martians на [email protected]. СпонсорствоPostCSS нужна ваша поддержка.Мы принимаем пожертвования в Открытом Коллективе. ПлагиныВ настоящее время PostCSS насчитывает более 200 плагинов. Вы можете найти все плагины в списке плагинов или в каталоге с возможностью поиска. Ниже приведен список наших любимых плагинов — лучшие демонстрации того, что можно построить поверх PostCSS. Если у вас есть новые идеи, разработать плагин PostCSS очень просто. Решите глобальную проблему CSS
Use Future CSS, TodayЛучшая читаемость CSSИзображения и шрифтыЛинтерс
Другое
СинтаксисыPostCSS может преобразовывать стили любого синтаксиса, не только CSS. Если ваш любимый синтаксис еще не поддерживается, вы можете написать парсер и / или стрингификатор для расширения PostCSS.
|