Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Каскадные таблицы стилей CSS
Язык гипертекстовой разметки HTML используется, чтобы описать содержимое веб
страницы, а каскадные таблицы стилей (англ. Cascading Style Sheets - CSS) влияют
на то, как эти страницы будут выглядеть (цвета, шрифты, фоновые изображения,
интервалы между строками, отступы, границы, эффекты и даже анимация
элементов).
Вы можете удивиться, но каскадные таблицы стилей могут управлять
представлением документов не только в браузерах, но и в документах при выводе их
на печать, кроме того, позволяют менять представление документа в зависимости от
разрешения и типа используемого экрана, ориентации области просмотра экрана и
даже в зависимости от соотношения сторон экрана.
Благодаря CSS вы сможете производить изменения, относящиеся ко всем страницам
Вашего сайта, редактируя при этом лишь один единственный файл таблицы стилей.
Интересно? Тогда продолжаем.
Что такое стиль
Стиль в CSS устанавливает внешний вид какого-либо элемента или элементов
страницы. Другими словами это команда, которая сообщает браузеру как ему
необходимо отформатировать тот, или иной элемент и после этого вывести
результат изменения на страницу.
Определение стиля состоит из двух элементов:
1. Элемент веб страницы, который непосредственно подлежит форматированию
браузером называется селектор.
2. Форматирующие команды называются блоком объявлений (описаний).
Первые статьи этого учебника будут в основном посвящены селекторам, благодаря
которым вы научитесь выбирать различные элементы страницы, будь то заголовки,
абзацы, изображения и так далее. Блоки объявлений предоставляют нам
возможность создавать уникальные элементы на странице, стилизуя их по своему
усмотрению с использованием множества различных CSS свойств, которые мы
постараемся рассмотреть и изучить как можно больше.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Рис. 0 Пример блока описаний.
Давайте с вами разберем, что значит запись сделанная на изображении.
Селектор h1 сообщает браузеру, что все теги <h1> необходимо форматировать,
используя объявления (описания), указанные в последующем блоке объявлений
(описаний). Этот вид селекторов называется "селектор типа". Селекторы типа будут
подробно рассмотрены в статье с оригинальным названием "Селекторы. Часть 1".
Блок объявления стиля (описания) - это код, который располагается за
селектором и содержит форматирующие команды, применяемые к этому селектору.
Обратите внимание, что любой блок объявлений начинается с открывающей
фигурной скобки, а заканчивается закрывающей фигурной скобкой. Отсутствие
открывающейся или закрывающейся скобки приводит к ошибкам вследствие которых,
стили не будут применены к элементам, указанным в селекторе.
Объявление (описание) свойства - каждое объявление (описание) состоит из двух
частей — CSS свойства и значения для этого свойства. Вы можете провести
аналогию с атрибутами и их значениями в HTML. Обратите внимание, что
необходимо отделять двоеточием свойство от его значения. Каждое объявление
(описание) необходимо завершать точкой с запятой, даже в том случае если оно
одно, или является конечным в блоке объявлений. Большинство ошибок происходит
по той причине, что отсутствует точка с запятой, это приводит к тому, что это
описание (свойство с его значением) и последующие описания в блоке объявлений
не будут применены, по той причине, что браузер считает их для себя одним
описанием (командой), так как описание не было прекращено вовремя.
Свойство - свойство представляет собой слово или несколько слов написанных
через дефис. Большинство свойств имеют простые для понимания названия, такие
как color (цвет
текста), background-color (цвет
заднего
фона), textalign (горизонтальное выравнивание текста) и так далее. Мы уже сталкивались с
этими свойствами при изучении HTML 5.
Значение - в зависимости от используемого свойства, значения могут устанавливать
различные характеристики для элемента, будь то цвет, ширина, высота,
расположение и тому подобное.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
При изучении CSS для удобства, лучшего восприятия и понимания таблиц стилей,
мы будем разбивать объявления на строки (любой браузер к этому относится
лояльно, так как они игнорируют пробелы и переносы):
h1 { /* селектор (выбираем все элементы <h1>) */
color: red; /* для всех элементов <h1> устанавливаем цвет текста красный */
text-align: center; /* все элементы <h1> выравниваем горизонтально по центру */
}
вместо:
h1{color: red;text-align: center;}
Учтите, что если вы впоследствии будете использовать объемные файлы таблиц
стилей и захотите увеличить производительность сайта, то вам необходимо будет
подготовить эти файлы стилей определенным образом. Для этого необходимо убрать
всю лишнюю информацию: пробелы, переносы и комментарии из кода. Для этих
целей существуют различные оптимизаторы, которые минимизируют код. Только не
забывайте при этом оставлять для себя человеческий вариант.
Использование таблиц стилей.
Таблицы стилей бывают двух видов:
Внутренние (стилевая информация располагается внутри самой веб страницы).
Внешние (стилевая информация располагается в отдельном файле, который
связывается с веб страницей).
Внешние таблицы стилей являются лучшим способом создания дизайна, так как
они позволяют сосредотачивать всю информацию о стилях в одном файле, который
вы присоединяете к каждой странице сайта, создавая при этом единый дизайн. При
необходимости обновления внешнего вида всего сайта Вам достаточно будет
отредактировать только один файл css, а не каждую страницу по отдельности.
Кроме того, внешние таблицы стилей позволяют загружать веб страницы быстрее
благодаря тому, что браузеры кэшируют (сохраняют) используемую таблицу стилей
и при обращении к другой странице на одном сайте, используют ту же самую
внешнюю таблицу стилей, но уже сохраненную локально на компьютере
пользователя.
В практических заданиях вы самостоятельно попробуете добавить как внешние, так
и внутренние таблицы стилей.
Внутренняя таблица стилей в отличии от внешней размещается непосредственно
внутри веб страницы. Для этого необходимые стили мы помещаем внутри парного
тега <style>, который сообщает браузеру, что внутри него содержится код CSS.
Тег <style> в свою очередь должен находиться внутри тега <head>, как правило
тег <style> размещают перед закрывающим тегом </head>.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Давайте рассмотрим пример использования внутренней таблицы стилей:
<!DOCTYPE html>
<html>
<head>
<title>Знакомство с CSS</title>
<style>
h1 { /* выбираем все элементы <h1> */
color: blue; /* устанавливаем цвет текста */
}
p { /* выбираем все элементы <p> */
color: green; /* устанавливаем цвет текста */
}
</style>
</head>
<body>
<h1>Заголовок первого уровня.</h1> /* заголовок получит синий цвет */
<p>И один абзац для примера.</p> /* абзац получит зеленый цвет */
Какой-то текст после абзаца./* текст, для которого не установлены стили */
</body>
</html>
В этом примере мы использовали два селектора типа, которые задают определенный
цвет для заголовков первого уровня (<h1>) и абзацев (<p>).
Результат нашего примера:
Рис. 1 Пример использования внутренней таблицы стилей.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Предыдущие версии HTML (до пятой версии) требуют в открывающем
теге <style> дополнительный
атрибут type,
который
определяет MIME-тип,
используемого содержимого (текстовый файл таблиц стилей):
<style> /* синтаксис HTML 5 */
…
</style>
<style type = "text/css"> /* синтаксис HTML 4.01 */
…
</style>
В некоторых случаях допускается добавлять стили непосредственно к каждому
конкретному HTML тегу без применения внешней или внутренней таблицы стилей
(встроенным CSS мы пользовались при изучении HTML 5).
Еще раз для понимания: внешняя таблица стилей это обычный текстовый файл с
разрешением *.css.
Название
этого
файла
всегда
должно
иметь
вид *.css (например, main.css, site.css, styles.css, print.css и так далее). Файл внутри
себя должен содержать только синтаксис CSS (никаких HTML тегов в нем быть не
может).
Связывание таблиц стилей с HTML-кодом
Подключение с использованием тега <link>
Самым распространенным методом добавления (связывания) внешней таблицы
стилей с документом является использование тега <link>. Элемент <link> определяет
связь между документом и внешним ресурсом.
Обращаю Ваше внимание, что элемент <link> размещается всегда внутри
элемента <head> (как правило, перед его закрывающим тегом), при этом он
может быть использован любое количество раз (содержать различные
таблицы стилей). Элемент не требует закрывающего тега и содержит внутри
себя только атрибуты.
HTML тег <link> имеет следующий синтаксис:
<link rel = "stylesheet" href = "styles.css"> /* синтаксис HTML 5 */
<link rel = "stylesheet" href = "styles.css" type = "text/css"> /* синтаксис HTML 4.01 */
Сразу хочу обратить ваше внимание на то, что атрибут type, который
определяет MIME-тип, используемого файла (в нашем случае текстовый файл таблиц
стилей) не является обязательным в HTML 5. Для всех типов документов в HTML 5
необходимы лишь два обязательных атрибута:
1. rel = "stylesheet" - определяет отношение между текущим документом и связанным
документом на который ведёт ссылка (в нашем случае таблица стилей).
2. href - задает URL-адрес местонахождения внешнего файла. Адрес может быть как
относительный, так и абсолютный.
Подключение с использованием правила @import
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
CSS правило @import используется для импорта содержимого CSS файла в текущую
таблицу стилей. Это правило должно предшествовать всем другим видам правил, за
исключением правила @charset, которое задает кодировку символов, используемую
в таблице стилей.
Внешняя таблица стилей может быть подключена к веб-странице с помощью HTML
тега <link>, или с использованием встроенного в CSS правила @import, которое побольшому счету делает то же самое. Оба варианта позволяют присоединить таблицы
стилей к веб странице.
Основное отличие правила @import заключается в том, что с использованием этого
правила вы можете присоединить одну внешнюю таблицу стилей к другой.
Импортирование к внешней таблице стилей
Давайте рассмотрим пример, который позволит нам присоединить несколько таблиц
стилей к одной внешней таблице стилей:
/* Содержимое файла anyname.css */
@import url("color.css"); /* импортируем в основной файл содержимое первого файла css
*/
@import url("fonts.css"); /* импортируем в основной файл содержимое второго файла css
*/
/* стили, которые находятся в основном файле css */
селектор {
свойство: значение;
}
...
/* Конец содержимого файла anyname.css */
Чтобы присоединить один внешний файл таблиц стилей к другому, необходимо
внутри файла к которому добавляется содержимое объявить правило @import и
указать URL путь к этому файлу. Чтобы задать путь необходимо после
правила @import указать url("path/to/file"). При этом путь, который указывается в
круглых скобках может быть как абсолютным, так и относительным. Информацию о
том как задавать абсолютные и относительные пути вы можете узнать в статье
учебника HTML 5 "HTML ссылки".
Как и с помощью нескольких тегов <link> вы можете разместить несколько
правил @import, чтобы присоединить необходимое количество внешних таблиц
стилей.
Обращаю Ваше внимание, что правила @import всегда необходимо указывать
перед стилями CSS, иначе таблицы стилей будут проигнорированы браузерами
и не импортированы в файл.
Импортирование к внутренней таблице стилей
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Кроме того, с использованием правила @import существует возможность привязать
внешние таблицы стилей к внутренней таблице стилей документа. Для этого
необходимо объявить правило или правила сразу после открывающего тега <style>:
<!DOCTYPE html>
<html>
<head>
<title>Импортирование файла к внутренней таблице стилей</title>
<style>
@import url("color.css"); /* импортируем к внутренней таблице стилей документа
содержимое первого файла css */
@import url("fonts.css"); /* импортируем к внутренней таблице стилей документа
содержимое второго файла css */
h1 {
text-align: center; /* выравниваем заголовок по центру */
color: red; /*устанавливаем цвет текста красный */
}
</style>
</head>
<body>
<h1>Заголовок первого уровня.</h1>
<p>Абзац для примера.</p>
</body>
</html>
Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с
сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и
проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google),
связанных с оптимизацией страниц, рекомендуется избегать применения
правила @import.
Кроме того, в некоторых случаях правило @import может замедлять загрузку таблиц
стилей, либо загружать их не в заданном порядке, что может быть критично для
конечного отображения конкретной страницы.
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы:
Для чего необходим CSS?
Блок 1 Основы сайтостроение
Что такое селектор?
Какие бывают таблицы стилей?
Где размещается внутренняя таблица стилей?
Лекция 3 Каскадные таблицы стилей CSS
Что такое CSS
Это вводная статья про CSS. Мы должны максимально познакомиться с понятием, чтобы
дальше было легче изучать все аспекты CSS. Начнем с определения
CSS (от англ. "Cascading Style Sheets", каскадные таблицы стилей) – список стилей для
сайта
Что такое стиль? Грубо говоря, стиль это то, как выглядит элемент на сайте. Например,
любой текст можно написать размером 10 пикселей, а можно 14 пикселей. Можно написать
черным цветом, можно синим. Можно подчеркнуть/наклонить/зачеркнуть и т.п. Все
форматирование текстов связано с CSS.
Но это лишь малая часть из возможностей. За всю визуализацию всех тегов html отвечает
CSS. Даже за динамические изменения: выпадающие меню, подсвечивания ссылок при
наведении.
Чаще всего список всех стилей называют "таблица стилей CSS".
Цели и задачи CSS
1.
Сделать сайт более красивым (в плане дизайна), сделать дружелюбный
интерфейс, да и просто, чтобы сайты хоть как-то отличались друг от друга
2.
Отделить код html от кода описания стилей и дизайна
Синтаксис CSS
Селектор{
атрибут: значение;
}
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Селектор, как правило, это название стиля. В фигурных скобках описываются конкретные
правила. Описание происходит всегда по правилу: название атрибута, двоеточие, значение.
Каждое правило должно заканчиваться точкой с запятой.
Например
.название_стиля {
атрибут1: значения1;
атрибут2: значения2;
...
};
Можно задавать стили по разному. Давайте разберем на примере.
/*Задание общего стиля*/
.global_style {
font-size: 12px;
color: red;
}
/*Задание общего стиля только для тега font*/
font.style1 {
font-size: 10px;
color: blue;
}
/*Задание общего стиля только для тега font*/
#global_style2 {
font-size: 14px;
color: red;
}
h1 {
font-size: 19px;
}
Стиль global_style можно использовать для всех тегов в качестве класса. Например, <div
class="global_style">.
Стиль style1 можно использовать только для тега <font>, поскольку в определении было
указано font.style1.
Третий вариант задания через решетку (#). Как и в первом случае он определен для всех
элементов, но задавать его нужно не через class, а через атрибут id: <div id="global_style2">
В последнем варианте мы просто указали название тега <h1> и прописали ему стиль. Это
значит, что теперь все теги h1 будут наследовать значение этого стиля.
Что такое CSS3
В последнее время часто можно встретить понятие CSS3. По сути это все тот же CSS, с
набором новых аргументов, которые дают дополнительные возможности в плане различных
эффектов. Например, свечение текста. Многие браузеры не поддерживают такие свойства,
поэтому рекомендуется использовать такие эффекты в минимальных количествах.
В чём разница между CSS и HTML?
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
HTML это каркас вашей страницы, это ссылки, картинки, контент. А в CSS определяется
то, как все это будет отображаться для пользователя. Так что HTML и CSS это разные вещи, но
они связаны между собой. Причем правилом хорошего тона является разделение кодов между
собой, чтобы не смешивать их на одной странице.
Как и где задавать стили CSS
Стиль задается в мета тегах head с помощью тега style:
<html>
<head>
<style type="text/css">
.styletest {
color: blue;
font-size:12px;
font-family:Arial;
}
</style>
</head>
<body>
...
Тело страницы
...
</body>
</html>
Но это плохо, т.к. загромождается код описаниями стилей. К тому же, если этот код
одинаковый для всех страниц сайта, то чтобы поменять его везде, придется повозиться.
Поэтому используют специальные файлы с расширениями .css, куда заносятся все стили.
Делается это через тег link в разделе head:
<head>
...
<link rel="stylesheet" type="text/css" href="style.css"/>
...
</head>
Преимуществом такого подхода является так же и то, что этот файл кэшируется
браузерами, что снижает "вес" сайта, тем самым он быстрее грузится. А это сейчас очень важно
для SEO. См. как увеличить скорость загрузки сайта
Что дает CSS (плюсы)
1.
Легко менять дизайн. Достаточно поменять стиль лишь в одном месте и он
изменится на каждой странице сайта
2.
Это единственный способ изменять дизайн
3.
Простота синтаксиса языка
Проблемы CSS с браузерами
Старые браузеры поддерживают не все возможности CSS. С этим возникают проблемы
отображения. Например, эффект, который был задуман для лучшего восприятия контента,
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
может привести к обратному эффекту. Если какое-то свойство не поддерживается, то есть риски
наложения блоков, текстов друг на друга и т.п.
Частично эту проблему решают "префиксы". По сути это просто слово стоящее перед
аргументом в таблице стилей. Для каждого браузера существует свой префикс.
-moz- для браузера Firefox
-webkit- для браузеров Chrome и Safari (в обоих браузерах используется один и тот
же движок визуализации)
-ms- для браузера Internet Explorer
-o- для браузера Opera
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
В этой статье учебника мы узнаем почему таблицы стилей называют каскадными, как
происходит взаимодействие стилей между собой внутри документа, познакомимся с
системой приоритетов и конечно рассмотрим необходимые для понимания этой темы
примеры.
Прежде всего, что такое каскадность? Каскадность – это правила, по которым
определяется какие стилевые свойства задаются браузером элементам на странице
(последовательность применения стилей к определённым элементам и разрешение
при необходимости, возникающих конфликтов).
Давайте рассмотрим следующее изображение, на нем отображены основные
источники информации о стилях, которые образуют каскад:
Рис. 30 Основные источники информации о стилях.
К основным источникам информации о стилях относятся:
o
o
Встроенные стили браузера по умолчанию.
Стили, заданные автором документа, их в свою очередь можно указать в трех
местах:
Внешний CSS файл (с использованием элемента <link>, который размещается
внутри элемента <head>).
В теле документа (в настоящее время разрешается размещать стили только в
начале документа - стили помещаются внутри парного тега <style>, который в свою
очередь должен находиться внутри элемента <head>).
Блок 1 Основы сайтостроение
o
Лекция 3 Каскадные таблицы стилей CSS
Внутри элемента (стили, которые задаются с использованием глобального HTML
атрибута style).
Стили, заданные пользователем (в некоторых современных браузерах
возможность определить свои стили для конкретного сайта доступна встроенными
средствами в настройках, для других требуется расширение для браузера). Это
позволит стилизовать какой-то сайт по своему усмотрению и вкусу, или убрать с него
какие-то блоки, которые Вам не хотелось бы видеть.
Наименьшим приоритетом из этого списка обладают встроенные стили браузера, а
для пользовательских устанавливается наивысший приоритет, но это нас не
должно интересовать, ведь кто как хочет, так и стилизует, и это не предмет этой
статьи учебника.
Главное надо понять, что если на странице применяется несколько стилей к одному
элементу, то браузер объединит свойства этих стилей, при условии, что они не
конфликтуют между собой (имеют различные значения для однотипных свойств). А
если конфликтуют?
Давайте перейдем к практической части.
Предположим, что у нас есть абзац (элемент <p>), в котором указана определенная
гиперссылка (элемент <a>). HTML код может выглядеть следующим образом:
<p class = "main"> Для перехода к основной статье нажмите <a href = "#"> вот на
это место. </a></p>
На нашу страницу добавим следующие стили:
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание)
*/
}
Создадим разметку и добавим стили в наш документ:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Каскадность в CSS</title>
<style>
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание)
*/
}
</style>
</head>
<body>
<p class = "main">Для перехода к основной статье нажмите <a href =
"#"> вот на это место. </a></p>
</body>
</html>
Результат нашего примера:
Рис. 30а Каскадность в CSS.
Давайте рассмотрим какие стили были применены к элементу <a>:
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Рис. 30б Применение стилей к элементу.
В данном примере вы можете увидеть, что все три наших селектора с различными
стилями были применены к элементу <a>, а встроенные стили элемента - цвет и
декорирование текста (нижнее подчеркивание) были заменены на авторские стили
(стили автора документа) по той причине, что они имеют больший приоритет.
Система приоритетов в CSS
Давайте рассмотрим пример, где не всё так очевидно и однозначно. К примеру, с
использованием свойства font-family зададим элементу <a> различный тип шрифта
с использованием аналогичных селекторов:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Конфликты стилей в CSS</title>
<style>
a { /* используем селектор типа */
color: brown; /* устанавливаем цвет текста */
font-family: Arial; /* устанавливаем тип шрифта Arial */
}
p a { /* используем селектор потомков */
font-weight: bold; /* устанавливаем жирное начертание шрифта */
font-family: Helvetica; /* устанавливаем тип шрифта Helvetica */
}
.main a { /* используем селектор потомков */
background-color: orange; /* задаем цвет заднего фона */
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание)
*/
font-family: Courier; /* устанавливаем тип шрифта Courier */
}
</style>
</head>
<body>
<p class = "main">Для перехода к основной статье нажмите <a href =
"#"> вот на это место. </a></p>
</body>
</html>
Результат нашего примера:
Рис. 31 Пример конфликтования стилей.
Давайте рассмотрим какой шрифт получил элемент <a>:
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Рис. 31a Выбор типа шрифта при конфликте стилей.
Обратите внимание, что для нашего элемента был установлен шрифт Courier. Как
мы видим в "инструментах разрабочика" браузера Chrome этот шрифт выбран из
селектора потомков в котором используется как селектор класса, так и селектор типа
(.main a), а в остальных селекторах тип шрифта для элемента перечеркнут. Но
почему?
Я уже обращал Ваше внимание на тот факт, что основное правило механизма
каскадности - побеждает тот, у кого установлен самый явно определенный стиль. Для
этих целей в CSS существует своя система приоритетов, которая основана на
присвоении значений в пунктах для каждого типа селекторов, чем выше это значение,
тем выше его значимость:
Селектор типа, псевдоэлементы — 1 пункт.
Селектор класса, псевдоклассы — 10 пунктов.
Id селектор — 100 пунктов.
Встроенный (inline) стиль (стиль задается в самом элементе с использованием
глобального HTML атрибута style) — 1000 пунктов.
Давайте перейдем к следующему примеру в котором рассмотрим как работает
система приоритетов:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
<title>Работа системы приоритетов в CSS</title>
<style>
#id_invite { /* id селектор — 100 пунктов */
color: red; /* устанавливаем цвет текста красный */
}
.class_invite { /* селектор класса — 10 пунктов */
color: blue; /* устанавливаем цвет текста синий */
}
p { /* селектор типа — 1 пункт */
color: green; /* устанавливаем цвет текста зеленый */
}
</style>
</head>
<body>
<!-- устанавливаем цвет текста внутри элемента span зеленый
(inline стиль) -->
<p class = "class_invite" id = "id_invite">Просто <span style = "color:
green;">добавь</span> воды.</p>
</body>
</html>
В данном примере для элемента <p> был установлен красный цвет текста
благодаря id селектору, который имеет более высокое значение в пунтах чем другие
селекторы (100). Кроме того, для демонстрации системы приоритетов мы применили
встроенный (inline) стиль для элемента <span> и установили для него зеленый цвет
шрифта. Обратите внимание, что на изображении, все значения селекторов
перечеркнуты, так как встроенный стиль имеет самое высокое значение в пунктах
(1000).
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Рис 32 Пример системы приоритетов в CSS.
Чтобы подсчитать специфичность комбинированных селекторов необходимо их
просто сложить между собой, например:
#id_invite a { /* id селектор (100 пунктов) + селектор типа (1 пункт) = 101 пункт */
блок объявлений;
}
p:first-letter { /* селектор типа (1 пункт) + псевдоэлемент (1 пункт) = 2 пункта */
блок объявлений;
}
.main:first-child { /* селектор класса (10 пунктов) + псевдокласс (10 пунктов) = 20
пунктов */
блок объявлений;
}
Отмена значимости стилей
В некоторых случаях, два стиля могут иметь одинаковый приоритет (одинаковое
количество пунктов), что доставляет сильную головную боль по той причине, что
браузер в этом случае выбирает последний определенный стиль в таблице
стилей, что может не соответствовать вашим ожиданиям. Если вы поменяете
местами конфликтующие стили, то действовать будет тот, который будет указан ниже
в таблице стилей. Старайтесь избегать подобных ситуаций и запомните этот момент.
Эти знания помогут Вам сэкономить большое количество времени.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
В CSS предусмотрена возможность отменить значимость стилей (не учитывать
количество пунктов). Для этого необходимо добавить к значению CSS свойства
ключевое слово !important.
Давайте рассмотрим пример использования ключевого слова !important:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример отмены значимости стилей</title>
<style>
a.rtfm { /* селектор типа (1 пункт) + селектор класса (10 пунков) = 11 пунктов */
color: green; /* устанавливаем цвет текста зеленый */
}
a { /* селектор типа (1 пункт) */
color: red !important; /* отменяем значимость стилей и устанавливаем цвет
текста красный */
}
</style>
</head>
<body>
<a class = "rtfm" href = "http://google.com">Найти</a>
</body>
</html>
В этом примере с использованием ключевого слова !important мы отменили
значимость стилей и установили цвет текста для гиперссылки красный. В данном
случае если бы мы не использовали ключевое слово !important, то цвет бы
остался зеленым по той причине, что он имеет большую значимость (задан с
использованием селектора класса).
Результат нашего примера:
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Рис. 33 Пример отмены значимости стилей.
Обратите внимание, что !important указывается в конце каждого свойства и
действует только на одно свойство, а не на весь блок объявлений!
Если вы указали значение !important для двух однотипных свойств различных
стилей, то в этом случае браузер рассматривает их по принципу правил значимости
(приоритет отдаётся более значимому свойству). Старайтесь избегать подобных
ситуаций.
Сброс и нормализация встроенных стилей.
Ещё один необходимый метод для грамотного построения кроссбраузерных страниц
- это необходимость сброса встроенных в браузер внутренних стилей (сброс
стандартных стилей браузера). Другими словами, независимо какой браузер у
пользователей, которые посещают Ваш сайт, отображение должно быть в одном
стиле - с одинаковыми отступами, границами и форматированием.
Для этого существуют различные шаблоны, которые сбрасывают внутренние стили
(reset.css). Как правило, шаблоны адаптируются под себя (под Ваши нужды) и служат
для удаления полей и отступов, устанавливая например 100% размер шрифта,
убирая выделения полужирным шрифтом, устанавливают пространство между
строками в абзаце, убирают маркеры в списках и тому подобное.
В настоящее время часто в своей работе используют альтернативу
традиционному reset.css (сбросу внутренних стилей), нормализовывая таблицы
стилей - normalize.css.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Данный проект (normalize.css) появился после глубокого исследования различий
между изначальными стилями браузера под руководством Николаса Галахера.
Основные задачи normalize.css заключаются в том, чтобы сохранить полезные
настройки браузера, а не стирать их, и при этом нормализовать стили для широкого
круга HTML элементов.
Как
вы
понимаете, normalize.css значительно
отличается
от reset.css.
Впоследствии, я Вам рекомендую попробовать в своей работе оба метода, чтобы
определиться, соответствует ли конкретный метод вашим предпочтениям в
разработке.
Пример CSS reset - http://meyerweb.com/eric/tools/css/reset/
Проект normalize css - https://necolas.github.io/normalize.css/
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы:
подсчитайте специфичность комбинированного селектора:
.main a {
блок объявлений;
}
Показать ответ
подсчитайте специфичность комбинированного селектора:
#main #section {
блок объявлений;
}
Показать ответ
подсчитайте специфичность комбинированного селектора:
table.header tr:hover {
блок объявлений;
}
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Показать ответ
Основная цель данной статьи учебника заключается в том, чтобы донести до Вас
механизм работы наследования стилей, объяснить Вам в чем заключаются его
основные плюсы и разобрать некоторые не очевидные на этот счет вещи.
Зачастую, если у ребёнка родители чудаки, то он от них не отстает, или как говорится:
"яблоко от яблони недалеко падает". Что касается наследования в CSS, то это не что
иное, как метод тиражирования различных CSS свойств, относящихся к одному
элементу страницы на вложенные в него элементы (потомки).
Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере
HTML элемента <body>, который определяет видимое содержимое страницы.
Рис.28 Схема наследования стиля в CSS.
Создадим стиль для элемента <body>, который будет изменять цвет и тип шрифта:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример наследования стиля в CSS</title>
<style>
body { /* используем селектор типа */
color: green; /* устанавливаем цвет текста */
font-family: arial; /* устанавливаем тип шрифта */
}
</style>
</head>
<body>
<h2>Заголовок второго уровня</h2>
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
<p>Полный <strong>абзац</strong></p>
</body>
</html>
В этом примере для элемента <body> мы установили зеленый цвет текста и тип
шрифта Arial. CSS свойства color и font-family наследуются, а это означает, что эти
свойства будут применяться и на вложенные элементы внутри <body> (на все его
потомки).
Обращаю Ваше внимание на то, что вы всегда можете посмотреть наследуется или
нет конкретное свойство в полном справочнике CSS.
Результат нашего примера:
Рис. 29 Пример наследования стиля в CSS.
В выше рассмотренном примере все элементы, расположенные внутри <body> (его
потомки)
унаследовали его свойства. Механизм
наследования имеет
многоуровневую систему и распространяется не только на прямых потомков
элемента, но и переносится на все вложенные элементы. В нашем примере к такому
элементу относится элемент <strong>, который по аналогии с другими элементами
унаследовал все свойства стиля, заданного для элемента <body>. В этом
заключается основной смысл наследования, который используется в CSS.
Механизм наследования значительно сокращает код CSS, например, если бы наш
элемент <strong> получил цвет по умолчанию – чёрный, то нам пришлось бы
отдельно для этого элемента устанавливать стиль, который бы определял как цвет,
так и тип шрифта, что значительно увеличивало бы трудозатраты на разработку
конкретной страницы.
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Еще один момент, который обязательно необходимо понять, это то, что аналогично
действует механизм наследования не только для селекторов типа, но и для всех
типов селекторов, рассмотренных в предыдущих статьях, посвященной этой
тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и
применили его к элементу <body>, то в этом случае все элементы, вложенные в него
также унаследуют эти свойства.
Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей
работы по созданию стилей для элементов документа.
Ограничения и нюансы наследования
Ограничения:
Не наследуются свойства, которые влияют на размещение элементов на странице,
свойства отвечающие за внешние и внутренние отступы элемента, свойства
отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее
в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет
конкретное свойство на сайте в справочнике CSS.
Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным
причинам, представьте, что мы создаем границу для родительского элемента и после
этого все потомки по этой логике должны унаследовать это свойство, что выглядело
бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или
сбросу).
Нюансы:
Все современные браузеры используют собственные встроенные CSS стили для
HTML элементов, эти стили, при необходимости, вы можете посмотреть у конкретного
элемента на сайте в справочнике HTML(значение CSS по умолчанию). В следующей
статье мы научимся обнулять встроенные стили для отображения ваших страниц
одинаково во всех популярных браузерах.
А сейчас на примере элемента <a>, определяющего гиперссылку, мы рассмотрим
пример в котором рассмотрим почему некоторые элементы не наследуют некоторые
свойства своего предка:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Нюансы наследования стилей</title>
<style>
body { /* используем селектор типа */
color: green; /* устанавливаем цвет текста */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
<body>
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
<p>Абзац, который содержит внутри себя <a href = "#">гиперссылку</a>.</p>
</body>
</html>
В
этом
примере
для
элемента <body> мы
установили
следующие
стили: зеленый цвет текста и отсутствие декорирования текста (убрали нижнее
подчеркивание снизу). Обратите внимание на элемент <a> на изображении, он
полностью не изменился. Давайте разберемся ниже (после просмотра изображения)
почему так происходит.
Результат нашего примера:
Рис. 29а Нюансы наследования стилей.
При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно
определенный стиль. Откроем инструменты разработчика (для Chrome это F12).
Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet)
имеет любая ссылка (any link) в документе. Для неё заданы следующие стили: цвет
текста синий (-webkit-link - значение браузера по умолчанию), декорирование текста
(нижнее подчеркивание) и определено, что браузер устанавливает курсор
автоматически (значение auto CSS свойства cursor).
Ниже отображаются свойства, которые были унаследованы (Inherited from)
элементом <a> от <body>. Как вы можете заметить, браузер отбросил все стили
элемента <body>, по той причине, что у элемента <a>стиль, который определяет
цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое
определяет декорирование текста не наследуется и отображается с небольшой
прозрачностью в инструментах разработчика, но даже если бы оно наследовалось,
то не применилось бы по аналогии с цветом теста (у элемента <a> это свойство тоже
явно определно).
Блок 1 Основы сайтостроение
Лекция 3 Каскадные таблицы стилей CSS
Такие конфликты между стилями всегда разрешает браузер, а по каким правилам
определяет, кому отдает приоритет и как он в том, или ином случае себя должен
повести, на чью сторону встать, определяется правилами каскадности. Подробнее
о правилах каскадности мы поговорим в следующей статье учебника.
Вопросы и задачи по теме
Перед тем как перейти к следующей статье ответьте на следующие вопросы:
Что представляет из себя механизм наследования в CSS?
Где можно посмотреть наследуется или нет конкретное свойство если я не помню?
Где можно посмотреть какие встроенные CSS стили используются для HTML
элементов?
