CSS ( «каскадные таблицы стилей») — формальный язык декодирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.
Обзор
Использование CSS CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля.
Способы подключения CSS к документу Правила CSS могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и во внешних ах, имеющих расширение .css. Формат CSS — это текстовый файл, в котором содержится перечень правил CSS и комментариев к ним.Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами: когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента , включённого в элемент : <!DOCTYPE html> <html> <head> ..... <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> ..... </body> </html> когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе: <!DOCTYPE html> <html> <head> ..... <style media="all"> @import url(style.css); </style> </head> </html> когда стили описаны внутри документа, они могут быть включены в элемент , который, включается в элемент : <!DOCTYPE html> <html> <head> ..... <style> body { color: red;
</style> </head> <body> ..... </body> </html> когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента <!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"?>
Правила построения CSS В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила до знака «{», определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них. селектор, селектор { свойство: значение; свойство: значение; свойство: значение; } В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень объявлений («свойство CSS : значение»), разделённых знаком «;».
Виды селекторов
Универсальный селектор
margin: 1; padding: 1; }
Селектор тегов 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: blue; }
.card { width: 420px; /* можно изменить под размер картинки */ margin: 0 auto; /* центр по странице */ text-align: center; /* подпись по центру под картинкой */ font-family: 'Comic Neue', cursive; /* или 'Luckiest Guy', cursive */ background: linear-gradient(180deg, #f9e4e4 0%, #ffe6e6 100%); padding: 14px; border-radius: 14px; box-shadow: 0 6px 18px rgba(10, 25, 47, 0.08); }
.card img { width: 100%; border-radius: 12px; display: block; }
.caption { margin-top: 12px; font-weight: bold; font-size: 22px; /* размер шрифта для подписи */ color: #e84a26; /* теплый оттенок */ letter-spacing: 0.2px; }
.elo { font-family: ui-monospace, 'Courier New', monospace; /* моноширинный шрифт для ELO */ }
Селектор элементов одного уровня 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: red;
div#first { background-color: silver;
</style> </head> <body> <div id="first"> <!-- Это div c серым фоном, стилизованный по id --> </div> <p class="big"> <!-- Это текст красного цвета --> </p> </body> </html>Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.
Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.
Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.
Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.
В CSS, помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых псевдоклассов, описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых псевдоэлемента: первая буква, первая строка, применение специальных стилей до и после элемента.
Наследование. Каскадирование. Приоритеты стилей CSS. Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, почти всегда наследуются элементами-потомками.
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета. Наиболее низким приоритетом обладает стиль браузера; Следующим по значимости является стиль, заданный пользователем браузера в его настройках; И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом: Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков; Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу; Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел "виды селекторов"), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. Расчёт специфичности будет описан ниже. Специфичность селекторов делится на 4 группы — a, b, c, d: если стиль встроенный (определён как style="...", то а=1, иначе a=0) ; значение b равно количеству идентификаторов (иначе — id=" ", они начинаются с #) в селекторе; значение c равно количеству классов (class=" ", они начинаются с .), псевдоклассов (они начинаются с :, например a:hover) и селекторов атрибутов (input[type="text"); значение d равно количеству селекторов типов элементов (h1 { color: blue; }) и псевдокод-элементов (p::first-line { color: blue; }). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом. Таблица расчёта специфичности:
Селекторa, b, c, dЧислоspan0, 0, 0, 11div .class0, 0, 1, 111#id .class0, 1, 1, 0110div span0, 0, 0, 22.class0, 0, 1, 010#id span0, 1, 0, 1101
Но, самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного правила!important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным автором или пользователем, а для остальных свойств, которые будут являться задаваемыми автором страницы, потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих специфичностей.
Пример таблицы стилей Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами и размещена в «шапке» той самой веб-страницы, на которую она действует): p { font-family: arial, helvetica, sans-serif; } h2 { font-size: 20pt; color: red; background: white; } .note { color: red; background-color: yellow; font-weight: bold; } p#paragraph1 { padding-left: 10px; } a:hover { text-decoration: none; } #news p { color: blue; } [type="button"] { background-color: green; } Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].
Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства. Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером. Третье правило будет применено к любому элементу, атрибут class которого равен «note». Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. </p> Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).