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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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