2020-05-11
496
Раздел 3. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ
1. Принцип разделения контента и оформления web-документа
Как было показано в предыдущем разделе, можно довольно успешно реализовать web-страницы и web-сайты в целом, используя только возможности HTML. Однако, чем больше становится сайт, тем больше требуется времени и других сетевых ресурсов для загрузки страниц. Разработчикам стоит подумать о том, чтобы не загружать информацию об оформлении и компоновке страниц в каждом файле HTML. Вместо этого можно (и нужно) создавать простые файлы HTML, которые включают только содержимое страниц, а информацию об оформлении и компоновке размещать один раз в отдельный файл, содержащий только наборы стилей. При этом ссылки на файл, в котором хранятся стили, помещать в каждый HTML-документ. Это обеспечит также легкость поддержки сайта: если информация об оформлении и компоновке определяется только в одном месте, то, если потребуется изменить внешний вид сайта, обновления нужно сделать тоже только в одном месте,
|
|
|
Такой подход упрощает и совместимость с различными устройствами: Если страница не содержит информации о стилях оформления, ее можно переформатировать для разных устройств с совершенно разными атрибутами (например, размер экрана), применяя просто альтернативную таблицу стилей. Разделение контента и оформления также позволяет определить разные стили для разных методов представления (например, просмотра на экране, печати, просмотра на мобильном устройстве).
Разграничение содержимого и оформления web-страницы улучшает также продвижение сайта в поисковых системах, которые используют специальные "программы-роботы", считывающие содержимое страниц на сайтах и индексирующие их. Если эта программа не сможет прочитать содержимое страницы, перегруженной стилевой информацией, или неправильно интерпретирует важные вещи, то вероятность того, что в результатах поиска страница окажется на верхних позициях, существенно уменьшится.
Основы CSS
Каскадные таблицы стилей (Cascading Style Sheets CSS) - этоформальный язык описания внешнего вида документа, написанного с использованием языка разметки HTML.
CSS используются для web-разработчиками для определения цвета, шрифта, обрамления, размера, расположения отдельных блоков HTML-документа. Основной целью разработки CSS являлось отделение описания логической структуры веб-страницы (которое производится с помощью HTML) от описания внешнего вида этой веб-страницы (которое теперь рекомендуется производится с помощью CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
|
|
|
Мы уже встречались с описанием стилей отдельных тегов или блоков в предыдущем разделе, и при этом речь шла о встроенных CSS, если они указаны прямо как атрибуты тегов, или о внедренных, если стили собраны внутри блока <style>…</style> в области заголовка HTML-документа.
Для подключения внешней (связанной) таблицы стилей к документу в области заголовка страницы используется тег:
<!DOCTYPE HTML>
<head>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<p >в этом абзаце текст должен быть зеленым, окруженным красной рамкой</p>
</body>
</html>
Как вы уже знаете, следующая таблица стилей CSS (хранящаяся, например, в файле "mystyle.css") устанавливает цвет текста всех абзацев зеленым и окружит его сплошной красной рамкой:
p {
color: green;
border: solid red;
}
Термин «каскадные» в данном контексте применяется для указания на то, что HTML документ может использовать несколько стилей, которые имеют разные уровни приоритета. Браузер, представляя документ пользователю, следует их порядку (как каскаду), последовательно интерпретируя информацию стилей, имеющих разные приоритеты.
Сначала будут проверены и применены стили внешнего CSS-файла, но если позже будут найдены соответствующие встроенные стили, то стиль соответствующих элементов будет переопределен, а, если, еще позже, найдется стиль прямо внедренный в тег, то в результате «сработает» именно он.
Итак, в CSS работают следующие правила приоритетов:
- самый низкий приоритет имеют стили браузера по умолчанию;
- затем те, что лежат во внешнем подключённом файле;
- затем те, что встроили внутрь HTML с помощью тега <style>;
- затем те, которые внутри тегов, как их атрибуты;
- самый высокий приоритет у правил с меткой «!important»;
- при равенстве приоритетов, те, которые объявлены последними.
Внутри одной таблицы CSS (внешней или встроенной) существует три основных способа использования CSS:
- переопределение тега,
- применение стиля к некоторому ID (идентификатору элемента);
- применение стиля к классу элемента.
Переопределение тега. Если требуется, чтобы все параграфы были записаны через две строки и зеленым цветом, в CSS можно добавить следующее объявление:
p {
line-height: 2em;
color: green;
}
Теперь, любой контент, заключенный в теги <p>, будет записываться через две строки зеленым цветом.
Переопределение ID. Для любого тега можно указать атрибут id. Каждый id может использоваться на странице только один раз, то есть он указывает на некоторый уникальный блок или тег, который должен иметь уникальный (отличный от всех других элементов на этой странице), стиль. В таблице стилей перед ID обязательно указывается знак #.
Например, если вы хотите, чтобы только один параграф текста выводился через два интервала и зеленым цветом, задайте для него ID:
<p id="id1">Контент абзаца </p>
И затем примените к нему правило CSS следующим образом:
#id1 {
line-height: 2em;
color: green;
}
Переопределение класса. Классы похожи на ID, за исключением того, что на каждой странице можно иметь несколько элементов одного класса. Перед именем класса в таблице стилей обязательно используется символ точка (.).
Продолжим с тем же примером с интервалом в две строки, если требуется использовать двойной интервал и выделение цветом для двух первых параграфов на странице, то можно будет добавить к ним классы следующим образом:
<p class="id1">Контент первого абзаца </p>
<p class="id1">Контент второго абзаца </p>
И затем применим к ним правило CSS следующим образом:
.id1 {
line-height: 2em;
color: green;
}
Описание класса имеет более высокий приоритет по сравнению с описанием идентификатора, который в свою очередь имеет более высокий приоритет по сравнению с описанием обычного тега. Здесь абзац появится на зеленом фоне.
|
|
|
<p id="food">...</p>
#food {
background: green;
}
p {
background: orange;
}
В Интернете существует множество источников с удобно структурированной информацией о CSS, которые позволят быстро получить сведения о том, как изменять оформление элементов документа. [https://www.w3.org/Style/CSS/, ]. Однако, на наш взгляд, стоит более подробно изложить материал о том, как с использованием CSS можно влиять на структуру страниц.
