CSS определяет КАК HTML элементы должны отображаться. Стили как правило сохраняются во внешних .css файлах. Внешние таблицы стилей позволяют вам менять внешний вид и разметку всех страниц на Веб сайте – путем редактирования одного единственного файла!
- CSS означает Cascading Style Sheets – Каскадные Таблицы Стилей
- Стили определяют как отображать HTML элементы
- Стили были добавлены в HTML 4.0 чтобы решить проблему оформления веб страниц
- Внешние Таблицы Стилей могут сохранить много времени
- Внешние Таблицы Стилей хранятся в CSS файлах
Как предполагалось, HTML не будет содержать теги для форматирования документа. Изначально HTML предназначался для определения содержания документа, например:
<h1>Это заголовок</h1>
<p>Это параграф.</p>
Когда такие теги как <font> и атрибуты цвета (color) были добавлены в спецификацию HTML 3.2 , начался кошмар для веб разработчиков. Разработка больших веб сайтов , где информация о шрифтах и цветах должна была добавляться к каждой странице, стала длительным и дорогостоящим процессом. Чтобы решить эту проблему, Всемирный Интернет Консорциум (World Wide Web Consortium или, кратко, W3C) создал CSS. В HTML 4.0, все форматирование может быть удалено из HTML документа, и сохранено в отдельном CSS файле.
Все браузеры поддерживают CSS на сегодняшний день.
CSS Группы Свойств
Столбец “CSS” указывает, в какой версии CSS свойство определено (CSS1, CSS2 или CSS3).
Свойства Анимации
| Свойство | Описание | CSS |
|---|
| @keyframes | Определяет анимацию | 3 |
| animation | Стенографическое (сокращенное) свойство анимации, определяющее все свойства анимации, перечисленные ниже, кроме свойства animation-play-state | 3 |
| animation-name | Указывает название анимации @keyframes | 3 |
| animation-duration | Указывает сколько секунд или миллисекунд занимает анимация для завершения одного цикла | 3 |
| animation-timing-function | Указывает характеристическую функцию скорости анимации | 3 |
| animation-delay | Указывает, когда анимация начнется (задержка) | 3 |
| animation-iteration-count | Указывает, сколько раз анимация должна быть воспроизведена | 3 |
| animation-direction | Указывает, должна ли анимация воспроизводиться в обратном порядке на чередующихся (четных) циклах воспроизведения | 3 |
| animation-play-state | Указывает состояние анимации: воспроизведение или пауза | 3 |
Свойства Фона
| Свойство | Описание | CSS |
|---|
| background | Устанавливает все фоновые свойства в одном объявлении | 1 |
| background-attachment | Указывает, должно ли фоновое изображение быть зафиксированным, или прокручиваться вместе со страницей | 1 |
| background-color | Устанавливает цвет фона элемента | 1 |
| background-image | Устанавливает фоновое изображение элемента | 1 |
| background-position | Устанавливает начальную позицию фонового изображения | 1 |
| background-repeat | Указывает, как фоновое изображение должно повторяться | 1 |
| background-clip | Указывает область рисования фона | 3 |
| background-origin | Указывает область позиционирования фоновых изображений | 3 |
| background-size | Указывает размер фоновых изображений | 3 |
Свойства Границ и Контуров
| Свойство | Описание | CSS |
|---|
| border | Устанавливает все свойства границы в одном объявлении | 1 |
| border-bottom | Устанавливает все свойства нижней границы в одном объявлении | 1 |
| border-bottom-color | Устанавливает цвет нижней границы | 1 |
| border-bottom-style | Устанавливает стиль нижней границы | 1 |
| border-bottom-width | Устанавливает толщину нижней границы | 1 |
| border-color | Устанавливает цвет всех четырех границ | 1 |
| border-left | Устанавливает все свойства левой границы в одном объявлении | 1 |
| border-left-color | Устанавливает цвет левой границы | 1 |
| border-left-style | Устанавливает стиль левой границы | 1 |
| border-left-width | Устанавливает толщину левой границы | 1 |
| border-right | Устанавливает все свойства правой границы в одном объявлении | 1 |
| border-right-color | Устанавливает цвет правой границы | 1 |
| border-right-style | Устанавливает стиль правой границы | 1 |
| border-right-width | Устанавливает толщину правой границы | 1 |
| border-style | Устанавливает стиль всех четырех границ | 1 |
| border-top | Устанавливает все свойства верхней границы в одном объявлении | 1 |
| border-top-color | Устанавливает цвет верхней границы | 1 |
| border-top-style | Устанавливает стиль верхней границы | 1 |
| border-top-width | Устанавливает толщину верхней границы | 1 |
| border-width | Устанавливает толщину всех четырех границ | 1 |
| outline | Устанавливает все свойства контура в одном объявлении | 2 |
| outline-color | Устанавливает цвет контура | 2 |
| outline-style | Устанавливает стиль контура | 2 |
| outline-width | Устанавливает толщину контура | 2 |
| border-bottom-left-radius | Определяет форму границы левого нижнего угла | 3 |
| border-bottom-right-radius | Определяет форму границы правого нижнего угла | 3 |
| border-image | Стенографическое (сокращенное) свойство для установки всех свойств группы border-image-* | 3 |
| border-image-outset | Указывает величину, на которую распространяется область изображения границы за пределы блока границы | 3 |
| border-image-repeat | Указывает, должна ли граница-изображение повторяться, масштабироваться (с целью подгонки, чтобы заполнить всю область) или растягиваться | 3 |
| border-image-slice | Указывает внутренние смещения границы-изображения | 3 |
| border-image-source | Указывает изображение, используемое в качестве границы | 3 |
| border-image-width | Указывает толщину сторон границы-изображения | 3 |
| border-radius | A стенографическое (сокращенное) свойство для установки всех свойств группы border-*-radius | 3 |
| border-top-left-radius | Определяет форму границы верхнего левого угла | 3 |
| border-top-right-radius | Определяет форму границы верхнего правого угла | 3 |
| box-decoration-break | | 3 |
| box-shadow | Добавляет один или более эффектов отбрасывания тени к блоку элемента | 3 |
Свойства Блока
| Свойство | Описание | CSS |
|---|
| overflow-x | Указывает, обрезать или нет левый/правый края контента, если он переполняет область содержимого элемента | 3 |
| overflow-y | Указывает, обрезать или нет верхний/нижний края контента, если он переполняет область содержимого элемента | 3 |
| overflow-style | Указывает предпочитаемый метод прокрутки для переполненных элементов | 3 |
| rotation | Поворачивает элемент вокруг заданной точки, определенной свойством rotation-point | 3 |
| rotation-point | Определяет точку поворота как смещение от верхнего левого края границы | 3 |
Цветовые Свойства
| Свойство | Описание | CSS |
|---|
| color-profile | Разрешает спецификацию источника цветового профиля, отличную от используемой по умолчанию | 3 |
| opacity | Устанавливает уровень прозрачности элемента | 3 |
| rendering-intent | Разрешает спецификацию цели визуализации цветового профиля, отличную от используемой по умолчанию | 3 |
Свойства Содержимого Страничных Медиа
| Свойство | Описание | CSS |
|---|
| bookmark-label | Указывает подпись закладки | 3 |
| bookmark-level | Указывает уровень закладки | 3 |
| bookmark-target | Указывает назначение ссылки закладки | 3 |
| float-offset | Вставляет плавающие элементы в противоположном направлении | 3 |
| hyphenate-after | Указывает минимальное количество символов после переноса в слове, перенесенном на новую строку посредством дефиса | 3 |
| hyphenate-before | Указывает минимальное количество символов до переноса в слове, перенесенном на новую строку посредством дефиса | 3 |
| hyphenate-character | Определяет строку, отображаемую в том месте перенесенного на новую строку слова, где произошел разрыв слова | 3 |
| hyphenate-lines | Указывает максимальное количество строк с переносами слов на новую строку для элемента | 3 |
| hyphenate-resource | Указывает список внешних ресурсов через запятую, который может помочь браузеру определить места переноса слов на новую строку | 3 |
| hyphens | Устанавливает, как разбивать слова для улучшения вида параграфов | 3 |
| image-resolution | Указывает правильное разрешение изображений | 3 |
| marks | Добавляет маркировочные знаки обрезки и/или перекрестия к документу | 3 |
| string-set | | 3 |
Свойства Размеров
| Свойство | Описание | CSS |
|---|
| height | Устанавливает высоту элемента | 1 |
| max-height | Устанавливает максимальную высоту элемента | 2 |
| max-width | Устанавливает максимальную ширину элемента | 2 |
| min-height | Устанавливает минимальную высоту элемента | 2 |
| min-width | Устанавливает минимальную ширину элемента | 2 |
| width | Устанавливает ширину элемента | 1 |
Свойства Эластичного Блока
| Свойство | Описание | CSS |
|---|
| box-align | Указывает, как выравнивать дочерние элементы блока | 3 |
| box-direction | Указывает, в каком направлении будут отображаться дочерние элементы блока | 3 |
| box-flex | Указывает, являются ли дочерние элементы блока эластичными в размере | 3 |
| box-flex-group | Назначает эластичные элементы эластичным группам | 3 |
| box-lines | Указывает, могут ли колонки переходить на новую строку, как только им не хватает места в родительском блоке | 3 |
| box-ordinal-group | Указывает порядок отображения дочерних элементов блока | 3 |
| box-orient | Указывает, как следует располагать дочерние элементы блока – горизонтально или вертикально | 3 |
| box-pack | Указывает горизонтальное положение в горизонтальных блоках и вертикальное положение в вертикальных блоках | 3 |
Свойства Шрифта
| Свойство | Описание | CSS |
|---|
| font | Устанавливает все свойства шрифта в одном объявлении | 1 |
| font-family | Указывает семейство шрифта текста | 1 |
| font-size | Указывает размер шрифта текста | 1 |
| font-style | Указывает стиль шрифта текста | 1 |
| font-variant | Указывает, следует ли отображать текст в шрифте капитель | 1 |
| font-weight | Указывает жирность шрифта | 1 |
| @font-face | Правило, которое позволяет веб сайтам загружать и использовать произвольные шрифты, а не только “безопасные веб шрифты” | 3 |
| font-size-adjust | Сохраняет удобочитаемость текста, когда используется запасной шрифт | 3 |
| font-stretch | Выбирает нормальный, уплотненный, или растянутый внешний вид семейства шрифта | 3 |
Свойства Генерации Контента
| Свойство | Описание | CSS |
|---|
| content | Используется с псевдоэлементами :before и :after для вставки генерируемого контента | 2 |
| counter-increment | Увеличивает один или более счетчиков | 2 |
| counter-reset | Создает или сбрасывает один или более счетчиков | 2 |
| quotes | Устанавливает тип маркеров цитирования для вставляемых цитат | 2 |
| crop | Позволяет замененному элементу быть в точности прямоугольной областью объекта, вместо объекта целиком | 3 |
| move-to | Вызывает удаление элемента из общего потока и его вставку в более позднем месте документа | 3 |
| page-policy | Определяет, какой странично-основанный экземпляр данного элемента применяется к счетчику или значению строки | 3 |
Свойства Сетки
| Свойство | Описание | CSS |
|---|
| grid-columns | Указывает ширину каждой колонки в сетке | 3 |
| grid-rows | Указывает высоту каждой колонки в сетке | 3 |
Свойства Гиперссылок
| Свойство | Описание | CSS |
|---|
| target | A стенографическое (сокращенное) свойство для установки свойств target-name, target-new и target-position | 3 |
| target-name | Указывает, где открывать ссылки (место назначения) | 3 |
| target-new | Указывает, следует ли открывать ссылки в новом окне или в новой вкладке существующего окна | 3 |
| target-position | Указывает, где располагать окно/вкладку с открытой ссылкой | 3 |
Свойства Строкового Контейнера
| Свойство | Описание | CSS |
|---|
| alignment-adjust | Позволяет более точно выравнивать элементы в линии | 3 |
| alignment-baseline | Указывает, как элемент строчного уровня выравнивается относительно своего родительского элемента | 3 |
| baseline-shift | Разрешает перепозиционирование основной базовой линии относительно основной базовой линии | 3 |
| dominant-baseline | Указывает таблицу масштабированной базовой линии | 3 |
| drop-initial-after-adjust | Устанавливает точку выравнивания эффекта drop initial (декорации начальной буквы(букв)) для главной точки соединения | 3 |
| drop-initial-after-align | Устанавливает, какую линию выравнивания внутри контейнера начальной строки использовать в главной точке соединения с контейнером начальной буквы | 3 |
| drop-initial-before-adjust | Устанавливает точку выравнивания эффекта drop initial для второстепенной точки соединения | 3 |
| drop-initial-before-align | Устанавливает, какую линию выравнивания внутри контейнера начальной строки использовать во второстепенной точке соединения с контейнером начальной буквы | 3 |
| drop-initial-size | Контролирует частичное погружение начальной буквы | 3 |
| drop-initial-value | Активизирует эффект drop-initial (выделения, декорирования начальной буквы (букв)) | 3 |
| inline-box-align | Устанавливает, какую строку многострочного блока выравнивать с предыдущим и следующим строчными элементами в линии | 3 |
| line-stacking | Стенографическое (сокращенное) свойство для установки свойств line-stacking-strategy, line-stacking-ruby и line-stacking-shift | 3 |
| line-stacking-ruby | Устанавливает метод строчной укладки для блочных элементов, содержащих элементы ruby аннотаций | 3 |
| line-stacking-shift | Устанавливает метод строчной укладки для блочных элементов, содержащих элементы с базовым сдвигом | 3 |
| line-stacking-strategy | Устанавливает стратегию строчной укладки для уложенных строчных контейнеров внутри содержащего блочного элемента | 3 |
| text-height | Устанавливает измерение прогрессии-блока текстовой области строчного контейнера | 3 |
Свойства Списка
| Свойство | Описание | CSS |
|---|
| list-style | Устанавливает все свойства списка в одном объявлении | 1 |
| list-style-image | Указывает изображение в качестве маркера пункта списка | 1 |
| list-style-position | Указывает, где должны появляться маркеры пунктов списка – внутри или снаружи потока содержания | 1 |
| list-style-type | Указывает тип маркера пункта списка | 1 |
Свойства Полей
| Свойство | Описание | CSS |
|---|
| margin | Устанавливает все свойства полей в одном объявлении | 1 |
| margin-bottom | Устанавливает нижнее поле элемента | 1 |
| margin-left | Устанавливает левое поле элемента | 1 |
| margin-right | Устанавливает правое поле элемента | 1 |
| margin-top | Устанавливает верхнее поле элемента | 1 |
Свойства Бегущей Строки
| Свойство | Описание | CSS |
|---|
| marquee-direction | Устанавливает направление прокрутки контента | 3 |
| marquee-play-count | Устанавливает, сколько раз прокручивать контент | 3 |
| marquee-speed | Устанавливает скороть прокрутки контента | 3 |
| marquee-style | Устанавливает стиль прокручиваемого контента | 3 |
Свойства Многоколоночной Верстки
| Свойство | Описание | CSS |
|---|
| column-count | Указывает, на какое количество колонок следует разбить элемент | 3 |
| column-fill | Указывает, как заполнять колонки | 3 |
| column-gap | Указывает расстояние (интервал, разрыв) между колонками | 3 |
| column-rule | Стенографическое (сокращенное) свойство для установки всех свойств группы column-rule-* | 3 |
| column-rule-color | Указывает цвет линейки между колонками | 3 |
| column-rule-style | Указывает стиль линейки между колонками | 3 |
| column-rule-width | Указывает толщину линейки между колонками | 3 |
| column-span | Указывает, сколько колонок должен охватывать элемент (например, заголовок) | 3 |
| column-width | Указывает ширину колонок | 3 |
| columns | Стенографическое свойство для установки свойств column-width и column-count | 3 |
Свойства Отступов
| Свойство | Описание | CSS |
|---|
| padding | Устанавливает все свойства отступов в одном объявлении | 1 |
| padding-bottom | Устанавливает нижний отступ элемента | 1 |
| padding-left | Устанавливает левый отступ элемента | 1 |
| padding-right | Устанавливает правый отступ элемента | 1 |
| padding-top | Устанавливает верхний отступ элемента | 1 |
Свойства Страничного Медиа
| Свойство | Описание | CSS |
|---|
| fit | Дает подсказку, как масштабировать замененный элемент, если оба его свойства width и height не установлены в auto | 3 |
| fit-position | Определяет выравнивание объекта внутри контейнера | 3 |
| image-orientation | Указывает поворот по часовой стрелке, который агент пользователя применяет к изображению | 3 |
| page | Указывает специфический тип страницы, на которой ДОЛЖЕН отображаться элемент | 3 |
| size | Указывает размер и ориентацию содержащего контейнера для страничного контента | 3 |
Свойства Позиционирования
| Свойство | Описание | CSS |
|---|
| bottom | Указывает нижнее положение позиционируемого элемента | 2 |
| clear | Указывает стороны элемента, по которым запрещены плавающие элементы | 1 |
| clip | Обрезает абсолютно позиционированный элемент | 2 |
| cursor | Указывает тип отображаемого курсора | 2 |
| display | Указывает тип контейнера, который должен генерировать элемент | 1 |
| float | Указывает, должен или нет контейнер быть плавающим | 1 |
| left | Указывает левое положение позиционируемого элемента | 2 |
| overflow | Указывает, что происходит, если содержимое переполняет контейнер элемента | 2 |
| position | Указывает тип метода позиционирования для элемента (статичный, относительный, абсолютный или фиксированный) | 2 |
| right | Указывает правое положение позиционируемого элемента | 2 |
| top | Указывает верхнее положение позиционируемого элемента | 2 |
| visibility | Указывает, должен ли элемент быть видимым | 2 |
| z-index | Устанавливает вертикальный порядок позиционируемого элемента | 2 |
Свойства Печати
| Свойство | Описание | CSS |
|---|
| orphans | Устанавливает минимальное количество строк, которое должно быть оставлено снизу страницы, когда происходит переход на новую страницу внутри элемента | 2 |
| page-break-after | Устанавливает поведение перехода на новую страницу после элемента | 2 |
| page-break-before | Устанавливает поведение перехода на новую страницу перед элементом | 2 |
| page-break-inside | Устанавливает поведение перехода на новую страницу внутри элемента | 2 |
| widows | Устанавливает минимальное количество строк, которое должно быть оставлено сверху страницы, когда происходит переход на новую страницу внутри элемента | 2 |
Свойства Ruby
| Свойство | Описание | CSS |
|---|
| ruby-align | Контролирует выравнивание ruby текста и базового ruby контента относительно друг друга | 3 |
| ruby-overhang | Определяет, допустимо ли, и с какой стороны, частично выступать ruby тексту над любым смежным текстом в дополнение к его собственной базе, когда ruby текст шире, чем ruby база | 3 |
| ruby-position | Контролирует положение ruby текста относительно его базы | 3 |
| ruby-span | Контролирует поведение охвата элементов аннотаций | 3 |
Свойства Речи
| Свойство | Описание | CSS |
|---|
| mark | Сокращенное свойство для установки свойств mark-before и mark-after | 3 |
| mark-after | Позволяет именованным маркерам присоединяться к аудио потоку | 3 |
| mark-before | Позволяет именованным маркерам присоединяться к аудио потоку | 3 |
| phonemes | Указывает фонетическое произношение для текста, содержащегося в соответствующем элементе | 3 |
| rest | Сокращенное свойство для установки свойств rest-before и rest-after | 3 |
| rest-after | Указывает паузу или интонационную границу, которую необходимо выдержать после произнесения содержимого элемента | 3 |
| rest-before | Указывает паузу или интонационную границу, которую необходимо выдержать перед произнесением содержимого элемента | 3 |
| voice-balance | Указывает баланс между левым и правым каналами | 3 |
| voice-duration | Указывает, сколько требуется времени для произнесения содержимого элемента | 3 |
| voice-pitch | Указывает среднюю высоту (частоту) голоса говорящего | 3 |
| voice-pitch-range | Указывает колебание средней высоты | 3 |
| voice-rate | Контролирует темп произношения | 3 |
| voice-stress | Указывает силу или выразительность голоса | 3 |
| voice-volume | Указывает амплитуду формы волны, выдаваемую речевым синтезатором | 3 |
Свойства Таблицы
| Свойство | Описание | CSS |
|---|
| border-collapse | Указывает, должны или нет границы таблицы схлопываться | 2 |
| border-spacing | Указывает расстояние между границами смежных ячеек | 2 |
| caption-side | Указывает расположение заголовка таблицы | 2 |
| empty-cells | Определяет, показывать или нет границы и фон пустых ячеек в таблице | 2 |
| table-layout | Устанавливает алгоритм компоновки, используемый для таблицы | 2 |
Свойства Текста
| Свойство | Описание | CSS |
|---|
| color | Устанавливает цвет текста | 1 |
| direction | Указывает направление написания текста | 2 |
| letter-spacing | Увеличивает или уменьшает расстояние между символами в тексте | 1 |
| line-height | Устанавливает высоту строки | 1 |
| text-align | Указывает горизонтальное выравнивание текста | 1 |
| text-decoration | Указывает декорации, добавляемые к тексту | 1 |
| text-indent | Указывает отступ (абзац) первой строки в текстовом блоке | 1 |
| text-transform | Контролирует употребление прописных букв тексте | 1 |
| unicode-bidi | | 2 |
| vertical-align | Устанавливает вертикальное выравнивание элемента | 1 |
| white-space | Указывает, как обрабатываются пробельные символы в элементе | 1 |
| word-spacing | Увеличивает или уменьшает расстояние между словами в тексте | 1 |
| hanging-punctuation | Указывает, может ли символ пунктуации располагаться вне строкового контейнера (висячая пунктуация) | 3 |
| punctuation-trim | Указывает, следует ли обрезать символ пунктуации | 3 |
| text-align-last | Описывает, как последняя строка блока или строка перед принудительным переносом строки выравнивается, когда свойство text-align установлено в “justify” | 3 |
| text-justify | Указывает, какой метод выравнивания использовать, когда свойство text-align установлено в “justify” | 3 |
| text-outline | Указывает контур текста | 3 |
| text-overflow | Указывает, что должно произойти, когда текст переполняет содержащий его элемент | 3 |
| text-shadow | Добавляет тень к тексту | 3 |
| text-wrap | Указывает правила переноса строк для текста | 3 |
| word-break | Указывает правила переноса строк для не-CJK документов | 3 |
| word-wrap | Позволяет длинным, неразрывным словам разрываться и переноситься на следующую строку | 3 |
Свойства 2D/3D Трансформаций
| Свойство | Описание | CSS |
|---|
| transform | Применяет 2D или 3D трансформацию к элементу | 3 |
| transform-origin | Позволяет вам изменять положение трансформируемых элементов | 3 |
| transform-style | Указывает, как вложенные элементы отображаются в трехмерном пространстве | 3 |
| perspective | Указывает перспективу, откуда просматриваются трехмерные элементы | 3 |
| perspective-origin | Указывает нижнее положение трехмерных элементов | 3 |
| backface-visibility | Определяет, должен или нет элемент быть видимым, когда он повернут относительно плоскости экрана | 3 |
Свойства Перехода
| Свойство | Описание | CSS |
|---|
| transition | Сокращенное свойство для установки четырех свойств перехода | 3 |
| transition-property | Указывает название CSS свойства, на которое воздействует переход | 3 |
| transition-duration | Указывает, сколько секунд (миллисекунд) занимает эффект перехода | 3 |
| transition-timing-function | Указывает характеристическую функцию кривой скорости эффекта перехода | 3 |
| transition-delay | Указывает, когда начнется эффект перехода | 3 |
Свойства Пользовательского Интерфейса
| Свойство | Описание | CSS |
|---|
| appearance | Позволяет вам отображать элемент как стандартный элемент интерфейса пользователя | 3 |
| box-sizing | Позволяет вам заставить определенные элементы заполнять область определенным способом | 3 |
| icon | Обеспечивает автору возможность показывать элемент как пиктограмму (иконку) | 3 |
| nav-down | Указывает, куда переходить при использовании клавиши навигации стрелка-вниз | 3 |
| nav-index | Указывает порядок табуляции для элемента | 3 |
| nav-left | Указывает, куда переходить при использовании клавиши навигации стрелка-влево | 3 |
| nav-right | Указывает, куда переходить при использовании клавиши навигации стрелка-вправо | 3 |
| nav-up | Указывает, куда переходить при использовании клавиши навигации стрелка-вверх | 3 |
| outline-offset | Сдвигает контур и рисует его за пределами края границы | 3 |
| resize | Указывает, может ли пользователь изменять размер элемента | 3 |
uroki-css.ru
