Каскадные таблицы стилей Назначение и применение CSS

Назначение CSS Курсивный текст
Курсивный текст

Способы применения CSS Размещение в теге

Учебное" src="https://present5.com/customparser/3300631_67886649 --- 5._css.ppt/slide_4.jpg" alt="Пример определения стиля в теге

Учебное" loading="lazy" width="760" height="570" class="lazyOwl imgdescription" />

Пример определения стиля в теге

Учебное пособие

Пример подключения внешней таблицы стилей через тег

Пример использования атрибута STYLE = “…”

Размер шрифта равен 24

Пример использования директивы @Import

Структура объявления стиля Селектор----+ +-------------- Объявление | | H1{font-size:28pt} | | Свойство------+ +-----Значение

Типы селекторов стилей В CSS существуют следующие типы селекторов стилей: селекторы – имена тегов (часто также называются селекторами элементов) универсальный селектор селекторы – классы селекторы – идентификаторы селекторы атрибутов селекторы, связанные со структурой документа (селекторы потомков, селекторы сестринских элементов) селекторы псевдоклассов и псевдоэлементов

Селектор – имя элемента разметки (тега) ИмяЭлемента{атрибут:значение} Пример: I, A {color:olive; font-style:normal}

Два варианта стиля, дающие одинаковый результат H1, H2, H4 {color:silver} H2, H3 {background:gray} H1, H4 {background:white} H3 { color: white } b { color: gray } H1, H4 {color:silver; background:white } H2 { color:silver } H3 { color:white } H2, H3 {background:gray } b { color:gray; background:white }

Универсальный селектор *{color:red;}

Селектор – имя класса

Тест

Пример CSS позволяют задать дополнительные свойства класса стиля, относящиеся к отдельным элементам разметки. Например, для всех тегов, где будет задан класс warning должен быть применен жирный шрифт, а в контейнере SPAN должен быть применен так же и курсив. Эту задачу можно решить следующим образом: .warning{font-weight:bold} span.warning{font-style:italic}

Пример В качестве значения атрибута CLASS можно задать несколько имен классов и, соответственно, к элементу разметки будут применены свойства обоих классов. Например, можно задать .warning{font-weight:bold} .kl1{ font-style:italic } и тогда, если задать тег-контейнер , то заключенный в него текст будет выделен жирным курсивом.

Пример Для группы классов можно задать дополнительные свойства, например, если задать: .warning.kl1{background:gray } то текст выделенный приведенным выше контейнером SPAN будет выводиться на сером фоне, причем порядок задания имен классов в атрибуте CLASS значения не имеет.

Селектор – идентификатор объекта a.mainlink { color:darkred; text-decoration:underline; font-style:italic; } #blue { color:#003366 } ... основная гипертекстовая ссылка модифицированная гипертекстовая ссылка

Пример ID Если задать объявление стиля #warning{font-weight:bold; font-style:italic } и затем задать следующую разметку НЕКОТОРЫЙ ТЕКСТ то текст будет выдан жирным курсивом.

Пример Ниже приводится пример одновременного использования класса и идентификатора в одном теге:

Заголовок

Селекторы атрибутов Существуют четыре типа селекторов атрибутов: простой выбор атрибутов выбор на основании конкретного значения атрибута выбор по частичному значения атрибута выбор конкретного атрибута

Простой выбор атрибутов Чтобы выбрать все элементы IMG, имеющие атрибут ALT, и заключить их в рамку можно записать IMG[ALT]{border:3px solid red;}

Простой выбор атрибутов Для того чтобы выделить полужирным шрифтом элементы, содержащие какую-либо информацию в атрибуте TITLE, которую большинство браузеров отображает как «всплывающую подсказку» при прохождении курсора над элементом, можно написать: *[title]{font-weight:bold}

Простой выбор атрибутов Аналогичным образом можно оформить только те элементы А, в которых есть атрибут HREF. Также можно осуществить выбор на основании наличия нескольких атрибутов. Это делается путем простого объединения селекторов атрибутов. Чтобы выделить полужирным шрифтом текст любой гиперссылки HTML, которая имеет атрибут HREF и атрибут TITLE, можно написать: A[HREF][TITLE] {font-weight:bold}

Выбор на основании конкретного значения атрибута (1) В дополнение к выбору элементов по атрибутам можно сузить выбор до атрибутов, которые имеют определенное значение. Например, нужно выделить полужирным шрифтом гиперссылку, указывающую на определенный документ. Это могло бы выглядеть примерно так: a[href=”http://adres.net/about.html”] {font-weight:bold} Для любого элемента можно определить любое сочетание атрибута и значения. Однако если эта конкретная комбинация не встретится в документа, селектор не выберет ничего.

Выбор на основании конкретного значения атрибута (2) Как и в случае с выбором атрибутов, можно объединить несколько селекторов, чтобы выбрать один элемент. Например, чтобы удвоить размер шрифта любой гиперссылки, у которой атрибут HREF имеет значение http://www.w3.org/ и атрибут title имеет значение W3C Home, можно написать a[href=”http://www.w3.org/”][title=” W3C Home ”]{font-size:200%}

Выбор по частичному значению атрибута (1) Любой атрибут, допускающий наличие разделенного пробелами списка слов, допускает и выбор на основании любого из этих слов. Классический пример в HTML – атрибут CLASS, значением которого может быть несколько разделенных пробелами слов. Например:

При работе важно содержать в порядке рабочее место

Выбор по частичному значению атрибута (2) Допустим, требуется задать стиль абзацев, атрибут CLASS которых содержит слово warning. Это можно сделать посредством следующего селектора атрибутов: p[class~=”warning”]{font-weight:bold;} Обратите внимание на наличие в селекторе тильды (~). Именно этот символ синтаксически задает выбор по одному из значений атрибута (значения атрибута представляют собой список разделенных пробелами слов).

Выбор по частичному значению атрибута (3) Эта конструкция селектора эквивалентна обозначению классов с помощью предшествующей точки. Таким образом, записи p.warning и p[class~=”warning”] эквивалентны в случае применения к HTML-документам. Естественно, нужно помнить, что точечная нотация может быть применена только к атрибуту CLASS, а селектор с ~= может быть применен к любому атрибуту.

Выбор по частичному значению атрибута (4)

Выбор конкретного атрибута Данный тип селектора имеет форму [атрибут|=”значение”] и позволяет отобрать атрибуты по ”значению” или значению со знаком минус в конце. Допустим, в HTML-документе имеются наборы рисунков, каждый из которых хранится в файле с именем, например, figure-1.gif или figure-3.gif. Все эти изображения можно выбрать посредством следующего селектора: img[src|=”figure”]{border:1px solid gray}

Селекторы, связанные со структурой документа

Раздел 1

1. Пушки А.С.
• Руслан и Людмила
• Медный всадник
2. Достоевский
   • Идиот
   • Преступление и наказание

Селекторы потомков Определение селекторов потомков – это создание правил, действующих лишь в рамках заданной структуры. Например, требуется задать стили только для тех элементов em, которые происходят от элементов h1 Можно задать атрибут class для каждого элемента em, находящегося в h1, но эта процедура практически настолько же длительная, как и применение тега font. Очевидно, намного эффективнее объявить правила, которые соответствуют только элементам em, находящимся внутри элементов h1. Для этого напишем следующее: h1 em {color:gray;} Это правило сделает серым любой текст элемента em, который является потомком элемента h1. Текст других элементов em, например находящихся в абзаце или блоке, не будет выбран этим правилом.

Выбор дочерних элементов В некоторых случаях не требуется выбирать любой элемент-потомок; напротив, необходимо сузить диапазон выбора до дочернего элемента другого элемента. Предположим, надо выбрать элемент strong, только если он является дочерним элементом (а не просто потомком) элемента h1. Для этого используется символ-комбинатор селектора дочерних элементов, которым является символ «больше» (>): h1 > strong{color:red;} Это правило сделает красным элемент strong для первого из следующих далее h1 и не сделает для второго:

Это очень важно

Это действительно очень важно

Выбор сестринских элементов Скажем, требуется оформить абзац, находящийся в дереве документа на одном уровне с заголовком, или создать специальное обрамление для списка, стоящего на одном уровне с абзацем. Чтобы выбрать элемент, расположенный на одном уровне с другим элементом и имеющий того же родителя, применяется комбинатор селектора сестринских элементов, представляемый в виде знака плюс (+). Как и комбинатор селектора дочерних элементов, этот символ может быть окружен пробелами. Чтобы удалить верхний отступ абзаца, непосредственно следующего за элементом h1, запишем: h1 + p {margin-top:0;} Этот селектор означает следующее: «выбираем любой абзац, расположенный непосредственно за элементом h1, имеющим общих родителей с элементом p».

Селекторы псевдоклассов и псевдоэлементов a:visited{color:red} CSS 2.1 определяет два псевдокласса, которые применяются к гиперссылкам.

Псевдоклассы ссылок

Почему нужен псевдокласс link? a {color:blue} a:visited{color:red} Якорь 4. Таблицы станет голубым.

Сочетание псевдоклассов с классами стилей Моя начальная страница Другая начальная страница Чтобы применить к внешней ссылке ее собственные стили, достаточно такого правила: a.external:link, a external:visited{color:maroon} Это правило сделает вторую ссылку предыдущей разметки красно-коричневой, тогда как первая ссылка будет сохранять стандартный для гиперссылок цвет. Аналогичный синтаксис применяется и для селекторов идентификаторов: a#footer-copyright:link{font-weight:bold;} a#footer-copyright:visited{font-weight:normal;}

Динамические псевдоклассы

Применение динамических псевдоклассов к элементам, не являющихся ссылками Input:focus {background:silver;font-weight:bold}

Выбор первого дочернего элемента :first-child