Что в css коде является свойством
Перейти к содержимому

Что в css коде является свойством

  • автор:

Свойства и значения CSS

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

Итак, язык CSS состоит из селекторов и свойств. Селекторы указывают на то, к каким элементам применять стили, а свойства — на то, как именно отображать элементы.

Существует огромное количество CSS-свойств, которые влияют практически на все аспекты отображения элементов. Причём каждому свойству соответствует определённый набор значений.

Некоторые значения задаются с помощью текстовых констант, например red , bold , другие с помощью цифровых значений: 12px , 120% и так далее.

Мощь стилей заключается в том, что вы можете быстро и гибко менять внешний вид нужных элементов, особенно когда используете классы. Например, чтобы зачеркнуть текст всех изученных пунктов конспекта, нужно добавить всего лишь одну строчку в CSS:

.learned-ok < color: green; text-decoration: line-through; >

И все теги с классом .learned-ok будут отображаться с перечёркнутым текстом. Теперь представьте, как долго делать то же самое через инлайновые стили, когда в конспекте больше сотни пунктов.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Основные CSS-свойства

Основные CSS-свойства по категориям.

Урок №3
Основные CSS-свойства

Схема CSS-кода выглядит следующим образом:

имяТега

В этом уроке мы рассмотрим основные CSS-свойства. Для вашего удобства, я разложил их по категориям:

  • CSS-свойства влияющие на цвет и фон,
  • CSS-свойства влияющие на шрифт,
  • CSS-свойства влияющие на текст,
  • CSS-свойства влияющие на границу (обводку),
  • CSS-свойства влияющие на внешние и внутренние отступы.

CSS-свойства влияющие на цвет и фон

color: — CSS-свойство влияющее на цвет текста : заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства color :
color: green; — текст должен быть зелёного цвета, в качестве значения задано имя цвета,
color: #008800; — текст должен быть зелёного цвета, в качестве значения задан шестнадцатеричный код в RGB-формате.

background-color: — CSS-свойство влияющее на цвет фона заголовка, абзаца, ссылки и т.д.
В качестве его значения выступает имя цвета или шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства background-color :
background-color: blue; — фон должен быть синего цвета,
background-color: #0000ff; — фон должен быть синего цвета.

background-image: — CSS-свойство устанавливающее изображение, в качестве фона фона заголовка, абзаца, ссылки и т.д. Его значением выступает URL (адрес) изображения.
Примеры кода с использованием CSS-свойства background-image :
background-image: url(http://имя домена.ru/kartinka.jpg); — фоном должно стать изображение, находящееся по адресу http://имя домена.ru/kartinka.jpg

CSS-свойства влияющие на шрифт

font-size: — CSS-свойство влияющее на размер шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства font-size :
font-size: 17px; — размер шрифта должен быть 17 пикселей,
font-size: 20pt; — размер шрифта должен быть 20 пунктов.

font-family: — CSS-свойство устанавливающее имя шрифта для заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя шрифта: Arial , Courier , Impact , Garamond , Georgia , Helvetica , Tahoma , Times (установлен по-умочанию), Verdana и т.д.
Примеры кода с использованием CSS-свойства font-family :
font-family: Arial; — имя шрифта должно быть Arial,
font-family: Impact; — имя шрифта должно Impact.

font-style: — CSS-свойство влияющее на начертание (стиль) шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: normal , oblique .
Примеры кода с использованием CSS-свойства font-style :
font-style: normal; — нормальное начертание шифта,
font-style: oblique; — наклонное начертание шифта.

font-weight: — CSS-свойство влияющее на толщину шрифта заголовка, абзаца, ссылки и т.д. В качестве его значения выступет: normal , bold .
Примеры кода с использованием CSS-свойства font-weight :
font-weight: normal; — нормальное начертание шифта,
font-weight: bold; — жирное начертание шифта.

CSS-свойства влияющие на текст

text-align: — CSS-свойство влияющее на выравнивание текста в заголовке, абзаце и других блочных элементах. В качестве его значения выступает: left , center , right , justify .
Примеры кода с использованием CSS-свойства text-align :
text-align: left; — выравнивание текста по левому краю (установлен по-умолчанию),
text-align: center; — выравнивание текста по центру,
text-align: right; — выравнивание текста по правому краю,
text-align: justify; — равномерное выравнивание текста по левому и правому краям.

text-indent: — CSS-свойство влияющее на отступ первой строки (красная строка) текста в закаловке, абзаце и других блочных элементах. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
text-indent: 20px; — отступ первой строки равен 20 пикселям,
text-indent: 15pt; — отступ первой строки равен 15 пунктам.

line-height: — CSS-свойство влияющее на расстояние между строками текста (интерлиньяж) заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: множитель, пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства text-indent :
line-height: 35px; — расстояние между строками равно 35 пикселей,
line-height: 1.5; — расстояние между строками равно 1.5 по множителю (аналогичен 150%).

letter-spacing: — CSS-свойство влияющее на расстояние между символами в словах заголовка, абзаца ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства letter-spacing :
letter-spacing: 3px; — расстояние между символами в словах, равно 3 пикселя,
letter-spacing: 5pt; — расстояние между символами в словах, равно 5 пунктов.

word-spacing: — CSS-свойство влияющее на расстояние между словами в тексте заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства word-spacing :
word-spacing: 10px; — расстояние между словами, равно 10 пикселей,
word-spacing: 7pt; — расстояние между словами, равно 7 пунктов.

text-transform: — CSS-свойство влияющее на вид букв в тексте, делая их прописными или строчными. В качестве его значения выступает: capitalize , lowercase , uppercase .
Примеры кода с использованием CSS-свойства text-transform :
text-transform: capitalize; — первая буква каждого слова начинается с верхнего регистра,
text-transform: uppercase; — все буквы в тексте записываются в верхнем регистре,
text-transform: lowercase; — все буквы в тексте записываются в нижнем регистре.

text-shadow: — CSS-свойство создающее тень текста.
В качестве его значения выступает: цвет ось-x ось-y радиус .
Пример кода с использованием CSS-свойства text-shadow:
text-shadow: green 3px 2px 2px; — тень будет зелёного цвета, со сдвигом в лево на 3 пикселя, со сдвигом вниз на 2 пикселя, радиус (разброс тени) будет составлять 5 пикселей.

CSS-свойства влияющие на границу (обводку)

border-color: — CSS-свойство влияющее на цвет границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает имя цвета или его шестнацатеричный код в RGB-формате.
Примеры кода с использованием CSS-свойства border-color :
border-color: green; — зелёный цвет обводки,
border-color: #008800; — зелёный цвет обводки, задан в шестнадцатеричном коде RGB-формата.

border-width: — CSS-свойство влияющее на толщину границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает единица измерения: пиксель (px).
Примеры кода с использованием CSS-свойства border-width :
border-width: 1px; — толщина обводки равна 1 пикселю,
border-width: 3px; — толщина обводки равна 3 пикселям.

border-style: — CSS-свойство влияющее на стиль границ заголовка, абзаца, ссылки и т.д. В качестве его значения выступает: solid , dashed , dotted , double .
Примеры кода с использованием CSS-свойства border-style :
border-style: solid; — обводка как сплошная линия,
border-style: dashed; — обводка в виде отрезков,
border-style: dotted; — обводка в виде точек,
border-style: double; — обводка в виде двойной сплошной линии.

CSS-свойства влияющие на внешние и внутренние отступы

margin: — CSS-свойство влияющее на отступ между краем фона одного блочного элемента (заголовки, абзацы и т.д.) и краем фона другого блочного элемента. В качестве его значения выступает единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства margin :
margin: 15px; — отступ равен 15 пикселям,
margin: 12pt; — отступ равен 12 пунктам.

padding: — CSS-свойство влияющее на отступ между краем фона элемента и его содержимым (текстом, изображением). В качестве его значения выступаюет единица измерения: пиксель (px), процент (%), пункт (pt) и т.д.
Примеры кода с использованием CSS-свойства padding :
padding: 5px; — отступ равен 5 пикселям,
padding: 3pt; — отступ равен 3 пунктам.

Основные свойства CSS

CSS используется для оформления html-страниц, их дизайна, расположения и отображения элементов. Делается это с помощью свойств языка CSS, которым устанавливаются те или иные значения.

В курсе мы будем добавлять css-код непосредственно в html-документ. Однако при создании сайтов, состоящих из множества страниц, каскадные таблицы стилей часто помещают в отдельные файлы. О том, как это делается, будет рассказано позже.

«Свойство» – не единственное понятие в CSS. Также есть «правило», «селектор» и другие. Селектор как бы выполняет селекцию, то есть выбирает html-элемент, для которого описывается правило его отображения. В фигурных скобках правила перечисляются свойства CSS с заданными для них значениями. При этом упоминаются только те, значение по-умолчанию которых мы хотим изменить. Пара «свойство: значение» называется объявлением. Объявления помещаются в фигурные скобки и формируют блок объявлений.

Основные понятия языка CSS: селектор, свойство, значение.

В CSS очень много свойств, более ста или двухсот в зависимости от особенностей подсчета. В данном ознакомительном уроке мы рассмотрим более очевидные и часто используемые. Позже в курсе будут упомянуты некоторые другие.

Свойство background-color (можно просто background ) определяет цвет фона элемента. Задавать цвета можно с помощью различных цветовых моделей (RGB, HEX). Пока же будем устанавливать значения цветов с помощью предопределенных в CSS названий. Посмотреть все 140 можно здесь: https://www.w3schools.com/colors/colors_names.asp.

Свойство color определяет цвет текста элемента. В примере ниже мы устанавливаем серый оттенок для всего тела страницы и бирюзовый цвет для заголовка.

Цвет фона и текста в CSS

Исходный код примера:

Исходный код страницы HTML

С помощью свойства font-size можно изменять размер шрифта.

Установка размера шрифта, свойство font-size

В данном случае в качестве единиц измерения мы используем пиксели. Однако существуют и другие. Например, размер html-элемента можно выражать в процентах от размера родительского элемента. Единицам измерения в CSS будет посвящен отдельный урок.

При оформлении текста важным является выбор начертания шрифта. В огромном множестве шрифтов выделяют два основных семейства: serif (с засечками) и sans-serif (без засечек). Если вы присмотритесь к скринам выше, то заметите на концах букв вертикальные и горизонтальные штрихи. Они придают символам более сложное начертание. В данном случае браузер использовал один из шрифтов по-умолчанию, который принадлежит группе serif.

Если мы хотим изменить шрифт всей страницы или отдельных элементов, можем это сделать с помощью свойства font-family .

Свойство font-family

Обычно через запятую перечисляют несколько шрифтов. Если первый не окажется на компьютере пользователя, применяется второй и так далее. В примере используются Verdana и Arial. Если чей-то браузер их не поддерживает, будет применен какой-либо другой шрифт группы sans-serif. Тот, который есть по-умолчанию. Тема шрифтов, их подключения заслуживает отдельного рассмотрения.

Обратите внимание, что в примере мы изменяем шрифт только у абзацев. Заголовок страницы по-прежнему выводится шрифтом с засечками.

В документах часто используется выравнивание текста. Оно бывает по левому краю (значение left ), по правому ( right ), по центру ( center ) и по ширине ( justify ). По умолчанию содержимое элементов, обладающих этим свойством, выравнивается по левому краю. Чтобы изменить такое поведение, используют свойство text-align .

Выравнивание абзацев. Свойство text-align

На скрине абзац слева выравнивается по ширине, а справа – по левому краю, так как здесь объявление выравнивания помещено внутрь комментария и поэтому не работает. Обратите внимание, что в CSS символы начала и конца комментария отличаются от используемых в языке HTML.

Обычно в текстовых редакторах для программистов предусмотрены горячие клавиши для того, чтобы быстро закомментировать или раскомментировать код. Например, в Sublime Text это Ctrl + / . В некоторых других – Ctrl + H .

В нашем примере мы могли бы выровнять заголовок по центру, добавив в его правило соответствующее объявление:

h1 { color: Teal; text-align: center; }

Однако на веб-страницах заголовки обычно выравнивают по левому краю.

С другой стороны, хорошо было бы разместить по центру картинку. Но если напишем так, то ничего не получится:

img { text-align: center; }

Чтобы понять почему, следует познакомиться с новыми понятиями из HTML: о блочных и строчных элементах.

Блочные элементы в HTML начинаются с новой строки и занимают всю доступную ширину страницы. Из знакомых нам к блочным относятся абзацы, заголовки, пункты списков.

Строчные элементы обычно размещают внутри блочных. При этом они не начинаются с новой строки, а как бы вставляются в нее. К этой группе относятся em , strong , а также img .

То, что у нас картинка начинается с новой строки, объясняется ее размещением между двумя абзацами, каждый из которых блочный элемент. Однако можно вставлять изображения внутри абзацев.

Вставка изображения в текст абзаца

Для того, чтобы все-таки расположить картинку по центру, ее одну помещают внутрь блочного элемента, содержимое которого и выравнивают по центру. Например, в абзац или элемент div (division – раздел). В нашем примере код мог бы быть таким:

… div { text-align: center; }div> img src="oop.png" width="500" height="343"  alt="Основные понятия ООП на Python"> /div> …

Элемент div часто использовался в прежних версиях HTML для обособления разделов страницы. Для каждого контейнера задавались свои свойства CSS. Один контейнер мог содержать статью из заголовка и нескольких абзацев, другой – меню сайта. В HTML5 появились так называемые семантические (смысловые) элементы, и div стал использоваться реже.

Так для изображений предназначен контейнер :

… figure { text-align: center; }figure> img src="oop.png" width="500" height="343"  alt="Основные понятия ООП на Python"> figcaption>Понятия, которые включает в себя объектно-ориентированное программирование/figcaption> /figure> …

Выравнивание изображения по центру

Элемент figcaption не является обязательным.

Блочный элемент ( block ) или строчный ( inline ) – это значения такого свойства CSS как display . Добавляя объявление с display в правило того или иного элемента, можно поменять его поведение по-умолчанию. Часто так делают для пунктов списка, когда создается горизонтальное меню сайта.

Пункты списка в одну строку: display: inline;

 html> head> style> ul { background: DarkCyan; color: White; font-size: 20px; padding: 10px; } li { display: inline; padding: 15px; } /style> /head> body> ul> li>Программирование/li> li>Web-Дизайн/li> li>3D-моделирование/li> /ul> /body> /html>

С другой стороны, ссылки – это строчные элементы. Если мы хотим, чтобы каждая ссылка начиналась с новой строки, следует добавить для нее объявление display: block; .

Ссылки с display: block;

Значение none свойства display позволяет удалить элемент со страницы. Так, если задать следующее правило, то изображения не будет на странице:

img { display: none; }

Зачем удалять элемент, если можно его изначально не добавлять на страницу? При верстке шаблонов сайта подобное часто используется совместно с JavaScript и/или при изменении размеров экрана. Например, на небольших экранах меню сайта убирают. Вместо этого на странице появляется кнопка для отображения меню. При клике по ней значение none элемента, содержащего меню, меняется на block . Делается это с помощью JS. В то же время появление на малых экранах кнопки и ее сокрытие на больших может обеспечиваться исключительно средствами CSS.

Свойство display со сменой значений none и block

Скрывать html-элемент также позволяет свойство visibility со значением hidden . Однако имеется существенное отличие от display: none; . В случае использования visibility область пространства на странице, которую занимал элемент, не схлопывается. Пусть мы написали такое правило:

img { visibility: hidden; }

После этого изображения, стоящего между абзацами, не будет на странице. Однако между абзацами останется отведенное под картинку пространство. Сокрытие элементов подобным образом может использоваться, например, при абсолютном позиционировании элементов с динамической (с помощью JS) сменой контента. Чтобы показать ранее скрытый элемент, используют объявление visibility: visible; .

С помощью css-свойств width и height устанавливают ширину и высоту html-элементов. Допустим, мы хотим основное содержание страницы выводить в блоке размером 800px. В этом случае исходный код страницы может быть таким:

Исходный код страницы HTML с элементом main шириной 800 пикселей

Main – это один из семантических элементов языка HTML5, предназначенный для обособления уникального контента страницы, отличающего ее от других страниц сайта.

Если ширина элемента достаточно большая, при этом жестко задана с помощью свойства width и абсолютных единиц измерения, мы неминуемо сталкиваемся с проблемой отображения элемента на малых экранах, когда он не сжимается, не подстраивается под ширину окна. Вместо этого появляется горизонтальная полоса прокрутки.

Свойство width. Элемент не помещается в окне

Появление у страниц сайта (не отдельных элементов) горизонтальной прокрутки настоятельно не рекомендуется. Поисковые системы могут помечать такие сайты как неоптимизированные для мобильных устройств.

Поэтому, когда это уместно, вместо css-свойства width используют max-width . В этом случае элемент может быть меньше установленной ширины (у него есть предел на максимальный размер, но не минимальный), а значит будет подстраиваться под ширину малого экрана.

main { max-width: 800px; background: WhiteSmoke; }

Свойство max-width

На скрине при дальнейшем уменьшении ширины окна горизонтальная полоса прокрутки все-таки появится. Это будет связано с изображением, ширина которого 500 пикселей. Вопрос настройки изображений под разные размеры экранов не так однозначен и будет рассмотрен отдельно.

На широких экранах у нас главное содержимое страницы прибито к левому краю. Как сделать так, чтобы статья располагалась по центру? Имеем:

Отсутствие полей у html-элемента

Центрирование элемента с помощью margin: auto;

Если в css-правило для элемента main добавить объявление text-align: center; , это приведет к тому, что содержимое main будет выравниваться по центру, но сам main не переместится в центр родительского элемента, в данном случае body .

Выравнивание содержимого элемента по центру

Свойство text-align хотя и предназначено для блочных элементов, но управляет находящимся в них контентом. Позиционирование же самих блочных элементов на странице задается другими способами.

Прежде, чем мы сможем установить основное содержимое страницы в центре окна, рассмотрим такие свойства CSS как margin (поле) и padding (отступ).

У каждого элемента есть граница ( border – это тоже css-свойство). В нашем примере хотя граница у main невидима, мы видим ее из-за различия фоновых цветов элементов body и main .

Поля создают пустое пространство за пределами границ (верхней, правой, нижней, левой) элемента. Отступы создают пространство вокруг содержимого элемента с внутренней стороны границы.

Поля (margins) и отступы (paddings)

На скрине слева тоже имеются поля, хотя они не заданы в правилах элементов. Это поля по-умолчанию, которые добавляет браузер для некоторых элементов. Чтобы их убрать и не вносить путаницу, на скрине справа мы обнуляем поля для тела и заголовка.

Следует запомнить, что padding прибавляется к ширине элемента. Это важно учитывать при верстке макета страницы, когда задается ширина элементов и настраивается их взаимное расположение. В нашем примере ширина элемента main в пределах его границ составляет 880 пикселей.

Когда в правило элемента добавляются свойства margin или padding с одним значением (например, margin: 20px; ), то такое объявление подразумевает создание полей или отступов одинакового размера со всех четырех сторон.

Однако в CSS есть возможность настраивать отступы и поля индивидуально с каждой стороны. Для полей используются свойства margin-top , margin-right , margin-bottom , margin-left . Для отступов – аналогичные с первым словом padding . Обычно их используют для переопределения унаследованных полей или отступов, когда надо изменить поле/отступ с одной-двух сторон, но не со всех.

В то же время, с margin и padding можно указать четыре значения. Например, padding: 40px 20px 60px 30px; . Так обычно делают, когда исходно задают поля элементу или надо переопределить все четыре. При этом следует помнить «правило часовой стрелки»: первым идет значение для верха, потом для правой стороны, затем для низа, левая сторона указывается последней.

Можно передать три значения. Например, margin: 20px 100px 200px; . В этом случае второе число берет на себя отступы справа и слева (они будут одинаковыми). Первое и третье значения – верх и низ соответственно.

Ну и наконец, можно указать два значения. Например, margin: 100px 200px; . Первое обозначат отступ сверху и снизу, второе – справа и слева. И вот тут лежит решение нашей проблемы с расположением html-элемента main в центре страницы.

Для margin предусмотрено такое значение как auto . Оно используется для горизонтального центрирования элемента внутри родительского контейнера, то есть работает только совместно для левой и правой стороны (для верха-низа не работает, с его помощью нельзя выравнивать по вертикали). Auto – значит, что браузер сам будет высчитывать размер полей. Элемент располагается по центру, занимает установленную для него ширину, а оставшееся пространство вычисляется и делится поровну между левым и правым полями.

Таким образом, с целью горизонтального центрирования в правило для нашего main в зависимости от того, какого размера мы хотим поля сверху и снизу, можно было бы добавить одно из следующих объявлений:

  • margin: 0 auto; – сверху и снизу полей нет;
  • margin: 30px auto; – сверху и снизу одинаковые поля;
  • margin: 30px auto 60px; – сверху и внизу поля разной высоты.

На практике можно встретить такой вариант: margin: auto; . Это значит, что значение auto указывается для всех четырех сторон. Но поскольку оно не работает для верха-низа, то поля с этих сторон просто обнуляются.

X Скрыть Наверх

Введение в веб-разработку и создание сайтов

Синтаксис

Основная задача Каскадных Стилей — это рассказать движку браузера, как отрисовать элементы страницы — каким цветом, как позиционировать их на странице, как украшать, и так далее. Синтаксис CSS построен следуя этой идее, и состоит из следующих основных блоков:

  • Свойство (property) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
  • Значение (value) — описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.

Объявления CSS

Задание CSS-свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется объявлением. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, ‘ : ‘ ( U+003A COLON ), а пробелы до, между и после свойства или значения игнорируются.

css syntax - declaration.png

В CSS существует более ста различных свойств, и бесконечное число допустимых значений. Не все пары свойств и значений допускаются, и каждое свойство определяет, каковы допустимые значения. Когда значение не подходит для данного свойства, объявление считается недействительной и целиком игнорируются CSS-движком.

Блоки объявлений CSS

Объявления группируются в блоки, структура которых состоит из открывающейся , ‘ < ' ( U+007B LEFT CURLY BRACKET ), и закрывающейся, ' >‘ ( U+007D RIGHT CURLY BRACKET ) фигурных скобок.

Такие блоки называются блоками объявлений, и объявления в них разделяются точкой с запятой, ‘ ; ‘ ( U+003B SEMICOLON ). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

Примечание: Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.

CSS rulesets

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.

As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

Примечание: It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn’t apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole selector is invalid and therefor the entire rule is ignored (as invalid too).

CSS statements

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A statement is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another <>, () or [] pair).

There are different kinds of statements:

  • Rulesets (or rules) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
  • At-rules that start with an at sign, ‘ @ ‘ ( U+0040 COMMERCIAL AT ), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like @charset (en-US) or @import (en-US)), conditional information (like @media or @document ), or descriptive information (like @font-face ).

Any statement which isn’t a rule or an at-rule is invalid and ignored.

There is another group of statements, the nested statements, these are statements that can be used in a specific subset of at-rules, the conditional group rules. These statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which runs the browser matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only rulesets could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in CSS Conditionals Level 3. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

See also

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *