Cascading Style Sheets каскадные таблицы стилей CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный. - презентация

1

2 Cascading Style Sheets каскадные таблицы стилей

3 CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое. При замене 1-ой строки в css-стилях дизайн сайта может измениться в большом количестве страниц сайта.

4 Инструкции CSS лучше хранить в виде отдельного текстового файла с расширением.css(часто называется main.css) Идея CSS -отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML за содержание и логическую структуру документа.

5 Отрывок html-кода Уроки css Очень важно, нужно …………. ____________________________________ Ни слова об оформлении

6 /* оформление заголовка: */ h1 { color: red; background-color: yellow; font: Tahoma; } /* оформляем абзацы текста: */ p { color: grey; line-height: 150%; }

7 В 6 слайде описаны стили для всех заголовков и параграфов документа

8 p {}: селектор элемента соответствует всем элементам на странице с указанным названием

9 .example{}: селектор класса соответствует всем элементам, которые имеют атрибут class с указанным значением

10 в коде Web-страниц, которые будут использовать стили из.css файла, нужно сделать ссылку на него. Делается это с помощью тега, располагающегося внутри тега ваших страниц:

11 main.css находится в той же папке, что и.html файл

12 параграфу присвоен стиль класса news. Списку присвоен стиль класса news

13 СВОЙСТВА АБЗАЦА text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} A {text-decoration: none;}.wrong {text-decoration: line-through;}

14 СВОЙСТВА АБЗАЦА text-align Определяет выравнивание элемента. P {text-align: justify} H1 {text-align: center}

15 ЕДИНИЦЫ ИЗМЕРЕНИЯ pxПикселы cmСантиметры mmМиллиметры Pt Проценты %

16 СВОЙСТВА АБЗАЦА text-indent Устанавливает отступ первой строки текста. P {text-indent: 50pt;}

17 СВОЙСТВА АБЗАЦА letter-spacing Расстояние между буквами по горизонтали. P {letter-spacing: 5px;}

18 классы Ссылок A:active{} Таблица стилей для активных ссылок (при нажатии) A:link{} Таблица стилей для собственно ссылок A:visited{} Таблица стилей для посещённых ссылок A:hover {} Таблица стилей для ссылок при наведении указателя мыши

19

20 1. Создать main.css 2. Определить стили для нескольких видов параграфов(3-4) с разными шрифтами(по размеру и начертанию), отступами, расстояниями 3. Определить стили для ссылок, списков,заголовка 4.Использовать все стили на своих страницах(5-6 страниц).

21 5. tricks.com/examples/ButtonMaker/# tricks.com/examples/ButtonMaker/# Сгенерировать кнопку и получить исходный код. Сделать комментарии к 2-м строкам кода. Разместить на странице.