Введение в CSS. Базовый синтаксис CSS селектор { свойство1: значение; свойство2: значение; } селектор некоторое имя стиля, для которого добавляются параметры. - презентация

1 Введение в CSS

2 Базовый синтаксис CSS селектор { свойство1: значение; свойство2: значение; } селектор некоторое имя стиля, для которого добавляются параметры форматирования

3 Пример использования стилей Заголовки h1 { color: #a6780a; font-weight: normal; } h2 { color: olive; border-bottom: 2px solid black; } Заголовок 1 Заголовок 2

4 Способы добавления стилей на страницу 1.Внутристрочная стилевая информация. 2.Использование элемента STYLE в разделе HEAD HTML–документа. 3.Определение внешних стилевых таблиц.

5 Внутристрочная стилевая информация. Атрибут style Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. ________________________________ Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial.

6 Использование тэга style в разделе HEAD HTML–документа. … p {color: green; font-weight: bold; font-family: Arial;} Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial. _____________________________________________ Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial.

7 Определение внешних стилевых таблиц. Тэг link … Заголовок Текст документа…

8 Определение внешних стилевых таблиц. Стилевой файл H1 { color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; }

9 Преимущества стилей Разграничение кода и оформления Разное оформление для разных устройств Расширенные по сравнению с HTML способы оформления элементов Ускорение загрузки сайта Единое стилевое оформление множества документов Централизованное хранение