Что такое CSS? Общее знакомство с таблицами стилей

CSS - это аббревиатура от Cascading Style Sheets (Каскадные Таблицы Стилей). По сути, это синтаксическая структура, позволяющая получить всесторонний контроль над визуальным представлением web-страницы.

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

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

Давайте рассмотрим простой пример.

При отсутствии CSS мы вынуждены писать в HTML-коде вещи наподобие:

<p><font size="2" color="black" face="Arial">Какой-то текст.</font></p>

То есть мы открываем обычный параграф, затем открываем тэг font, предназначенный в HTML для задания параметров шрифта и прописываем сам шрифт, его размер и цвет.

Проблема в том, что если у нас много параграфов, то нам нужно для каждого из них задавать параметры отображения подобным способом, либо обрамлять большой объем текста в тэги font - но в этом случае нам придется переопределять оформление отдельно для каждого элемента, (например, того же параграфа) которому мы захотим задать какие-то иные параметры оформления, отличные от основного объема текста.

А если у нас много страниц - несколько десятков, сотен, или тысяч? Править все это таким способом крайне неудобно.

Кроме того, идет "замусоривание" кода повторяющимися конструкциями, что само по себе непрофессионально.

Что мы можем сделать в случае использования CSS?

Мы можем создать так называемый класс (точнее, селектор класса):

.par{
    font-size: 12px;
    color: #000000;
    font-family: Arial;
}

В данном классе с названием "par" мы пишем, что должен использоваться шрифт Arial черного цвета размером в 12 пикселей.

После этого мы должны указать, к какому элементу мы хотим применить данный способ оформления:

<p class = "par">Какой-то текст.</p>

Теперь то, что содержится между тэгами параграфа не нуждается в тэге font для задания внешнего вида - мы его задаем с помощью каскадной таблицы стилей. Согласитесь - это гораздо лучше чем то, что было, но все же не так удобно, как могло бы быть, ведь все равно нужно проставлять данный класс для каждого параграфа, что не очень удобно.

Для этого существует другой способ. Мы воспользуемся здесь так называемым селектором типа:

p {
   font-size: 12px;
   color: #000000;
   font-family: Arial;
}

Что означает данная запись? Она означает, что ко всем элементам p - то есть ко всем параграфам на странице сразу будет применено то оформление, которое мы указали. Заметьте, что в данном случае от нас уже не требуется выполнять каких-то дополнительных указаний. Мы просто пишем:

<p>Какой-то текст.</p>
<p>Другой текст.</p>

И так далее. Ко всем параграфам в данном случае будут применены указанные нами параметры оформления.

Такой подход позволяет практически полностью избежать нудного дублирования кода и очень удобен в использовании.

В данном случае, если мы хотим изменить отображение какого-то одного или нескольких параграфов из текста, мы можем создать новый класс (селектор класса):

.attention{
    font-size: 12px;
    font-weight: bold;
    color: #CC0000;
    font-family: Arial;
}

В нем мы изменили цвет шрифта на красный и придали шрифту жирность с помощью свойства font-weight. Теперь мы можем придать отдельным элементам (в нашем случае - параграфам) новое оформление. При этом оформление остальных параграфов останется без изменений

<p class = "attention">Какой-то текст.</p>
<p>Другой текст.</p>
<p class = "attention">Еще текст</p>

Мы уже с вами упомянули про селекторы класса и селекторы типа, но я не рассказал, что это такое более подробно.

Для начала рассмотрим общую структуру любого правила CSS:

селектор {
    свойство: значение;
    свойство: значение, значение, значение
}

Селекторами в нашем случае были ".par", "p" и ".attention".

Свойствами в нашем примере являются, например "font-size", "color" и др.

Значения же - это, например, "12px", "#CC0000" и др.

Как вы могли обратить внимание, свойства могут иметь больше одного значения. В этом случае они пишутся через запятую, например:

font-family: Verdana, Arial, Helvetica

Также обратите внимание на то, что возможно задать правила для нескольких селекторов за раз:

селектор1, селектор2, селектор3 {
    свойство: значение;
    свойство: значение, значение, значение
}

В качестве иллюстрации можно привести такой пример:

p,h3,h4 {
    font-size: 12px;
    color: #000000;
    font-family: Arial;
}

Как вы уже поняли, данное правило задает одинаковое оформление для всех элементов p и заголовков h3 и h4.

Рассмотрев вкратце общую структуру любого правила, давайте вернемся к вопросу селекторов и рассмотрим их более подробно.

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

Селекторы класса - вид селекторов, позволяющих применять одно и то же правило к различным элементам на странице. Рассмотрим пример. Возьмем уже знакомый нам селектор класса:

.par{
    font-size: 12px;
    color: #000000;
    font-family: Arial;
}

Мы можем его применить как к параграфу, (что мы уже проделывали) так и к любому другому подходящему элементу на странице:

<p class = "par">Текст параграфа</p>

<h2 class = "par">Текст заголовка</h2>

<ul class = "par">
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ul>

То есть основной смысл данного вида селекторов - возможность написания достаточно универсального правила с целью применения его к различным элементам на странице.

Рассмотрим еще два наиболее важных и часто используемых типа селекторов.

Селекторы ID (Селекторы идентификатора) - похожи на селекторы класса с тем отличием, что они могут использоваться в документе только один раз. Такие селекторы обычно используют для задания параметров каких-то уникальных объектов или элементов на web-странице, которые точно не будут повторяться.

В качестве наиболее распространенного способа их использования можно привести в пример деление страницы на логические блоки наподобие: header, top_navigation, content, footer и т.п. Обычно на странице только один хэдер, один футер, одна область контента и т.д.

Поэтому страницу часто разбивают с помощью тэга div на логические блоки, каждому из которых задают свои параметры отображения и оформления.

Для создания селектора ID используется знак решетки:

div#content{
    line-height: 1.3;
    margin: 0px 170px;
    background: #ffffff;
}

Данный код устанавливает межстрочный интервал в значение 1.3, отступы сверху и снизу в 0 пикселей, слева и справа - в 170 пикселей, и белый цвет фона.

Для применения данного стиля пишем следующее:

<div id = "content">
Основной контент страницы
</div>

Селекторы потомка - селекторы, идущие следом за селекторами типа и класса и переопределяющие назначенные ими стили.

Как это применить на практике? Предположим, что в блоке content внутри параграфа нам нужен шрифт Verdana с размером 12 пикселей. При этом в блоке footer внутри параграфа мы хотим использовать чуть более мелкий - размером в 11 пикселей шрифт Arial.

div#content p{
    font-size: 12px;
    font-family: Verdana;
}
div#footer p{
    font-size: 11px;
    font-family: Arial;
}

Это был пример с использованием селектора потомка за селектором типа.

Можно использовать селекторы потомка и следом за селектором класса:

div#content div.grey_line{
    width:623px;
    border-top: 1px solid #D8D8D8;
    margin: 10px;
}

Данным правилом мы указываем, какие правила применять к элементу div имеющему класс "grey_line" и находящемуся внутри другого элемента div с ID равным "content". В нашем случае это будет простая сплошная светло-серая линия шириной 623 пикселя, толщиной в 1 пиксел и отступом от других элементов в 10 пикселей.

Можно применять и комбинированные варианты, вроде:

div#content div.center p{
    text-align: center;
}

В данном примере еще более глубокая "вложенность": Если в контейнере div с ID равным "content" есть контейнер div с классом "center", и внутри этого контейнера есть параграф, то текст в параграфе будет выровнен по центру содержащего элемента (то есть контейнера div с классом "center").

Еще один пример:

div#footer table{
    text-align: center;
    width: 984px;
    height: 50px;
}

Здесь мы указали, что если в контейнере div с ID "footer" встретится тэг table, то ширина этой таблицы должна быть 984 пикселя, высота - 50 пикселей, а весь текст внутри таблицы будет выровнен по центру.

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

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

Мы указываем это:

body{
    font-family: Arial;
}

Далее, у нас есть блок div с ID "content", где мы хотим использовать шрифт размером в 12 пикселей в параграфах, и 11 пикселей в параграфах внутри таблицы:

#content p{
    font-size:12px;
}
#content table p{
    font-size:11px;
}

Внутри обычных параграфов вне таблицы и внутри параграфов в таблице мы не хотим использовать подчеркивания для ссылок если они там встречаются:

#content p a{
    text-decoration:none;
}

#content table p a{
    text-decoration:none;
}

Предположим также, что у нас в блоке div "content" может встречаться блок div с классом "extra" - и для параграфов внутри такого блока мы хотим добавить жирное начертание и размер шрифта в 13 пикселей, при этом ссылки внутри параграфа в блоке "extra" должны еще подчеркиваться снизу чертой:

#content div.extra p{
    font-size:13px;
    font-weight:bold;
}

#content div.extra p a{
    text-decoration:underline;
}

Если вы присмотритесь к приведенным выше примерам, то заметите эту своеобразную "каскадность": самое общее правило мы задаем для тэга body - шрифт. Затем для различных случаев внутри блока div "content" мы указываем различный размер шрифта. Затем для ссылок внутри параграфа и внутри параграфа в таблицах мы указываем отсутствие подчеркивания. Также прописываем дополнительные правила для блока div с классом "extra" внутри блока div с ID "content", включая отображение шрифта и подчеркивание ссылок.

Очень важно здесь то, что мы не повторяем одни и те же правила, так как происходит наследование свойств от вышележащих элементов к элементам, заключенным в них. То есть нам нет необходимости писать для каждого правила заново, какой шрифт использовать, так как мы указали его для элемента body, который включает в себя все остальные.

Нам нет необходимости писать для "#content div.extra p a" свойство "font-weight", так как оно было указано для "#content div.extra p". Таким образом уменьшается общий размер CSS-файла, так как не нужно дублировать одни и те же строки.

Возьмем последний пример и немного его переделаем:

#content div.extra p{
    font-size:13px;
    font-weight:bold;
}

#content div.extra p a{
    font-size:14px;
    text-decoration:underline;
    color: red;
}

Что мы сделали? Первая часть осталась без изменений. Вторую мы изменили так, что теперь у нас текст ссылки будет размером в 14 пикселей (мы переопределили предыдущее значение в 13 пикселей), подчеркивание остается, как и было, и цвет текста ссылки будет красным (новое правило, которое не было задано ранее).

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

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

Рассмотрим еще два достаточно важных момента при использовании таблиц стилей.

Псевдоклассы

Псевдоклассы используются, когда необходимо применить стили к компонентам, которые базируются не на имени элемента, атрибутах или контенте. Рассмотрим пример, в котором использование псевдоклассов создает сменяющие друг друга эффекты.

a:link{
    color:blue;
}
a:visited{
    color:purple;
}
a:hover{
    color:red;
}
a:active{
    color:gray;
}

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

Псевдоэлементы

С помощью псевдоэлементов возможно применить стиль к какой-то части web-страницы, которая не является элементом.

Рассмотрим два примера:

p:first-letter{
    font-size: 180%;
    font-weight:bold;
}

p:first-line{
    font-size: 150%;
    color:blue;
}

В первом примере мы придаем первой букве абзаца размер в 180% от заданного для абзаца, и жирное начертание. Во втором - задаем для первой строки параграфа размер шрифта в 150% и синий цвет текста.

Как связать стили c web-страницей?

Существует три способа для применения CSS к документам.

1. Встроенный

В этом случае для элемента, которому мы хотим придать стиль, мы пишем непосредственно в HTML-коде конструкцию вида:

<p style = "font-family: Verdana; font-size:12px; font-weight: bold;">
Здесь текст параграфа</p>

Такой способ практически ничем не отличается от стандартного способа оформления при помощи тэгов HTML и используется редко - как правило, в единичных случаях, так как он наименее удобен с точки зрения изменения и поддержки кода в будущем.

2. Внутренний

В этом случае в начале HTML-страницы, между открывающим и закрывающим тэгами head помещается конструкция вида:

<style>
<!--
#header{
    width:100%;
    height:100px;
}
.title{
    font-size:14px;
}
-->
</style>

Все правила заключены между тэгами style, а обычные HTML-комментарии (после открытия тэга и перед закрытием) используются для того, чтобы не возникло никаких накладок, и браузер ни при каких обстоятельствах не отобразил на экране код таблицы стилей.

Такой способ часто используется в процессе разработки страницы. Наконец, третий, последний способ используется чаще всего, так как он наиболее удобен.

3. Внешний

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

<head>
<link href="base_style.css" rel="stylesheet" type="text/css">
</head>

Обратите внимание, что при данном типе подключения не нужно использовать тэг style и комментарии HTML, то есть содержание файла base_style.css в нашем примере может быть таким:

#header{
    width:100%;
    height:100px;
}
.title{
    font-size:14px;
}

Резюмируем

Селекторы ID применяются к уникальным объектам на странице. Селекторы класса могут применяться на странице многократно, с различными элементами.

Для обозначения селекторов ID используется знак "#". Для селекторов класса используется "."

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

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

Внутреннее подключение целесообразно использовать на стадии разработки, а при запуске сайта обычно оставляют лишь CSS-файл (файлы) с внешним подключением.

Дмитрий Науменко