Меню
Главная
Случайная статья
Настройки
|
CSS (/siss/ англ. Cascading Style Sheets — каскадные таблицы стилей; более корректный перевод — каскадные ведомости стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки, где под «каскадностью» понимается принцип роста приоритетности различных ведомостей стилей по мере «нисхождения» от дефолтных настроек стилей в браузере к авторским настройкам веб-дизайнера, от внешних способов их подключения — к внутренним, и т.п.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Содержание
Обзор
Цель создания CSS
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Способы подключения CSS к документу
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах (ведомостях) стилей, то есть таблицы (ведомости) стилей содержат в себе правила CSS. Эти таблицы (ведомости) стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS — это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним).
То есть, эти таблицы (ведомости) стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
- когда таблица (ведомость) стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы (ведомости) стилей). Все правила этой таблицы (ведомости) действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" href="style.css">
</head>
<body>
.....
</body>
</html>
- когда таблица (ведомость) стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы (ведомости) действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
- когда таблица (ведомость) стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
- когда таблица (ведомость) стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
</p>
</body>
</html>
В первых двух случаях говорят, что к документу применены внешние таблицы (ведомости) стилей, а во вторых двух случаях — внутренние таблицы (ведомости) стилей.
Для добавления CSS к XML-документу, последний должен содержать специальную ссылку на таблицу (ведомость) стилей. Например:
<?xml-stylesheet type="text/css" href="style.css"?>
Иерархия элементов внутри документа
Как известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими.
Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента.
Пускай, например, в документе присутствуют два абзаца p, включающие в себя шрифт с полужирным начертанием b. Тогда элементы b будут дочерними элементами своих родительских элементов p и потомками своих предков body.
В свою очередь, для элементов p элемент body будет являться только родителем. И кроме того, эти два элемента p будут являться сестринскими элементами, как имеющими одного и того же родителя — body.
В CSS могут задаваться при помощи селекторов не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов (см. подраздел «виды селекторов»).
Правила построения CSS
В первых трёх случаях подключения таблицы (ведомости) CSS к документу (см. выше) каждое правило CSS из таблицы (ведомости) стилей имеет две основные части — селектор и блок объявлений.
Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком ": ". Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
В четвёртом случае подключения таблицы (ведомости) CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».
* {
margin: 0;
padding: 0;
}
p {
font-family: arial, helvetica, sans-serif;
}
.note {
color: red;
background-color: yellow;
font-weight: bold;
}
#paragraph1 {
margin: 0;
}
a[href="http://www.somesite.com"] {
font-weight: bold;
}
div#paragraph1 p.note {
color: red;
}
p.note > b {
color: red;
}
h1 + p {
font-size: 24px;
}
a:active {
color: blue;
}
p::first-letter {
font-size: 32px;
}
Классы и идентификаторы элементов
Класс или идентификатор может быть присвоен какому-нибудь элементу (тегу) HTML посредством атрибутов class или id этого элемента (тега):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Селекторы классов и идентификаторов
</title>
<style>
p.Big {
font-family: arial, helvetica, sans-serif;
color: maroon;
}
div#First {
background-color: silver;
}
</style>
</head>
<body>
.....
<div id="First">
.....
</div>
<p class="Big">
.....
</p>
</body>
</html>
Основное отличие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.
Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.
Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.
Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.») или свойство идентификатора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.
В CSS помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.
Наследование. Каскадирование. Приоритеты стилей CSS.
Применение CSS к документам HTML основано на принципах наследования и каскадирования.
Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p. Так сделано в предположении, что обрамление всех-всех вложений в тег — менее тривиальная задача, чем задание одиночной рамки. А вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе, до тех пор, пока этому тегу не будет назначен свой цвет шрифта. Который, в свою очередь, будет теперь наследоваться всеми вложенными в него подэлементами, не распространяясь на элементы-соседи тега.
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
- Наиболее низким приоритетом обладает стиль браузера;
- Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
- И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
- Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
- Более высоким приоритетом обладают стили, заданные во внешних таблицах (ведомостях) стилей, подключённых к документу;
- Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:
- количество идентификаторов (
#id) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);
- количество классов (
.class), атрибутов ([attr], [attr="value"]) и псевдоклассов (:pseudo-class) в селекторе — ((0,1,0) за каждый объявленный класс, атрибут и псевдокласс в селекторе правила CSS);
- количество элементов (
h1, input) и псевдоэлементов (::pseudo-element) в селекторе — ((0,0,1) за каждый объявленный элемент и псевдоэлемент в селекторе правила CSS).
- Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — больший приоритет, чем даже (0,10,0), (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других
- Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;
- И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова
!important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.
Пример таблицы (ведомости) стилей
Пример таблицы (ведомости) стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами | |