Связанные Таблицы Стилей

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

ПРИМЕР:

Файл styles.css

body {background:black;font-size:9pt;color:red;font-family:Arial Black}

h1 {color:white}

В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так:

ПРИМЕР:

Файл Index.html

<html>

<head>

<title> Просто еще один пример </title>

</head>

<body>

Содержание Документа

</body>

</html>

Так как внешний файл CSS ничего, кроме стилевого блока, не содержит, то стилевые теги

<STYLE> и </STYLE> обычно не указывают.

Можно к одной странице привязать несколько внешних таблиц стилей. Тогда теги <LINK> следуют друг за другом. Приоритетом пользуется более поздняя таблица. Каждая следующая затирает предыдущую при совпадении параметров. Этот принцип является общим принципом каскадности стилей.

Структура и правила

Селекторы (Selectors):

Синтаксисис:

селектор {свойства}

Любой элемент HTML (тег) - это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.

ПРИМЕР:

H1 {color:red;font-size:20pt;}

Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point). Тег в качестве селектора называется простым селектором.

Классовые селекторы (Class Selectors):

Синтаксис:

селектор.класс {cвойства}

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

ПРИМЕР:

H1.my_blue1 {color:blue;font-size:20pt;}

Все элементы H1 с атрибутом CLASS=" my_blue1" станут синими.

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

Синтаксис:

.класс {свойства}

ПРИМЕР:

.green5 {color:green;}

В данном случае все элементы с атрибутом CLASS="green5" станут зелеными. Такой класс предпочтительнее чем привязанный, т.к. дает свободу его использования.

Внутри атрибута CLASS можно использовать несколько имен классов через пробел. В этом случае приоритетом пользуется класс расположенный правее.

ID селекторы (ID Selectors):

Cинтаксис:

#id {свойства}

ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.

Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue - синий курсив, но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.

ПРИМЕР:

<html>

<head>

<title> Пример CSS </title>

<style>

.blue {color:blue;font-style:italic}

#boldunderline {text-decoration:underline;font-weight:bold}

</style>

</head>

<body>

<p class="blue"> Здравствуйте, это моя домашняя страница. </p>

<p class="blue" id="boldunderline"> Пока еще в стадии разработки... </p>

<p id="boldunderline">... Но скоро откроется </p>

</body>

</html>

Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID "boldunderline" (в примере - жирный, подчеркнутый текст). В последнем примере мы использовали параметр id="boldunderline" два раза. Согласно спецификации CSS это не разрешено. Селектор id может быть описан для однократного применения на странице.

Контекстуальные селекторы (Contextual Selectors):

Контекстные селекторы - это сочетания нескольких обыкновенных селекторов, записанных через пробел. Внешние селекторы находятся слева, внутренние – справа. Стиль задается только элементам в заданной последовательности в зависимости от каскадного порядка.

ПРИМЕР:

P I {color: silver}

В данном примере все элементы I внутри элементов P будут иметь заданный стиль.

К простым селекторам может быть добавлен селектор класса.

ПРИМЕР:

P I B.text1 {color: green}

В данном примере класс text1 при указанной вложенности тегов будет создавать зеленый цвет текста.

Придание нескольким элементам одинаковых свойств:

Скажем Вам нужно придать нескольким элементам Вашей веб-страницы одинаковых свойств. В этом случае при определении селекторы перечисляутся через запятую перед блоком свойств.

ПРИМЕР:

h1,h2,h3,p,strong {color:green;font-style:italic;}

Все элементы h1, h2, h3, p и strong будут зелеными. В этом списке могут присутствовать классы, id и контекстные селекторы.

Псевдоклассы и псевдоэлементы:

Синтаксис:

селектор:псевдокласс { свойства }

селектор.класс:псевдокласс { свойства }

селектор:псевдоэлемент { свойства }

селектор.класс:псевдоэлемент { свойства }

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

Список псевдоклассов и псевдоэлементов:

Anchor Pseudo Classes - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку. Псевдоклассы этого элемента: link (ссылка), active (активная ссылка), visited (посещенный ранее URL), hover (псевдокласс, возникающий при поднесении курсора к ссылке).

First Line Pseudo-element – first-line. Этот псевдоэлемент может быть использован с block-level элементами (p, h1 и т.д.). Он изменяет стиль первой строки этих элементов.

First Letter Pseudo-element – first-letter. Похож на first-line, но влияет не на всю строку, а только на первый символ.

Before – содержимое до элемента (употребляется вместе с параметром content).

After – содержимое после элемента.

ПРИМЕР:

a:link,a:visited {color:blue}

a:hover {text-decoration:none}

a:active,p:first-line {color:red}

В данном примере все элементы Anchor (ссылки) будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание. Первая строка любого абзаца будет красной.

Каскадность стилей.

Когда используются все три вида стилей могут возникнуть конфликты при задании разных свойств одного и того же селектора. Порядок применения стилей следующий:

1) Связанный стиль.

2) Глобальный стиль.

3) Внутренний стиль.

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

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

Класс имеет приоритет перед простым (теговым) селектором. Контекстные селекторы имеют приоритет перед классом.

Возможно сделать один из атрибутов стиля выпадающем (игнорирующим) правила каскадности. Тогда к его значению добавляется!important.

ПРИМЕР:

h1 {color:green!important }

Следует иметь в виду, что названия трех видов стилей приведены условно. В разной литературе они называются по-разному.

Правило @import

Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).

Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):

@import "mystyle.css";

@import url("mystyle.css");

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: