Site icon Vavik96

CSS Свойства

admin

CSS определяет КАК HTML элементы должны отображаться. Стили как правило сохраняются во внешних .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

Exit mobile version