В то время как содержимое страницы и ее базовая компоновка определяются структурой «скелета страницы», то есть HTML-документа, внешний вид элементов страницы определяется правилами CSS. Сегодня мы рассмотрим, как создается правило CSS, из чего состоят объявления и как добавлять стили в HTML.
Что такое CSS?
Согласно консорциуму W3C, CSS — это язык, который используется для описания уровня представления (внешнего вида) веб-страниц, включая цвета, макет и шрифты. Он позволяет настроить презентацию для различных типов устройств и технологий, например, телефонов или распечаток. CSS не зависит от HTML, и его отделение от HTML упрощает поддержку сайтов, совместное использование таблиц стилей между страницами и адаптацию страниц к различным браузерам или средам.
В CSS, как и в случае с HTML, имя является аббревиатурой. Последующие буквы в имени означают:
- Cascading (Каскадирование). Каскадирование — это свойство CSS, которое используется для уточнения набора правил для определенного элемента. На практике все обстоит так, что стили для этого элемента могут быть указаны во многих местах и могут довольно сложным образом влиять друг на друга. На мой взгляд, тема настолько важная, что я посвящу ей весь следующий пост,
- StyleSheet (Таблица стилей). В отличие от HTML, CSS является не языком разметки, а языком таблиц стилей. Согласно Википедии, он используется для описания формы представления документа с упорядоченной структурой.
Такой документ имеет четко определенные и разграниченные разделы. Программа, отвечающая за представление документа, может представлять его различными способами, в зависимости от используемой таблицы стилей.
Является ли CSS языком программирования?
Здесь ситуация аналогична HTML: языки, которые нельзя вычислить, не считаются языками программирования. Однако дискуссии по этому вопросу ведутся постоянно, хотя и носят скорее академический характер. Одним из аргументов является то, что HTML и CSS соответствуют принципу полноты Тьюринга (они могут описать любой алгоритм, описанный как завершенный), но это случайное свойство, и назначение этих языков также не совпадает с буквально «программированием чего бы то ни было».
Правила CSS
Код CSS состоит из списка директив, также известных как правила. Анатомия правил выглядит следующим образом:
p {
color: blue;
}HTML-элемент, к которому применяется правило, в приведенном выше примере <p>, то есть все абзацы на странице.
Объявление (задание, пара свойство-значение)
Это единственное правило, в нашем примере это color: blue. Указывает, какие свойства будут оформлены и каково будет их значение.
property
Свойство данного объявления, которому должно быть присвоено значение. В этом случае объявление указывает свойство элемента <p> как оно есть color.
value
Значение, которое будет присвоено указанному свойству (перед двоеточием).
Фигурные скобки
Набор объявлений, касающихся данного элемента в правиле, должен быть заключен в фигурные скобки ({}).
Точка с запятой
Каждое последующее объявление должно заканчиваться точкой с запятой (;).
Двоеточие
Двоеточие в объявлении отделяет свойство от значения (:). Свойство находится слева от двоеточия, а значение — справа.
Ничто не мешает вам выбрать несколько HTML-элементов для стилизации одновременно:
p, h1, li {
color: blue;
}и на практике правила чаще всего состоят из более чем одного объявления:
p {
color: yellow;
margin-bottom: 5px;
width: 50px;
}Селекторы
Как уже объяснялось, селектор указывает на элемент или группу элементов, к которым применяется правило. В приведенных выше примерах использовались селекторы HTML-элементов, но это не единственный способ выбора желаемых целей. Ниже приведен список наиболее распространенных селекторов.
Селектор элементов
Указывает на определенный элемент HTML, например, селектор h2 выбирает все элементы, заключенные в теги <h2>…</h2>.
Селектор атрибутов
Выбирает элемент, содержащий указанный атрибут.
img[src] {} // применится к <img src="">, но не к <img>Селектор идентификатора
Выбирает элемент с заданным идентификатором, т. е. селектор указывает на элемент.
#navbar{} // указывает на <nav id="navbar">...</nav>Выбор селектора идентификатора может показаться удобным решением в некоторых ситуациях, так как идентификатор должен быть уникальным в пределах веб-сайта, но желательно, чтобы стиль после идентификатора не считался хорошей практикой.
Селектор класса
Указывает на элементы, которые содержат данный класс, например, .my-class соответствует элементам
<div class="my-class">...</div>и
<ul class="my-class">...</div>Элементы внутри элемента
Селектор tag указывает на все элементы внутри тега, например, div указывает на все элементы внутри всех элементов div на странице.
Все элементы
Селектор указывает на все элементы на странице.
Вложенные элементы
Используя оператор >, можно указать на дочерние элементы выбранных элементов, например, div > ul указывает на все элементы ul, вложенные в элементы div.
Вышеприведенный список не исчерпывает тему селекторов, но этой теме будет посвящена отдельная запись.
Свойства CSS
Список свойств CSS очень и очень длинный, поэтому я не вижу смысла приводить его здесь. Список всех свойств можно найти на сайте W3C, но гораздо удобнее пользоваться выделенной так называемой «шпаргалкой».
Однако внутри свойств можно выделить некоторые области, в которых доступны определенные типы свойств. Ниже приведен список наиболее важных, на мой взгляд, областей со ссылками на список свойств.
- текст,
- фон,
- список,
- расположение элементов,
- ширина и высота,
- коробочная модель.
Добавление стилей в HTML-документ
Есть несколько способов добавить правила CSS в HTML. Наиболее важные из них перечислены ниже. Выбор метода добавления стилей в HTML имеет некоторые последствия для приоритизации каскадирования, но эта тема будет подробно рассмотрена в следующем посте.
Локальный встроенный стиль
Чтобы использовать объявление непосредственно в элементе HTML, используйте для этой цели атрибут стиля. Таким образом можно определить значение более чем одного свойства, но вы должны разделять объявления точкой с запятой.
<p style="color: red; font-weight: bold;">Содержание абзаца</p>Внутренняя таблица стилей
Специальный тег можно использовать для прикрепления таблицы стилей к HTML-документу <style>. Внутри этого тега вы должны поместить правила CSS в стандартной конфигурации, то есть селектор и объявления, заключенные в фигурные скобки. Тег <style> можно разместить только в разделе <head> HTML-документа.
<head>
<style>
.my-paragraph{
color: red;
font-weight: bold;
}
</style>
</head>Внешняя таблица стилей
Также в разделе <head> HTML-документа вы можете сделать ссылку на внешний файл CSS. Это удобное решение, потому что одни и те же правила можно легко использовать на многих страницах без необходимости копировать код.
<head>
...
<link rel="stylesheet" href="style/style.css" />
</head>В приведенном выше примере таблица стилей была добавлена в HTML-документ из файла style.css в папке стилей style. Папка должна находиться в той же папке, что и HTML-файл, к которому она относится.
Импорт таблицы стилей
Вы можете импортировать другие внешние таблицы стилей во внутренние и внешние таблицы стилей. Для этого есть правило @import. На практике использование импорта выглядит следующим образом:
<style>
@import "style/style.css"
</style>а также в самом файле css:
@import "..style/style.css"
.my-paragraph {
color: red;
}Принцип отделения контента от уровня представления
Веб-сайт можно условно разделить на три слоя:
- Слой содержимого.
- Уровень представления.
- Слой взаимодействия.
За каждый из этих слоев в максимально простой компоновке отвечают разные языки. Контент — это HTML, презентация — это CSS, а взаимодействие — это JavaScript. Конечно, все может усложниться, будь то использование кадрирования или простое смешивание порядков для письменных функций, но рекомендуется держать эти слои отдельно друг от друга.
Это важный вопрос, потому что элементы HTML имеют атрибут стиля, с помощью которого вы можете (как следует из названия) придать элементам нужные стили. Однако было бы лучше использовать атрибут класса и устанавливать стили для определенного класса. Этот подход приведен в качестве примера реализации принципа отделения уровня представления от уровня контента и способствует доступности веб-сайта или приложения.
Стили браузера по умолчанию
Если мы не добавим в документ собственные стили, браузеры все равно будут отображать их определенным образом. Ниже приведен скриншот из Chrome для кода:
<h1>Заголовок</h1>
<h2>Заголовок 2</h2>
<p>Текст абзаца</p>
<ul>
<li>Первый пункт маркированного списка</li>
<li>Первый пункт маркированного списка</li>
</ul>без всяких стилей.
Хотя никакие стили не добавлялись вручную, браузер добавил свои собственные правила стилей. Обычно эти внутренние стили браузера похожи друг на друга, но иногда отличаются. В таких ситуациях рекомендуется использовать сброс или нормализацию стилей. Короче говоря, сброс стилей — это просто «сброс» стилей браузера, а нормализация делает эти стили едиными.