Таблицы стилей CSS
Работать со стилями в HTML можно тремя способами:
- С помощью атрибута style в тегах.
- Описав стили в заголовке документа.
- Использовать внешний файл, в котором описаны все стили.
Первые два способа можно использовать если необходимо применить индивидуальное оформление страницы.
В случае если много страниц оформляются в едином стиле лучше использовать внешний файл, в котором описаны все стили. Если все страницы обращаются к одному файлу описывающему стили, то в этом случае изменения внесенные в таблицу стилей отразятся на всех страницах сайта, что гарантирует сохранение единого стиля.
Подключение файла стилей осуществляется в заголовке (тег head).
Формат представления:
<like rel="stylesheet" href="Файл стилей" type="text/css">
Для облегчения работы с таблицами стилей предусмотрены комментарии. Комментарий начинается с символов "/*" и заканчивается символами "*/".
Пример использования:
Селекторы
Селектор в CSS это название тега, которому задаются свойства. К примеру задание цвета для абзаца:
Все абзацы будут выводиться синим цветом.
Если необходимо нескольким тегам назначить одно и тоже свойство используется:
H1 { color: green }
H2 { color: green }
H3 { color: green }
то можно использовать группировку и написать:
H1, H2, H3 { color: green }
при этом селекторы разделяются запятыми.
Так как структура HTML документа является объектно-ориентированной то существует взаимосвязь между селекторами. Потомок – тег находящийся внутри другого тега – предка (или родителя). Сестринские теги находятся рядом (смотри структуру документа!!!). Рассмотрим их использование.
Селекторы потомков используются если необходимо задать свойство тегу находящемуся внутри другого. К примеру: задать красный цвет для текста в теге CODE если он находится внутри абзаца. В этом случае в таблице стилей задаем:
В документе: <P>Пример использования <CODE>текст примера</CODE> селектора потомка</P>
В этом случае тег CODE является потомком для тега абзаца и он будет красного цвета. Количество потомков не ограничено обусловлено только структурой документа. Если неизвестно в какой тег будет вложен тег которому необходимо задать свойства то, в этом случае, используют символ "*" (означает применить к любому тегу). Звёздочка заменяет неизвестный тег и поэтому с обеих сторон должны быть пробелы.
BODY * CODE { color: red } /* тегу CODE устанавливается красный цвет в любом теге */
По структуре HTML документа все теги находятся внутри тега BODY, поэтому можно записать просто:
Если необходимо увеличить отступ от заголовка до первого абзаца (абзаца следующего за ним) используют сестринские селекторы:
H1.zag + P {margin-top: 3mm}
Отступ будет назначен абзацу следующему за заголовком у которого атрибут CLASS имеет значение zag. Селектор классов рассмотрим ниже.
Селекторы атрибутов
CSS создает правила в соответствии с которыми тегу задаются свойства в зависимости от значений атрибутов.
Правило может быть задано четырьмя способами:
- [Атрибут] – Свойства назначаются всем тегам у которых установлен атрибут, не зависимо от его значения.
- [Атрибут=значение атрибута] – Свойства назначаются тегу у которого заданный атрибут имеет указанное значение.
- [Атрибут~=значение атрибута] – Свойства назначаются тегу у которого одно из значений (список значений задается через пробел) атрибута равно заданному.
- [Атрибут|=значение атрибута] – Свойства назначаются тегу у которого значение атрибута, заданное списком слов разделенных дефисом, начинается с заданного значения.
Пример использования:
H1[margin] { background: red } /* Всем заголовкам с установленным атрибутом полей назначить красный цвет фона */
P[class=warning] { color: red } /* Всем абзацам у которых атрибут class имеет значение warning */
P[class=warning][align=center] { color: red } /* Всем абзацам у которых атрибут class имеет значение warning и атрибут align значение center */
H1[align~="left right"] { color: red } /* Всем заголовкам у которых атрибут align имеет значение left или right */
*[lang|="en"] { displey: none } /* Всем тегам у которых атрибут lang (язык) начинается с en (будут невидимы теги с атрибутами и en-GB и en-US) */
Селекторы классов
В таблице стилей вместо "P[class~="Exemple"] { color: red }" можно записать "P.Exemple { color: red }". В данном случае свойство задается только тегам абзаца класса "Exemple". Можно также задать стиль без указания тега (для любого), в этом случае запишем "*.Exemple { color: red }" или просто ".Exemple { color: red }".
Можно также использовать и P.text.red { color: red }, в этом случае красный цвет будет назначен абзацам у которых в названии класса будут слова text и red.
<P class="This text red color">Этот текст красного цвета</P>
<P class="This text blue color">А этот текст не красного цвета</P>
ID селекторы
ID селектор назначается тегу атрибутом ID. ID селектор по использованию похож на селектор классов. Если в таблице стилей селектор классов начинается с точки, то ID селектор начинается с символа решетки ("#"). ID селектор по отношения к селекторам атрибутов имеет больший приоритет, это означает, что значения назначенные в атрибутах тега будут перекрыты значениями заданными ID селектором (то есть изменить значения атрибутов заданных ID селектором в документе нельзя).
Пример использования:
В таблице стилей задаем свойства для всех тегов для ID "Text":
Применяем стиль для абзаца:
<p id="Text">Любой текст</p>
Теги являются физическими элементами и расположены в структуре дерева документа, что в большинстве случаев достаточно для оформления. Для оформления документа кроме физических элементов введены и логические. В частности такого физического элемента как первая строка абзаца не может быть, так как размер первой строки определяется шириной браузера или размером шрифта и многими другими факторами. В этом случае используются логические элементы которые определяются браузером в процессе работы. Псевдоклассы и псевдоэлементы являются логическими элементами документа.
Псевдокласс: first-child
Первый дочерний элемент. Так как документ HTML представляется в виде структуры дерева то элементы могут находится внутри друг друга (то есть вялятся дочерними).
Пример использования:
В таблице задаем:
P:first-child CODE { color: blue }
В теле документа:
<P>Это <CODE>синий</CODE> цвет текста в теге CODE</P>
<P><B>А это не<CODE>Синий</ CODE> цвет текста в теге CODE</B></P>
В первом случае тег CODE является первым дочерним элементом абзаца, а во втором случае второй, и цвет не изменяется.
Псевдоклассы ссылки:
link – Задает свойства если пользователь ещё не просматривал ссылку.
visited – Задает свойства если пользователь уже просмотрел ссылку.
Динамические псевдоклассы
hover – Задает свойства когда пользователь выделил какой либо элемент.
active – Задает свойства когда пользователь активировал элемент (с момента когда пользователь нажал кнопку мыши до того как её отпустил).
focus – Задает свойства когда элемент находится в центре событий (пользователь вводит данные в поле формы).
Одному и тому же элементу можно назначить несколько псевдоклассов.
A: link { color: blue } /* Ссылка не просмотрена */
A: visited { color: red } /* Ссылка просмотрена */
A: hover { color: green } /* Указатель наведен на ссылку */
A: active { color: yellow} /* Ссылка активна */
В соответствии с правилами каскадирования правило hover должно быть определено после правил link и visited, а правило active после hover.
Псевдоэлементы
first-line – задает стиль первой строки абзаца.
P.first-line { color: red } /* Первая строка абзаца будет красного цвета */
Можно задать свойства шрифта, цвета и фона.
first-litter – задает стиль первой буквы. Используется для для создания буквицы.
Если свойству float задано значение none то псевдоэлемент будет соответствовать строчному элементу, при иных значениях будет соответствовать плавающему элементу.
P.first-litter { font-size: 20pt; font-weight: bold; color: red; float: left }
Можно задать свойства шрифта, цвета, фона, границ, отступов и рамок.
before и after – Вставка содержимого до или после элемента.
P.exemple:before { content: "Строка вставлена перед абзацем"}
Table.exemple:after { content: "Строка вставлена после таблицы"}
|