Введение в CSS

By | 31.08.2012

Сегодня мы поговорим с вами о таблице каскадных стилей — CSS. С помощью таблицы стилей в шаблоне можно изменить почти все аспекты внешнего вида блога. Некоторые наиболее распространенные шаги перечислены ниже. Более подробные инструкции и примеры есть на сайтах Примеры CSS от W3 Schools и Введение в CSS от W3C.

В наших шаблонах по умолчанию вся информация CSS размещена сверху, между тегами <style></style>. Вы увидите некоторое количество строк, которые выглядят примерно так:

CSS шаблона

Подсвеченная строка определяет стиль, который применяется ко всем тегам <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>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Category: CSS

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.