Лекция 3. Создание статического содержания. CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки
Разделение содержания (написанного на HTML или другом языке разметки) и представления (написанного на CSS)
Предложено Хокон Виум Ли в 1994 году
CSS2 –12 мая 1998 года

2

Несколько дизайнов страницы для разных устройств просмотра
Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл
Простота последующего изменения дизайна
Дополнительные возможности оформления (например, можно сделать так, чтобы меню было всегда видно при прокрутке страницы)

3

Различное отображение верстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS
Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и серверный код, которые сложным и ненаглядным способом связаны с селекторами CSS, что значительно увеличивает время редактирования и тестирования

4

5

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



Таблица глобальных стилей



Внутренние стили

Текст

6

Селектор –имя стиля, в котором указаны параметры форматирования
Селектор {
свойство1: значение;
свойство2: значение;
...
}

7

Селекторы тегов – определение стиля тега
Тег { свойство1: значение; свойство2: значение; ... }
Класс – определение стиля для индивидуального элемента или разных стилей для одного тега
Тег.Имя класса { свойство1: значение; свойство2: значение; ... }
Идентификатор – уникальное имя элемента.
#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

8

Контекстные селекторы
Тег1 Тег2 { свойство1: значение; свойство2: значение; ... }
Соседние селекторы
Селектор 1 + Селектор 2 { свойство1: значение; свойство2: значение; ... }
Дочерние селекторы
Селектор 1 > Селектор 2 { свойство1: значение; свойство2: значение; ... }
Селекторы атрибутов (со значением)
[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля }

9

Универсальный селектор
* { свойство1: значение; свойство2: значение; ... }
Группирование
Селектор 1, Селектор 2, ... Селектор N { свойство1: значение; свойство2: значение; ... }

10

Наследование – перенос правил форматирования для элементов, находящихся внутри других
Псевдоклассы – определение динамического состояние элементов
Элемент:Псевдокласс { свойство1: значение; свойство2: значение; ... }
Псевдоэлементы – задание стиля логических элементов, не определенных в дереве элементов документа
Селектор:Псевдоэлемент { свойство1: значение; свойство2: значение; ... }

11

12

Доменное имя – символьное имя домена
Домен – область иерархического пространства доменных имен сети Интернет, которая обозначается уникальным доменным именем
Доменная зона – совокупность доменных имен определенного уровня, входящих в конкретный домен

13

Хостинг (hosting) – услуга по предоставлению дискового пространства для физического размещения информации на сервере, постоянно находящемся в сети (обычно Интернет)
Платный и бесплатный хостинг

14