Каскадные таблицы стилей — это отдельная от HTML-кода информация, которую, как и любую внешнюю сущность, необходимо подключить к этому коду.

Существуют три способа подключения таблицы стилей: непосредственное описание в коде HTML-страницы (inline-описание). С таким способом вы уже знакомы — это атрибут style у какого-либо тега. Подобный способ не дает имеющихся преимуществ в использовании CSS, поскольку описание стиля находится в том же месте, что и сам элемент web-страницы и его код. Все, что позволяет такое указание стилей, — это в первую очередь обращение к свойствам элементов, которые недоступны в обычном HTML-коде. Указанные свойства в этом случае действуют только в переделах тега, в котором они описаны. Пример описания стилей в коде HTML-страницы приведен ниже (здесь ячейке таблицы задается ширина 20 % и граница — сплошная, серого цвета, толщиной в 1 пиксел); описание внутри заголовка HTML-страницы. При этом способе внутрь тега вставляется тег . Свойства элементов внутри него оформляются несколько иначе, нежели в первом случае. Запись представляет собой сложную конструкцию. Суть этого способа заключается в том, что на странице имеется описание стилей не для конкретного элемента, а для целого набора элементов. Одним из недостатков такого способа является то, что он может быть применен только к одной странице (другие страницы этих стилей не видят). Пример описания стилей в заголовке HTML-страницы представлен ниже. Сначала записывается при помощи некоторого выражения элемент, к которому будет применяться стиль, а затем в фигурных скобках указывается набор стилевых свойств элементов и их значений. При указании стилей, свойство элемента отделяется от его значения двоеточием. Если стилевых свойств несколько, то они указываются через точку с запятой;

…… body { color: white; font-family: Georgia, Times New Roman, Times, Microsoft Serif; background-color: silver; } p. text { color: darkblue; } …

описание стилевых свойств во внешнем файле. В этом случае каскадные таблицы стилей выносятся во внешний файл с расширением CSS. Внутри такого файла они записываются аналогично тому, как записывакгся внутри тега заголовка страницы. Кроме самого описания стилей в отдельном файле, необходимо указать в HTML-странице на тот факт, что стилевые свойства нужно применять именно из этого файла. Делается это в заголовке конкретной HTML-страницы при помощи тега , в котором указывается ссылка на файл со стилями (href), тип содержимого (type) и то, чем является указанный файл относительно текущего HTML-файла (rel). Недостаток какого описания состоит в том, что стили помещены в отдельный файл и, следовательно, отдельно подгружаются с сервера. Страница может быть показана вообще без применения стилей, если вы случайно ошиблись в имени CSS-файла или произошел какой-то сбой во время его загрузки. К счастью, это довольно редкое явление. Вы можете найти больше примеров и решения разного рода проблем с CSS и HTML на сайте https://dropcode.ru/forum/html-css или https://stackoverflow.com/.

body { color: white; font-family: Georgia, Times New Roman, Times, Microsoft Serif; background-color: silver; }

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

Тот элемент, к которому относится конкретное стилевое правило (то, что записано в фигурных скобках), называется селектор. На основании селектора из кода HTML-страницы выбираются те элементы, к которым нужно применять стиль. Имеются следующие типы селекторов: селектор для тега; селектор для класса; селектор для псевдо-класса; селектор по атрибуту ID.

Если нужно задать селектор для какого-либо конкретного тега (например, тега), то селектор называется просто именем тега.

Р{ font-size: 12рх; font-weight: bold; }

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

p. annotation {font-size: 12рх; text-align: right; } . text { font-size: 14px; color: black; }

Два селектора описанные выше отличаются присутствием описания тега. Первый селектор (p. annotation) выберет и применит указанный для не то стиль ко всем тегам, внутри которых есть атрибут class равный annotation. Второй селектор (text) применит указанный для него внешний вид к любому тегу с атрибутом class=»text».

Если мы хотим, например, абзацу (тегу), содержащему аннотацию к статье, присвоить описанный в каскадных таблицах стилей внешний вид, то должны написать так:

Текст абзаца-аннотации

Запись ciass=»annotation»— это именно то описание, которое я условно называл в начале главы»здесь текст показать как заголовок таблицы».

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

A: link { font-size: 14px; font-weight: bold; color: darkblue; }

Всего имеется семь псевдоклассов, из которых я использую только четыре: link, visited, hover, active. Остальные три: focus, first-child И lang мне не нужны, поскольку некоторые из них не-поддерживаются нормально.

Теперь рассмотрим селекторы для атрибута ID. Практически у каждого тега на web-странице может быть атрибут ID, который его однозначно выделяет среди других таких же тегов, т. е. в HTML-коде не может быть два тега с одинаковым атрибутом ID. Селекторы для ID похожи на селекторы для классов, но классов может быть много в документе, a ID — уникален. Такие селекторы даже описываются так же, как и селекторы для класса, только вместо точки используется знак решетка #: p#annotation { font-size: 12рх; text-align: right; } #text { font-size: 14px; color: black; }

Для применения этих стилей, в HTML-коде должна быть запись, подобная этой:

Здecь аннотация … Здесь текст…

В зависимости от необходимости, могут использоваться все три способа подключения таблиц стилей (in-line-описание, внутри заголовка , с помощью внешнего файла). Например, если необходимо описать внешний вид какого-то элемента, отличающегося от остальных, я использую in-line-описание. Если мне нужно использовать исключительно HTML-код, а внешние файлы не могу подключить, то я прописываю стили внутри тега . И, наконец, в обычных обстоятельствах при создании сайта я использую внешние файлы со стилями. Кроме того, можно применять одновременно несколько способов и тогда в зависимости от приоритета описания будет подключаться какой-то один из нескольких (именно поэтому они и называются каскадными).