Базовый синтаксис, подключение к HTML-документу, устройства вывода, классы

Централизованное управление: Стилями элементов Компоновкой страниц CSS – прорыв в web-дизайне Они реализуют концепцию разделения содержания и оформления

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

В виде подключаемого css-файла Внутри HTML-заголовка (head), с помощью тега Внутри тега, с помощью атрибут style

Подключение внешнего файла Для этого служит тег в заголовке документа (). Например: rel – тип отношений type – тип подключаемого файла href – адрес (путь) CSS-файла

Описание стилей внутри элементов (тегов) Используется универсальный атрибут style, кот. есть почти у всех тегов HTML, отображаемых на странице Например:

Красные в городе!

Импорт CSS Из CSS-файла можно импортировать другой CSS-файл: @import url("имя файла") типы носителей; @import "имя файла" типы носителей;

Типы носителей All — Все типы. Это значение используется по умолчанию. Aural — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. Braille — Устройства, основанные на системе Брайля, которые предназначены для слепых людей. Handheld — Наладонные компьютеры и аналогичные им аппараты. Print — Печатающие устройства вроде принтера. Projection — Проектор. Screen — Экран монитора. Tv — Телевизор.

Подключение носителей @media тип носителя 1 { Описание стиля для типа носителя 1 } либо: @media тип носителя 2 { Описание стиля для типа носителя 2 }

Группы свойств CSS Оформление текста: color, text-align, font-wight, font-size и т.п. Параметры блоков div и др.блочных элем.: width, height, position, float, display и т.п. Отступы: margin, padding

Цвет текста color – цвет текста. Может принимать значения в шестнадцатеричном виде или в виде символьной константы-имени цвета: p { color: #ff0000; /* красный */ } h1 { color: blue; } Примечание: если две цифры компоненты цвета совпадают, то можно писать одну: #fff вместо #ffffff, #c03 вместо #cc0033;

Выравнивание текста Свойство text-align Пример: p { text-align: center; } Возможные значения: left | center | right | justify

Параметры шрифта font-family – семейство (гарнитура) шрифта: h2 {font-family: Verdana, Geneva, sans-serif;} font-size – размер шрифта p { font-size: 12pt;} h1 { font-size: 120%; } font-weight – толщина (жирность) шрифта h2 { font-weight: bold; /* полужирн. */ } text-decoration – «украшение» текста a { text-decoration: underline; /* подчёркн. */ }

Типы элементов в HTML Тип элемента влияет на способ его отображения браузером на странице Основные типы: + блочные (block) + строчные (inline) Блочные элем. занимают всю строку и не могут располагаться на одной строке с другими элементами без специальной настройки Можно менять способ отображения элементов c помощью CSS-свойства display: a { display: block; } – делает ссылку блочным элем.

Типы элементов в HTML: примеры + блочные (block) div, p, h1..h6 + строчные (inline) span, strong, em, a

Блочная модель CSS CSS box model:

Параметры элементов width, height – ширина и высота содержимого элемента (content) padding – отступ от границ до содержимого border – параметры границы margin – внешний отступ

Изменение важности элементов с помощью !important Можно использовать как авторский, так и пользовательские стили Синтаксис: Селектор { свойство: значение !important }

Варианты действий !important добавлен в авторский стиль ― будет применяться стиль автора. !important добавлен в пользовательский стиль ― будет применяться стиль пользователя. !important нет как в авторском стиле, так и ― стиле пользователя ― будет применяться стиль автора. !important содержится в авторском стиле и ― стиле пользователя ― будет применяться стиль пользователя.