Лекция_4

1.

Разработка сетевых
информационных ресурсов
Лекция 4. Введение в CSS
Глотова М.И.

2. Содержание

1. Понятие стиля
2. Способы подключения стилей
3. Типы стилей
4. Синтаксис таблиц стилей. Виды селекторов

3.

Понятие стиля в HTML-документах
3
Каскадные таблицы стилей, CSS (Cascading Style Sheets)
– язык, содержащий набор свойств для описания внешнего вида
любых HTML-документов.
Набор свойств записывается в виде правил, которые
определяют как некоторый элемент HTML должен выглядеть в
окне браузера или на другом устройстве вывода.
Преимущество: таблица стилей единожды описывает
специфический формат, присваивает ему имя, и далее он
употребляется там, где потребуется. Действие таблиц стилей может
распространяться как на конкретный элемент, так и целиком на
страницу, или даже множество страниц сразу.
CSS – средство разделения логической структуры документа и
формы его представления: логическая структура определяется
элементами HTML-разметки, форма представления каждого из
этих элементов задается CSS-описанием элемента.

4.

Понятие стиля в HTML-документах
4
Стиль (style) является лишь правилом, сообщающим браузеру,
как интерпретировать отдельные теги HTML. С каждым тегом связан
ряд свойств, значения которых определяют его вид при выводе
браузером.
Описание стиля включает:
cелектор_тега
{
cвойство_стиля1: значение1;
cвойство_стиля2: значение2;
cвойство_стиля3: значение3;
………………………………………
}
Примеры:
h1 {color: green;}
p {font-size: small; font-family: sans-serif;}

5.

Понятие стиля в HTML-документах
5
Свойства таблиц стилей условно можно разделить на
группы:
управляющие видом шрифта (гарнитура, кегль, цвет, наклон,
жирность);
управляющие форматированием абзаца (отступ красной строки,
выравнивание, интерлиньяж, расстояние между словами);
управляющие свойствами блока (отступы слева-сверху-справаснизу, местоположение блока в документе, видимость блока);
другие (цвет ссылок, изменение внешнего вида курсора и т.д.).
Особенность стилей – каскадность.
Cascading Style Sheets (Таблицы Каскадных Стилей)- это
язык, содержащий набор свойств для описания внешнего вида любых
HTML-документов.
Для одного документа могут быть заданы различные правила.

6.

Понятие стиля в HTML-документах
6
Свойство каскадности тесно связано со способом подключения
стилей к документу.
Способы подключения стилей:
inline-описание (внедренные стили, встроенные с помощью
атрибута style в теги документа);
описание в секции заголовка HTML-документа (внутренние стили,
перечисленные в теге <style> в заголовке документа);
использование внешнего файла (внешние или связанные стили,
присоединенные в html-файлу с помощью тега <link>).
На практике применяются все три способа, где используется
«каскадность», позволяющая переопределять стили.

7.

Пример использования стилей в HTMLдокументах
7

8.

Пример использования стилей в HTMLдокументах
8
Описание стилевого
файла style.css.
Сам код HTML никаких
изменений не претерпел и
единственное добавление — это
строка <link rel="stylesheet"
href="style.css">. Она ссылается на
внешний файл с описанием стилей
под именем style.css.

9.

Понятие стиля в HTML-документах
Версии CSS
9
Первая реализация CSS была разработана в 1996 году, выпущена в
1999 году и к 2001 была поддержана всеми выпусками браузеров;
стандарт для этой версии, CSS1, был пересмотрен в 2008 году;
Вторая спецификация CSS2 началась разрабатываться в 1998 году,
ее стандарт был завершен в 2007 году и еще пересмотрен в 2009;
Разработка спецификации CSS3 началась в 2001 году, а
предложена сравнительно недавно, в 2009 году; разработка на момент
2018 года еще не завершена; начали поступать предложения для
спецификации CSS4.
Спецификация CSS4 (не существует единой интегрированной
спецификации, потому что спецификация была разделена на
множество отдельных модулей, которые работают независимо).

10.

Понятие стиля в HTML-документах
Типы стилей
10
Различают типы стилей, они
могут одновременно
подключаться к одному
документу:
стиль браузера;
стиль автора;
стиль пользователя.

11.

Синтаксис таблиц стилей
Виды селекторов. Селектор типа
11
Правило (rule) состоит из селектора и блока деклараций,
заключенного в фигурные скобки.
Общий формат: selector {propeties}.
На сегодняшний день в CSS3 используются следующие основные
виды селекторов:
селектор типа;
селектор класса;
ID-селектор;
контекстный селектор (селектор потомков);
селектор дочерних элементов
соседний селектор (смежных элементов);
универсальный селектор;
Селектор типа (Selestors) переопределяет действие
стандартных тегов HTML, таких как <h1>, <p> и т.д.
Любой элемент HTML – это возможный CSS-селектор. Свойства
селектора определяют стиль элемента, для которого он определен.
h1 {color: red; size: 20pt;}
h1, h2, h3, p {color: green; font-style: italic;}

12.

Синтаксис таблиц стилей
Виды селекторов. Селектор класса
12
Селектор класса (Class Selectors) не связан со
специфическим HTML-тегом, может быть применен к любому
элементу.
Для этого используется атрибут class= "myclass".
Синтаксис: селектор.класс {свойства}
h1.blue {color: blue; size: 20pt;}
.myclass{margin-left: 10px;}

13.

Синтаксис таблиц стилей
Виды селекторов. Селектор класса
13

14.

Синтаксис таблиц стилей
Виды селекторов. ID-селектор
14
ID-селектор (ID Selectors) или селектор-идентификатор
определяет свойства отдельных элементов на странице.
Идентификатор определяет уникальное имя элемента, которое
используется для изменения его стиля и обращения к нему через
скрипты (id="mydiv"). С его помощью можно создавать
стилистические исключения среди элементов одного класса.
Синтаксис: #идентификатор {свойства}
#mydiv{font-style: italic;}

15.

Синтаксис таблиц стилей
Виды селекторов. ID-селектор
15
Повторное использование идентификаторов
<div id="myid“>Привет</div>
<span id="myid“>Привет</span>
Следующее правило задает подчеркивание только первому
появлению myid:
#myid {text-decoration:underline;}
Для того, чтобы
правило в CSS применялось к обоим
появлениям данного идентификатора, необходимо:
div#myid {text-decoration:underline;}
span#myid {text-decoration:underline;}
или
div#myid, span#myid{text-decoration:underline;}
Групповая селекция – возможность одновременного
применения правила более чем к одному элементу, классу или
любому другому типу селектора путем разделения селекторов
запятыми.

16.

Синтаксис таблиц стилей
Виды селекторов. Селектор потомков
16
Контекстный селектор
(Contextual Selectors) или
селектор потомков позволяет применить стили к элементам
внутри других элементов. Стиль задается только элементам в
заданной последовательности в зависимости от каскадного порядка.
Например, p b{color: red;}. Вложенность селекторов может
продолжаться до бесконечности.
Например, ul li b{color: blue;}.

17.

Синтаксис таблиц стилей
Виды селекторов. Селектор дочерних элементов
17
Дочерним называется элемент, который непосредственно
располагается внутри родительского элемента.
Селектор дочерних элементов конкретизирует область
применения стиля, выбирая только те элементы, которые являются
непосредственными дочерними элементами другого элемента.
Синтаксис применения дочерних селекторов:
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если
он является дочерним для Селектора 1.
Например, p > b{color: red;}.

18.

Синтаксис таблиц стилей
Виды селекторов. Селектор дочерних элементов
18

19.

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

20.

Синтаксис таблиц стилей
Виды селекторов. Селектор дочерних элементов
20

21.

Синтаксис таблиц стилей
Виды селекторов. Селектор дочерних элементов
21

22.

Синтаксис таблиц стилей
Виды селекторов. Соседний селектор
22
Соседними называются элементы веб-страницы, когда они
следуют непосредственно друг за другом в коде документа.
<p>Lorem ipsum<b>dolor</b><var>sit</var>amet.</p>
Синтаксис применения соседних селекторов:
Селектор 1 + Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если
он является соседним для Селектора 1 и следует сразу после него.
Например, i + b{color: gray;}.

23.

Синтаксис таблиц стилей
Виды селекторов. Соседний селектор
23

24.

Синтаксис таблиц стилей
Виды селекторов. Соседний селектор
24
Запись
H2.sic+P
устанавливает стиль только
для
первого
абзаца,
идущего после тега <h2>, у
которого добавлен класс с
именем sic.

25.

Синтаксис таблиц стилей
Виды селекторов. Соседний селектор
25

26.

Синтаксис таблиц стилей
Виды селекторов. Универсальный селектор
26
Для установки единого стиля для всех элементов Web-страницы,
например, единого шрифта или начертания текста, используется
универсальный селектор.
Синтаксис применения универсального селектора:
*{ Описание правил стиля }
Например, *{border: 1px solid red;}
#boxout * em{border: 1px solid green;}

27.

Рекомендуемая литература:
1. Дронов, В.А. HTML 5, CSS 3 и Web 2.0. Разработка
современных Web-сайтов [Электронный ресурс] / В.А.
Дронов. - БХВ-Петербург, 2011. – Режим доступа:
http://znanium.com/bookread2.php?book=351455.
2. Дунаев, В. В. Web-программирование для всех [Текст]/ В.
В. Дунаев. - СПб.: БВХ-Петербург, 2008. - 560 с. - ISBN
978-5-9775-0197-2. (20 экз.)
3. Котеров, Д.В. PHP 5 / Д. В. Котеров, А. Ф. Костарев .- 2-е
изд. - СПб. : БВХ-Петербург, 2008. - 1078 с. - Предм. указ.:
с. 1062. - ISBN 978-5-9775-0315-0. (20 экз.)