Основы стилей для веб-сайта

Скотт Аллен (Scott Allen) | 20 ноября 2009 г.


Веб-разработчик должен понимать и использовать каскадные таблицы стилей (cascading style sheets, CSS). Эффективное использование CSS делает приложения более гибкими, доступными и последовательными. CSS позволяют удалить избыточность в коде и упростить поддержку приложения. Не важно, являетесь ли вы разработчиком веб-форм ASP.NET, разработчиком ASP.NET MVC, разработчиком PHP или дизайнером, не привязанным к технологии — сегодня нет причин не использовать CSS. Каждая крупица сведений о таблицах стилей в дальнейшем принесет свои дивиденды.

Эта статья — первая в серии, в которой я исследую каскадные таблицы стилей и углубляюсь в конкретные области, важные для веб-разработчика. В этой статье я покажу, как писать правила CSS и использовать селекторы CSS. Эти основные навыки являются ключевыми для управления представлением HTML- и XHTML-документов. В будущих статьях я расскажу о макете, размещении, «модели прямоугольников», оформлении и т. д.

Представление с помощью внутренних стилей

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

<ul>
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
</ul>

Контент содержит некоторую разметку и текст. Разметку можно считать инструкциями, сообщающими браузеру, что отображать. Но в разметке нет никаких указаний браузеру, как отображать контент. Например, нет никаких инструкций о том, какой шрифт будет использоваться веб-браузером при отображении текста «Домашняя страница», или о том, какой цвет должен использоваться для отображения текста. Отсутствуют и сведения о том, как выравнивать текст, или о том, насколько большим должен выглядеть текст относительного другого текста в контенте. Браузер будет отображать контент, используя значения по умолчанию для всех этих параметров, как можно видеть на рис. 1.

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

<ul style="font-size:larger; color:red">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
</ul>

Сведения о стиле содержат разделенный точками с запятой список имен свойств и соответствующих значений. Существует множество свойств, которые можно задать — практически все, от азимута до Z-индекса. Полный список стандартных свойств CSS доступен на веб-сайте W3C по адресу w3.org/TR/2009/CR-CSS2-20090423/propidx.html. Внутренний стиль, используемый здесь для тега ul, указывает браузеру отображать весь текст внутри тега ul, используя шрифт большего размера, чем шрифт по умолчанию. Результат показан на рис. 2.

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

Хотя эти внутренние стили, также известные как локальные стили, эффективны для управления представлением контента, у них есть ряд серьезных недостатков.

  • Локальный стиль может влиять только на один элемент (и его дочерние элементы). Если есть другой контент, для отображения которого нужно использовать красный цвет и шрифт большего размера, понадобится скопировать стиль во множестве мест.
  • Мы смешали то, что отображать, с тем, как это отображать. Для такого простого примера это может казаться несущественными, но по мере усложнения контента и правил представления результат становится ужасающей смесью стилей и контента. Если нужно изменить контент, то, чтобы найти изменяемый контент, понадобится игнорировать все правила представления. Если нужно изменить представление, нужно позаботиться о том, чтобы не изменить контент. Лучше решать эти проблемы порознь, чтобы можно было должным образом сфокусироваться на каждой из них в соответствующее время.

Локальные стили редко обеспечивают долговременные преимущества для веб-приложений. К счастью, есть лучшие альтернативы.

Встроенные стили

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

<head runat="server">
  <title>basic css</title>
  <style type="text/css">  
    
      .special 
      {
          font-size:larger;
          color:red;
      }
  </style>
</head>

Внутри тега стиля (style) находится правило CSS , содержащее селектор, за которым идет объявление, заключенное в фигурные скобки ({ и }). Объявление содержит те же имена и значения свойств, которые использовались ранее в примере для внутренних стилей. Браузер использует селектор для выбора элементов, использующих это правило стиля. В этом примере селектор указывает веб-браузеру применять это правило стиля к любому элементу страницы с классом «special». Именно точка (.) перед словом «special» сообщает браузеру, что это имя класса. Таким образом, действующее правило позволяет легко отображать красный текст увеличенного размера в любом месте страницы.

<p class="special">Welcome!</p>
   <!-- .. other stuff .. -->
<ul class="special">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
</ul>

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

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

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

Связанные стили

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

При использовании внешних CSS-файлов правила стилей выглядят точно так же, как для встроенных стилей, что можно видеть ниже:

.special 
{
    font-size:larger;
    color:red;
}

Если предыдущее правило находится в файле с именем StyleSheet.css, можно включить его в веб-страницу, используя тег <link> в области заголовка страницы:

<head runat="server">
    <title>basic css</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

На одной странице можно использовать столько таблиц стилей, сколько нужно, и при этом можно использовать на странице внутренние и встроенные стили, даже когда страница связана с таблицей стилей. Конечно, при этом возникает вопрос, как браузер поведет себя в случае конфликта правил из различных источников. Я отвечу на этот вопрос в данной статье чуть позже. А пока давайте поговорим об объявлениях правил.

Объявления и значения свойств

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

.special 
{
    font-size:larger; /* объявление 1 */
    color:red;        /* объявление 2 */
}

Обратите внимание, что таблицы стилей также могут содержать комментарии. Комментарии начинаются с /*, заканчиваются */ и могут состоять из нескольких строк.

Каждое отдельное объявление в предыдущем правиле состоит из имени свойства, на которое нужно повлиять, и значения, назначаемого свойству. Эти части правила разделяются двоеточием. Значения, которые можно задать для каждого свойства, меняются в широком диапазоне и могут оказаться одним из самых запутанных моментов использования CSS. Чтобы найти разрешенные значения каждого из свойств, нужно изучить спецификацию CSS или воспользоваться для редактирования CSS-файлов каким-нибудь средством, например Microsoft Visual Studio. Visual Studio может предоставить приглашения и IntelliSense, чтобы помочь разработчику выбрать допустимое значение свойства.

Например, разрешенными значениям свойства цвета могут быть как ключевые слова, так и числовые значения. Ключевыми словами являются названия распространенных цветов CSS, такие как red (красный), purple (фиолетовый), white (белый), black (черный), lime (цвет лайма), blue (синий) и — мой любимый — fuchsia (фуксия, розовый). Но можно выбрать любой цвет, используя числовое значение в шестнадцатеричной нотации. Шестнадцатеричные числа начинаются со знака #. Пример:

.special 
{
    font-size:larger; 
    color: #ff0000;
}

Значение #ff0000 определяет RGB-значение, в котором красная часть цвета включена полностью, а зеленая и синяя части цвета полностью отключены. Разрешенным диапазоном для каждого компонента цвета является интервал от 0 до 255 (где 255 соответствует шестнадцатеричному значению FF). Если шестнадцатеричная нотация не нравится, для задания цвета можно воспользоваться функциональной нотацией. В этой нотации, как показано в следующем примере, правила стилей выглядят так, как будто каждый компонент цвета передается функции rgb в качестве параметра.

.special 
{
    font-size:larger; 
    color: rgb(255,0,0);
}

Свойство размера шрифта (font-size) является еще более гибким. Во-первых, можно использовать ключевые слова larger (больше) и smaller (меньше), чтобы изменить размер шрифта элемента относительно размера шрифта родительского элемента. Но также можно задать и абсолютный размер, используя одно из следующих ключевых слов:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Кроме ключевых слов, для задания абсолютных и относительных размеров можно использовать числовые значения. Это справедливо и почти для любого свойства «size» (размер), определяемого в CSS. Неважно, является ли параметр size шириной границы, высотой для тега div или размером шрифта. Размер в любой момент можно задать в числовом виде, указав одну из следующих единиц измерения:

  • сантиметры (cm)
  • дюймы (in)
  • миллиметры (mm)
  • пика (pc)
  • пиксели (px)
  • пункты (pt)

Например, чтобы задать размер шрифта 15 миллиметров, можно использовать следующее правило:

.special 
{
    font-size:15mm; 
    color: red;
}

Размер элементов фиксированного размера, таких как элементы img, часто задается с помощью пикселей (px). Но для размера шрифта рекомендуется использовать только относительные единицы. Я очень скоро расскажу, почему. Для относительных единиц можно выбрать один из трех вариантов:

  • Em (em)
  • Ex (ex)
  • Процент (%)

Значение процента выглядит так, как от него и ожидается. Следующее объявление размера шрифта указывает браузеру использовать размер шрифта, на 200 процентов больше текущего размера шрифта:

.special 
{
    font-size:200%; 
    color: red;
}

Единица em — это типографская единица измерения, поэтому часто относительные размеры шрифтов задаются в em. Так же встречаются размеры заполнений и полей, заданные в em. Значение 1.0 — это размер шрифта элемента по умолчанию, поэтому значение 1.2 em отобразит шрифт на 20 процентов крупнее шрифта по умолчанию.

.special 
{
    font-size:1.2em; 
    color: red;
}

Как уже говорилось, для шрифтов лучше указывать относительные размеры. Основное преимущество заключается в том, что можно сфокусироваться на связях между различными элементами контента. Например, может понадобиться, чтобы для текста абзаца использовался шрифт 0.8em, а для заголовка первого уровня — шрифт 1.4em. Все эти размеры задаются относительно размера по умолчанию. Если нужно увеличить размер всего контента на странице, можно задать для тега body стиль с большим размера шрифта (например 1.2em). Так как все остальные размеры заданы с помощью относительных значений, их размеры также увеличиваются без необходимости возвращаться и задавать абсолютные значения.

Другим основным преимуществом использования относительных размеров является читаемость. Пользователь, которому трудно читать текст на экране компьютера, может увеличить размер по умолчанию для всего текста (например, используя Вид -> Размер шрифта в Internet Explorer). Задание абсолютного размера переопределяет предпочтения пользователя для размера текста и может сделать страницу недоступной.

Селекторы

Селектор — это первая часть каждого правила стиля. Он сообщает браузеру, где применять стиль. Самые простые селекторы — это селекторы, определяющие имя тега HTML для стиля. Следующее правило применяется ко всем тегам h1:

h1 
{
   background-color: green;    
}

Раньше уже показывалось, как можно поместить несколько объявлений в одно правило. Можно также задать несколько селекторов в одном правиле, разделяя их запятыми.

h1, h2, h3
{
   background-color: green;    
}

Можно также применить несколько правил к одному селектору. Для любого заданного элемента в браузере все применимые правила объединяются, чтобы задать свойства элемента (тема, которую я разверну в следующем разделе). Например, после того, как браузер применяет следующие правила, элемент h2 должен появляться как белый текст на зеленом фоне.

h1, h2, h3
{
   background-color: green;    
}
h1 { color: red; } 
h2 { color: white; }

Селектор потомка позволяет объединить теги в нужную иерархию для использования стилей. Например, если нужно работать с тегами <p>, но только с теми тегами <p>, которые находятся внутри тега <div>, можно использовать следующее правило:

div p 
{
    font-size: 0.8em;
}

Пробел между первым и вторым тегом означает, что второй тег может находиться в любом месте, являясь потомком первого тега (первого уровня, второго уровня и т. д.). Используйте знак «>», чтобы определить, что второй тег должен быть именно прямым потомком, или знак «+», чтобы указать, что второй тег должен быть одного уровня по отношению к первому. Следующее правило работает только с тегами em, являющимися непосредственными дочерними элементами тега p.

p > em
{
    font-size: 1.1em;
}

Можно продолжить объединять синтаксис селекторов, чтобы обрабатывать только те теги em, которые являются дочерними элементами тегов p, являющихся потомками тега div:

div p > em
{
    font-size: 1.6em;
}

Предыдущее правило применит стиль к тексту «Здравствуй» в следующей HTML-разметке, но не к словам «Мир» и «До свидания»:

<body>
    <div>
        <p>        
            <em>Hello</em>
            World!
        </p>
    </div>
    <p>
        <em>Goodbye</em>
    </p>
</body>

Теги, классы, идентификаторы

До сих пор показывалось использование селекторов с тегами и классами, как в следующем примере:

.special 
{
    font-size:1.2em; 
    color: red;
}
h1, h2, h3
{
   background-color: Green;    
}

Селекторы, основанные на тегах, прекрасно подходят для работы с контентом внутри заданной структуры документа, а классы позволяют свободно работать с конкретной частью контента независимо от того, где она появляется в документе. Можно объединить оба способа, если нужно написать правило стиля, ориентированное на конкретные теги с конкретными значениями классов. Следующее правило срабатывает только для контента <ul> с классом special.

ul.special 
{
    font-size:1.2em; 
    color: red;
}

Также распространено применение стилей к контенту на основе атрибута ID элемента. В то время, как селекторы классов используют знак «.» (точка), селекторы ID используют знак «#» (решетка).

#menu 
{
  text-align:center;   
}

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

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

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

div:first-child 
{
    text-align:center;
}

Предыдущее правило поместит в центр только текст «Здравствуй» в следующем контенте.

<div>
    <p>Hello</p>
    <p>World!</p>
</div>

Часто псевдоклассы link (ссылка), visited (посещенная), hover (наведенный курсор) и active (активный) используются для придания стилей гиперссылкам:

a:link { color:black; }
a:visited { color:gray; }
a:hover { text-decoration:none; }

Большинство браузеров уже отображают посещенную ссылку иначе, чем непосещенную, но для более тонкого управления можно использовать вышеперечисленные псевдоклассы. Другие популярные псевдоклассы, включая hover (пользовательский курсор над элементом), active (когда пользователь щелкает элемент) и focus (когда элемент находится в фокусе и готов принять ввод с клавиатуры).

Использование каскада и наследования

Выше я говорил о «настройках по умолчанию» браузера, таких как размер шрифта по умолчанию. Откуда появляются эти настройки по умолчанию? И что происходит при конфликте правил стилей? Ответы на эти вопросы являются самыми важными элементами концепции CSS.

Начнем с понятия наследования. Подобно тому, как дети могут наследовать деньги своих родителей, дочерние элементы могут наследовать значения по умолчанию для свойств от своих родительских элементов. Самым верхним родительским элементом в любом документе HTML является элемент body. Если правило стиля применено к элементу body, и никакие другие правила стилей не действуют, все потомки элемента body наследуют его значения свойств. В качестве примера рассмотрим следующее правило стиля:

body 
{
    font-size:1.0em;
    color:green;
}

Если не действует ни одно другое правило стиля, весь текст на странице с этим правилом отображается зеленым цветом — так как дочерние элементы элемента body наследуют значение зеленого цвета, как и их дочерние элементы, и дочерние элементы этих дочерних элементов и т. д. Но важно понимать, что наследуются не все значения свойств. Спецификация CSS, упомянутая мной выше, определяет, для каких свойств используется наследование. Наследование применяется для большинства атрибутов текста, таких как размер и цвет шрифта. Но для многих свойств позиционирования, таких как границы, поля и заполнение, наследование не используется. Я расскажу об этих свойствах в одной из будущих статей, посвященной позиционированию в CSS.

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

Во-первых, в каждом браузере есть таблица стилей «по умолчанию». В некоторых браузерах эта таблица стилей по умолчанию существует в файловой системе, но во многих браузерах доступ к настройкам по умолчанию затруднен. (Internet Explorer хранит некоторые настройки по умолчанию в реестре Windows.) Эти настройки по умолчанию определяют значения свойств для элементов HTML, если не действуют никакие другие правила стилей. Большинство браузеров также позволяют использовать пользовательскую таблицу стилей. Это таблица стилей, создаваемая пользователем и регистрируемая в браузере для применения собственных правил стилей пользователя ко всем веб-сайтам, посещаемым пользователем. Многие пользователи используют этот прием для повышения читаемости — например, чтобы увеличить текст на каждом посещаемом веб-сайте.

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

  1. таблица стилей по умолчанию браузера;
  2. пользовательская таблица стилей;
  3. связанные таблицы стилей;
  4. встроенные стили;
  5. внутренние стили.

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

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

p
{
    color: red;
}
body 
{
    font-size:1.0em;
    color:green;
}

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

<body>      
    <h1>Welcome!</h1>
    <p>Hello !</p>       
</body>

В этом сценарии текст «Добро пожаловать!» отображается зеленым цветом, так как он наследует значение цвета от своего родительского элемента body. Но для текста «Здравствуй!» применяется правило красного цвета, и он отображается красным.

Теперь представим, что используется следующее встроенное правило стиля.

<style>
    p 
    {
        color: black;
    }
</style>

Теперь текст «Здравствуй!» отображается черным цветом, так как встроенное правило стиля переопределяет правило стиля для элементов p, определенное во внешней таблице стилей. Хотя каскадное поведение правил стилей немного сложнее, чем я здесь описываю, такого понимания должно хватить для начала, и я надеюсь, что вы сможете понять, насколько мощной является эта возможность.

Заключение

Эта статья должна дать основы, необходимые для начала использования CSS. Теперь вы знаете, как использовать селекторы и объявления, и обладаете базовым пониманием наследования и каскадов. Дальнейшие шаги — увидеть, как CSS может помочь повысить возможность обслуживания приложений, отделяя контент от правил представления. Размещение правил во внешнем CSS-файле позволяет легко изменить внешний вид и представление приложения, изменяя лишь несколько правил стилей вместо того, чтобы ползать по страницам и контенту для внесения изменений. В итоге клиенты и пользователи смогут воспользоваться преимуществами повышенной производительности разработчика благодаря знанию им CSS.