Сегодня мы поговорим с вами о таблице каскадных стилей — CSS. С помощью таблицы стилей в шаблоне можно изменить почти все аспекты внешнего вида блога. Некоторые наиболее распространенные шаги перечислены ниже. Более подробные инструкции и примеры есть на сайтах Примеры CSS от W3 Schools и Введение в CSS от W3C.
В наших шаблонах по умолчанию вся информация CSS размещена сверху, между тегами <style></style>. Вы увидите некоторое количество строк, которые выглядят примерно так:
Подсвеченная строка определяет стиль, который применяется ко всем тегам <h3> в блоге. Дальше речь пойдет об опциях, с помощью которых его можно изменить. Любые фрагменты приведенного ниже кода можно вставить между { фигурными скобками } в таблице стилей.
| Код | Примеры | |
| Цвета | ||
|---|---|---|
color:blue; |
Этот текст голубой. | |
background:yellow; |
Это текст на желтом фоне. | |
| Здесь можно использовать названия многих распространенных цветов (например, красный, зеленый, желтый) или шестнадцатеричные коды, чтобы точнее задать оттенок (например, #0033AA). | ||
| Рамки | ||
border:solid 1px red; |
Это текст в красной рамке.
|
|
| Рамка может быть сплошной, точечной или пунктирной. Ширина задана в пикселях (px). Цвета можно задавать названиями или шестнадцатеричными кодами. Чтобы отображалась только одна сторона рамки, используйте код border-top (сверху), border-bottom (снизу), border-right (справа) или border-left (слева). | ||
| Шрифты | ||
font-family:"Times New Roman",Serif; |
Этот текст написан шрифтом Serif. | |
font-family:Verdana,Sans-Serif; |
Этот текст написан шрифтом Sans-serif. | |
| Можно составить список вариантов шрифтов. Если окажется, что первый из них не установлен у читателя на компьютере, то будет использован второй и т.д. Если указать «Serif», то будет использоваться любой доступный шрифт из этой группы. | ||
font-size:24px; |
Этот текст написан шрифтом высотой 24 пикселя. | |
| Размер можно указывать в пикселях (px), точках (pt), дюймах (in) или процентах от размера по умолчанию (%). | ||
font-weight:bold; |
Этот текст выделен полужирным. | |
| Доступные варианты — полужирный и обычный. | ||
text-decoration:underline; |
Этот текст подчеркнут. | |
| Возможные значения настройки оформления текста — none (нет), underline (подчеркивание), overline (черта сверху) и line-through (зачеркивание). Эти варианты обычно используются, чтобы ссылки не были подчеркнуты. | ||
text-align:right; |
Этот текст выровнен по правому краю.
|
|
| Текст можно выравнивать по левому или правому краю или по ширине. | ||
| Поля и отступы | ||
margin:15px; |
У этого текста со всех сторон поля величиной 15 пикселей.
|
|
padding:15px; |
У этого текста со всех сторон отступы величиной 15 пикселей.
|
|
И поля, и отступы определяют количество свободного пространства вокруг элемента. Разница заключается в том, что поля находятся за рамкой, а отступы — внутри. Рамка здесь показана просто для наглядности).Эти настройки тоже можно указать для каждой стороны отдельно, например, margin-left (поле слева), padding-top (отступ сверху) и т.д., или для всех одновременно. В последнем случае код будет выглядеть так: margin:1px 2px 3px 4px;, а порядок сторон в нем — верхняя, правая, нижняя, левая. |
||
Примечания.
Стили можно использовать и в теле сообщения, если нужно отформатировать только один определенный фрагмент текста. Формат должен быть таким:
<span style="color:red;">Этот текст будет написан красным.</span>