Прежде чем начать описание, хочу выразить Вам свою признательность и выдать медаль! Раз вы уже дошли до этого раздела, значит, основные трудности позади. Итак CSS. Если на Вашем сайте нет CSS, считайте что Вам не повезло (не относиться к сайтам на WordPress. И вообще, у кого сайт построен на WordPress, можно это не читать!) CSS (Cascading Style Sheets) – это таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц. «Увлекательное» путешествие по CSS можно посмотреть в видео уроках Евгения Попова Здесь мы покажем, что можно редактировать, и как это влияет.
Если у вас в шаблоне присутствует файл с расширением CSS (название файла.css), то переходим к его редактированию.
Если нет, то создаем в «блокноте» файл «style.css» и едем читать учебник!
Проверяем (на ВСЕХ страницах, если писали HTML вручную) в <HEAD> должна присутствовать строка: <link href="style.css" type="text/css" rel="stylesheet">
Обзаводимся бесплатной программой редактирования CSS. Скачать ее можно здесь!
Приступаем к редактированию. Что можно описать:
Общее форматирование страницы (BODY)
Шрифты
Форматирование текста
Параграф
Таблицы
Картинки
Ссылки
Списки
Блоки, div, span
Общее форматирование страницы (BODY)
Color Устанавливает цвет шрифта.
background-color Устанавливает цвет фона. Не только документа. Можно установить цвет фона ссылки, блока, абзаца, заголовка и т.д.
background-image Определяет вставку фонового изображения.
background-repeat Назначает повтор фонового изображения. По умолчанию это свойство имеет значение repeat. Кроме того, оно может принимать значения: repeat-x (повторять только по горизонтали), repeat-y (повторять только по вертикали), no-repeat (вообще не повторять).
Background Если задан фоновый рисунок, то свойство background определит, прокручивать ли фон вместе с документом или нет. Свойство может принимать значения scroll (прокручивает фон) -- это значение по умолчанию, или fixed (не прокручивать фон, выглядит довольно симпатично).
Шрифты
font-size Определяет размер шрифта Значение может быть абсолютным, относительным, и кроме этого размер можно задать с помощью размерных выражений: xx-small (сверхмелкий) x-small (очень мелкий) small (мелкий) medium (средний) large (крупный) x-large (очень крупный) xx-large (сверхкрупный) larger (крупнее) smaller (мельче)
font-style Задает стиль вывода символов. Значения могут быть следующими: normal (обычный), italic (курсив), oblique (наклонный)
font-weight Назначает вес (степень жирности) шрифта. В качестве значения можно использовать целые числа от 100 до 900с шагом 100 единиц, но чаще всего используют ключевые слова: bold (жирный), bolder (более жирный), lighter (более тонкий).
font-variant Указывает вариант начертания текущего шрифта. Это свойство может иметь только два значения: small-caps (ОТОБРАЖЕНИЕ МАЛЫМИ ПРОПИСНЫМИ БУКВАМИ) и normal (не влияет на отображение)
Форматирование текста
letter-spacing Устанавливает межсимвольный интервал (расстояние между буквами). Расстояние можно указывать в абсолютных величинах.
word-spacing расстояние между словами. Указывается в абсолютных величинах
text-indent Задает отступ первой строки абзаца. По умолчанию равно нулю. Если задать отрицательное значение, то первая строка будет выступать.
text-align Задает горизонтальное выравнивание. Может принимать значения: center (по центру), left (влево), right (вправо), justify (по ширине). По умолчанию текст выравнивается по левому краю.
vertical-align Устанавливает расположение содержимого документа по вертикали. Может принимать значения: baseline (по базовой линии) -- по умолчанию, sub (по линии нижнего индекса), super (по линии верхнего индекса).
line-height Межстрочный интервал. Значение можно задать в абсолютных единицах, в процентах, количеством строк (например, 3; 2.5)
Ссылки
Link Просто определяет стиль ссылки, которая еще не посещалась.
Active Определяет стиль активной (т.е. гиперссылкам, на которых находится фокус ввода пользователя) ссылки.
Hover Определяет стиль ссылки при наведении указателя мыши.
Visited Определяет стиль посещенной ссылки.
Атрибуты могут быть:
Color – цвет ссылки Text-decoration - задает специальное оформление текста: none; - отменяет любое специальное оформление underline; - подчеркивает текст overline; - черта сверху текста; line-through; - зачеркивает blink; - мигание текста (отсутствует в IE)
Списки
list-style-type - задает тип маркера или номер позиции списка disc; - (значение по умолчанию) отображает сплошной кружок; circle; - окружность; square; - сплошной квадрат; decimal; - нумерует позиции арабскими цифрами; lower-roman; - малыми римскими; upper-roman; - большими римскими; lower-alpha; - помечает позиции малыми латинскими буквами; upper-alpha; - большими латинскими; none; - вообще убирает маркер или нумерацию.
list-style-image Задает маркер в виде картинки
list-style-position Устанавливает позицию маркера в строке списка. Может принимать два значения: inside (маркер находится внутри области списка) и outside по умолчанию (маркер находится за пределами области строки списка).
Блоки
Margin Задает поле вокруг блока. Можно задать поля отдельно: margin-top (верхнее поле), margin-right (правое поле), margin-left (левое поле), margin-bottom (нижнее поле).
Border Набор свойств для отображения границы элемента. Свойства border-color, border-width служат для задания цвета и ширины границы (для каждой границы можно задать отдельно: border-top-width, border-right-width, border-top-color, border-left-color и т.д.) Свойство border-style управляет выводом границы. Может принимать значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset (точками, пунктиром, сплошной линией, двойной линией и т.д.) Также можно задать для каждой границы отдельно (border-bottom-style и т.п.)
Padding Определяет просвет между содержимым блока и границей. Можно задать для каждой границы отдельно (padding-top, padding-left и т.д.)
width и height Определяет ширину и высоту.
Float Определяет размещение текущего элемента по горизонтали по отношению к внешнему элементу. Если это свойство задано для рисунка, за которым следует текстовый блок, то float будет задавать обтекание рисунка текстом. Может принимать значения left, right, none.
clear Отменяет действие свойства float. Если было задано размещение рисунка вдоль левой границы с обтеканием текстом, то clear: left отключит это обтекание.
