1. Что такое стили

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

Наиболее часто для работы со стилями используют CSS (Cascading Style Sheets, каскадные таблицы стилей).

CSS - это простой язык дизайна, предназначенный для упрощения процесса презентации web-страниц.

CSS легко освоить и понять, но он обеспечивает мощный контроль над представлением HTML-документа. Чаще всего CSS комбинируется с языками разметки HTML или XHTML.

2. Наиболее существенные плюсы использования CSS

  • CSS экономит время
    Можно написать CSS один раз, а затем использовать одну и ту же таблицу на нескольких HTML-страницах. Можно определить стиль для каждого HTML-элемента и применить его ко многим web-страницам.

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

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

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

  • Совместимость нескольких устройств
    Таблицы стилей позволяют оптимизировать контент для более чем одного типа устройств. Используя один и тот же HTML-документ, можно представить различные версии web-сайта для карманных устройств, таких как PDA и сотовые телефоны, или для печати.

  • Глобальные web-стандарты
    Атрибуты HTML устарели, и рекомендуется использовать CSS.

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

  • Независимость от платформы
    Скрипт обеспечивает независимость от платформы и поддерживает новейшие браузеры.

3. Базовый синтаксис CSS

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

базовый синтаксис CSS

Вначале указывается имя селектора, например, div, это означает, что все стилевые параметры будут применяться ко всем элементам <div> в HTML-документе. Затем пишутся фигурные скобки, внутри которых идёт стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, например:

td {
    background: olive;
}

td {
    color: white;
}

td {
    border: 1px solid black;
}

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

4. Селекторы CSS

4.1. Стандартные селекторы

В роли стандартного селектора может выступать любой тег HTML-документа. Например:

Стандартные селекторы
h1 {
    color: #8B4513;
}

4.2. Универсальные селекторы

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

Универсальные селекторы
* {
    color: #808080;
}

4.3. Селекторы потомков или вложенные селекторы

Ели необходимо применить правило стиля к определенному элементу только тогда, когда он находится внутри другого определенного элемента, то в этом случае используются вложенные селекторы или селекторы потомков. В примере, правило стиля будет применяться к элементу <em> только тогда, когда оно находится внутри тега <ul>.

ul em {
    color: #CD5C5C;
}

4.4. Селекторы класса

Также можно задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с заданным правилом.

.blue {
    color: #0000FF;
}

К одному элементу можно применить несколько селекторов класса отделив их пробелом.

Несколько селекторов класса
<p class="blue bold">
    Этот абзац будет оформлен классами center и bold.
</p>

4.5. ID селекторы

Можно задать правила стиля для элементов на основе атрибута id. Элемент имеющий этот идентификатор, будет отформатированы в соответствии с заданным правилом.

#blue {
    color: #0000FF;
}

4.6. Дочерние селекторы

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

body > p {
    color: #0000FF;
}

Данный стиль будет отображать все элементы с тегом <p> в синем цвете, если они являются дочерними тегами тега <body>.

4.7. Соседние селекторы

HTML-элементы, идущие друг за другом, называются соседними.

Соседние селекторы
strong + em {
    color: #0000FF;
}

Этот стиль будет отображать содержимое тега <em> в синем цвете, если он идет после элемента <strong>.

4.8. Селекторы атрибутов

Также можно применять стили к HTML-элементам с определенными атрибутами.

[type = "text"] {
    color: #0000FF;
}

5. Способы описания/добавления стилей на Web-страницу.

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

5.1. Внешняя таблица стилей

В данном случае стили располагаются в отдельном файле с расширением .css, для связывания HTML-документа с CSS-файлом применяется элемент <link>. Он располагается внутри тега <head>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стили</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Заголовок</h1>
        <p>Текст</p>
    </body>
</html>

Значение атрибута rel у <link> всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Таким образом также можно подключать таблицу стилей, которая находится на другом сайте. Выше был подключен кириллический шрифт Lobster с сайта Google Fonts.

Содержимое файла style.css
h1 {
    font-family: 'Lobster', cursive;
    color: green;
}

Файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей — наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.

5.2. Внутренняя таблица стилей

Стили пишутся в самом HTML-документе внутри элемента <style>, который в свою очередь располагается внутри <head>. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной web-странице.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стили</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic">
        <style>
            h1 {
                font-family: 'Lobster', cursive;
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>Заголовок</h1>
        <p>Текст</p>
    </body>
</html>

В данном примере задан стиль элемента <h1>, который затем можно повсеместно использовать на данной web-странице. Можно спокойно комбинировать <link> со <style>.

5.3. Встроенный стиль

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стили</title>
    </head>
    <body>
        <p style="font-size: 1.2em; font-family: monospace; color: #cd66cc">Пример текста</p>
    </body>
</html>

В данном примере стиль элемента <p> меняется с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства.

5.4. Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с внешней или внутренней таблицей стилей, но никак не со встроенными стилями. Общий синтаксис следующий:

@import url("имя файла");
@import "имя файла";

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Импорт</title>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
            h1 {
                font-family: 'Lobster', cursive;
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>Заголовок 1</h1>
        <h2>Заголовок 2</h2>
    </body>
</html>

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент <link>.

@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
h1 {
    font-family: 'Lobster', cursive;
    color: green;
}

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

6. Группирование, наследование, каскадирование

6.1. Группирование

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

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

Селектор_1, Селектор_2, ... Селектор_N {
    Описание правил стиля
}

6.2. Наследование

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

Рассмотреть наследование можно на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <table> внутри которого добавляются теги <tr>, а затем идёт тег <td>. Если в стилях для селектора table задать цвет текста, то он автоматически устанавливается для содержимого ячеек.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Наследование</title>
        <style>
            table {
                color: red; /* Цвет текста */
                background: #333; /* Цвет фона таблицы */
                border: 2px solid red; /* Красная рамка вокруг таблицы */
            }
        </style>
    </head>
    <body>
        <table cellpadding="4" cellspacing="0">
            <tr>
                <td>Ячейка 1</td>
                <td>Ячейка 2</td>
            </tr>
            <tr>
                <td>Ячейка 3</td>
                <td>Ячейка 4</td>
            </tr>
        </table>
    </body>
</html>

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

6.3. Каскадирование

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

Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.

  • Стиль браузера.

  • Стиль автора.

  • Стиль пользователя.

  • Стиль автора с добавлением !important.

  • Стиль пользователя с добавлением !important.

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

6.3.1. !important

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

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

  • !important добавлен в авторский стиль — будет применяться стиль автора.

  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.

  • !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль пользователя.

  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Синтаксис !important
Свойство: значение !important

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

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

6.3.2. Специфичность

Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.

*              {} /* a=0 b=0 c=0 -> специфичность = 0   */
li             {} /* a=0 b=0 c=1 -> специфичность = 1   */
li:first-line  {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul li          {} /* a=0 b=0 c=2 -> специфичность = 2   */
ul ol+li       {} /* a=0 b=0 c=3 -> специфичность = 3   */
ul li.red      {} /* a=0 b=1 c=2 -> специфичность = 12  */
li.red.level   {} /* a=0 b=2 c=1 -> специфичность = 21  */
#t34           {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление !important перекрывает, в том числе, и встроенные стили.

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

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