Стилевое форматирование текста – CSS
CSS (Cascading Style Sheets, каскадные таблицы стилей) - это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением.
Преимущества использования CSS:
Ø Разделение оформления и содержания. Содержание веб-страницы хранится в html-файле, оформление – в css-файле.
Ø Единообразное оформление веб-страниц. Подключение одного css-файла во все html-документы сайта позволяет добиться их единообразного оформления. А при необходимости изменить оформление элементов на всех веб-страницах сайта нет необходимости изменять десятки html-документов - достаточно отредактировать только один css-файл.
Ø Расширенные возможности. Язык CSS предоставляет гораздо больше, нежели язык HTML, возможностей по оформлению веб-страниц.
Организация стилевого форматирования:
1. Во всех html-документах осуществляется подключение файла style. css: в контейнере head (между тэгами <head>и </head>) с помощью тэга <link>
<link href="style. css" rel="stylesheet" type="text/css">
2. Создается стилевой файл, например style. css, в котором указываются параметры форматирования всех элементов текста.
Способ записи CSS отличается от HTML и имеет следующий синтаксис:
Селектор { свойство1: значение; свойство2: значение; ... }
Основные типы селекторов:
Ø Тэг
p {text-align: justify; font-size: 14px} – абзацы на веб-страницах, организованные тэгом <p> будут иметь выравнивание по ширине и размер шрифта 14.
Ø Тэг. Имя класса
p. zag {text-align: center; font-size:20px} – абзацы на веб-страницах, организованные тэгом <p class=”zag”> будут иметь выравнивание по центру и размер шрифта 20.
Ø . Имя класса
.small {font-size:10px} – фрагмент текста внутри тэгов класса small (<p class=”small”>, <h6 class=”small”>, <li class=”small”> и т. д.) будет иметь размер шрифта 10.
Основные команды языка CSS
Цветовая гамма
Ø color - цвет текста.
Ø background-color - фоновый цвет.
Ø background-image: url (полное имя файла) - фоновое изображение.
Примеры:
- body {background-image: url(fon. jpg); color:#cc3}.
- p {background-color: #999; color:#f00}.
Запись цвета #00f при этом равнозначна #0000ff.
Шрифт
Ø font-family – шрифт. Пример: font-family: Georgia, 'Times New Roman', serif - использование шрифта Georgia, в случае его отсутствия на компьютере пользователя - Times New Roman, в случае отсутствия обоих – serif (семейство шрифтов с заческами).
Ø font-size – размер шрифта, который может быть выражен в следующих единицах измерения: em (высота шрифта элемента), pt (пункты), px (пикселы), % (проценты от родительского шрифта) и другие.
Ø font-style - начертание шрифта: обычное (normal), курсивное (italic) или наклонное (oblique).
Ø font-weight - насыщенность шрифта: от 100 (сверхсветлое) до 900 (сверхжирное) с шагом 100. Нормальное начертание (по умолчанию, стандартный полужирный текст - 700.
Абзац
Ø line-height - межстрочный интервал. Значения: множитель, например 1,5 – полуторный интервал или в процентах от высоты шрифта.
Ø text-align - горизонтальное выравнивание текста: left, right, center, justify.
Ø text-decoration - оформление текста: blink – мигающий текст, line-through – перечеркнутый текст, overline – линия над текстом, underline – подчеркнутый текст, none – отсутствие подчеркивания (например, для гиперссылок, у которых оно добавляется по умолчанию). Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Ø text-indent - отступ первой строки абзаца (красная строка).
Ø vertical-align – вертикальное выравнивание текста: bottom (вниз), middle (посередине), top (вверх) и другие. В качестве значения можно использовать проценты, пикселы и т. п. Положительный аргумент смещает элемент вверх относительно базовой линии, отрицательное значение опускает его вниз.
Границы
Ø border-width - толщина границы одновременно на всех сторонах элемента или индивидуально для каждой стороны (верхняя, правая, нижняя, левая).
Например, border-width: 0px или border-width: 0px 2px 4 px 2px
Ø border-style - стиль границы одновременно на всех сторонах элемента или индивидуально для каждой стороны (верхняя, правая, нижняя, левая).
Значения: dotted, dashed: пунктирная линия; solid, double – непрерывная линия; groove, ridge, inset, outset – объемная линия.
Ø border-color - цвет границы одновременно на всех сторонах элемента или индивидуально для каждой стороны (верхняя, правая, нижняя, левая).
Отступы. Поля
Ø 
margin - величина отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента. Значения разных отступов могут быть заданы и отдельно:
Ø margin-bottom (отступ от нижнего края)
Ø margin-left (отступ от левого края)
Ø margin-right (отступ от правого края)
Ø margin-top (отступ от верхнего края)
Ø padding - величина полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Значения разных полей могут быть заданы и отдельно:
Ø padding-bottom (нижнее поле),
Ø padding-left (левое поле),
Ø padding-right (правое поле),
Ø padding-top (верхнее поле).
Примеры: margin: 10px margin: 5px 0px 5px 10px padding-left: 5%
Таблицы
Ø border-collapse: collapse – одна линия между ячейками таблицы
separate – в местах соприкосновения ячеек отображаются две линии.
Ø border-spacing - расстояние между границами ячеек в таблице. Если указано одно значение оно определяет расстояние по вертикали и горизонтали. Если аргументов два, то первое определяет горизонтальное расстояние, а второе - вертикальное.
Для изменения внешнего вида гиперссылки при наведении на нее мыши: a:hover {color: #09c; background-color: #ссс}
