Cascading Style Sheets (CSS)

Расшифровка CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного на HTML

Возможности Упрощение работы с документом Изменения оформления сайта (станиц) одним действием Изменение документа после его загрузки (Dynamic HTML+JavaScript) Дополнительные возможности оформления (которых нет в HTML)

Определения Стиль – это правило, указывающее браузеру, как выводить на экран содержимое какого-то определенного тега. Каскадная таблица стилей — это текстовый файл, обычно сохраняемый с расширением .сss

Пример стиля h1 { color: blue; font-style: italic; } h2 { color: #00FF00; font-style: italic; }

Действие стилей В рамках одного элемента (встроенный); В рамках документа (внутренний); Множества документов (внешний файл с расширением .css)

Встроенный стиль (inline) Это простейший способ применения стиля к тегу. Для этого используется атрибут style

Заголовок синий курсив

Стиль в документе (Global) Таблицы стилей на уровне документа задаются с помощью тега … Атрибут type=“text/css” указывает, что используются стили каскадных таблиц стилей.

Внешняя таблица стилей (Linked) Внешние таблицы стилей – это отдельные файлы с расширением .css, в которых записаны правила оформления тегов.

Подключение таблицы Для подключения таблицы используется тег . Обязательные атрибуты тега: 1. rel = “stylesheet” – отвечает за установку взаимосвязи html-документа и css-таблицы 2. type=“text/css” – описывает тип данных в таблице стилей 3. href=“URL” – адрес может быть относительным или абсолютным: href=“my_styles.css” href=“http://www.meyrweb.com/sheett.css”

Пример подключения

Преимущество перед тегами HTML Пусть, нужно сделать все заголовки h2 серыми. В HTML:

Заголовок

Основные правила CSS

Структура правила

Описание Селектор – это чаще всего (но не всегда) – элемент HTML – h1, p, table P {color: silver;} В блок объявлений входит одно или несколько объявлений. После : и ; может быть произвольное количество пробелов. Значение – это либо одно ключевое слово, либо несколько допустимых ключевых слов, разделенных пробелами: P { font: medium Helvetica; } Если указать неверное свойство или значение – все объявление будет проигнорировано целиком.

Группировка Допустимо группировать селекторы и объявления: h1, h2, h3 {color: purple;} h4, p {color: silver; background: green;} Селекторы разделяются “ , ”, а объявления - “ ; ” h1, p { font: helvetica; color: purple; background: aqua; }

Виды селекторов Тег (H1, P, TABLE) Идентификатор (#main_text, #menu) Классовый (p.figure, .figure)

Идентификатор Создание идентификатора стиля: #main_menu {color: silver; background: green;} Использование идентификатора стиля:

…

Единицы измерения

Цвета и фон Цвет элемента задается свойством color P { color: red;} Цвет можно задавать и 16-ричным кодом: p { color: #f80b12;} Это свойство является наследуемым. Фон задается свойством background-color div {background-color: silver;}

Фоновые изображения Фоновые изображения Свойство background-image Body {background-image: url(p1.jpg);} Фоновый рисунок можно применять практически к любому элементу: h1 {background-image: url(p1.jpg);}

Рамки Рамки рисуются поверх фона элемента. Чтобы зарисовать рамку нужно задать ее стиль. Свойство border-style Значения: none – нет ( по умолчанию!!!) solid – сплошная hidden – скрытая double – двойная dotted – в виде точек inset – вдавленная dashed – в виде тире outset – выпуклая H1 { border-style : outset; } Допустимо задавать несколько стилей: H2 { border-style: solid dashed none double; } Свойства задания стиля рамок для одной стороны Border-top-style; border-right-style; Border-bottom-style; border-left-style.

Рамки Ширина рамки Свойство border-width Значения px По умолчанию ширина = 2-3 px. Процентные значения для рамок не допускаются. Цвета рамок Свойство border-color Значения цвет (Red, Blue, Yellow, #123456)

Основные свойства font-family: ArialBlack; - Определяет шрифт элемента font-style:normal | italic | oblique - Стиль шрифта элемента text-align:left | right | center | justify – выравнивание text-decoration:none | underline | overline | line-through | blink - Оформление текста, underline - подчёркивание, overline - надчёркивание, line-through - зачёркивание, blink - мерцание.

Основные свойства padding – поля вокруг текста в px margin-left (right)– отступ слева(справа) в px margin-top (bottom)– отступ сверху (снизу) в px float – обтекание текстом (float:left – обтекание по правому краю; float:right – по левому)

Заключение Всего в спецификации определено более сотни атрибутов. Использование CSS позволяет: Перейти к динамическим страницам Упростить работу с оформлением сайта