Популярные CSS теги

Подробности

Категория: Блочная html-верстка

Здесь я решил собрать в кучку некоторые подсказки по синтаксису CSS, которыми сам пользуюсь часто:

1. Свойства шрифтов.

font-family — семейство шрифтов. Обычно пишется так:

font-family: verdana, arial, sans-serif;

То есть, на выбор предложено в порядке убывания либо шрифт Вердана, либо Ариал, либо любой другой без засечек. Слово sans-serif как раз и означает, что без засечек. Делается такая запись по той причине, что на

компьютере посетителя нашего сайта может вдруг не оказаться какого-то из указанных шрифтов. Тогда браузер выберет что-то похожее и близкое.

font-style — стиль написания шрифта. Может быть как normal, так и italic — наклонный.

Пример: font-style: italic;

font-weight — normal или bold. Соответственно, нормальный либо жирный.

Пример: font- weight: bold;

font-size — размер шрифта. Указывается обычно либо в процентах, либо в относительных величинах em, либо в пикселях px.

Примеры: font-size: 120%; или font-size: 1.2em; или font-size: 14px;

2. Свойства текста.

text-align — выравнивание текста. Значения могут быть следующие: left, right, center, justify. О последнем я уже упоминал — это равномерное распределение слов в строке.

text-indent — «красная строка». Указывается либо в % либо в пикселях. line-height — высота строки. Весьма полезная фишка, когда надо выровнять разнокалиберный шрифт.

3. Свойства цвета и фона.

color — задает цвет шрифта. Задается шестнадцатиричным числом вида #000000. Как я уже и говорил ранее, при одинаковых числах в парах можно делать сокращенную запись #000.

Пример: color: #fff; или color: #f4f5f7;

background — фон. Если мы не используем какую-либо картинку в качестве фона, то задаем так же, как и цвет для шрифта:

background: #fff;

Если используем картинку, то все равно указываем фоновый цвет.

Например:

background: #333 url(images/bg.gif) no-repeat;

Это нужно на тот случай, когда посетитель намеренно отключает картинки в браузере.

4. Свойства рамки.

border — рамка. Имеет толщину, цвет, фактуру и местоположение.

Обычно пишется таким образом:

border: #333 solid 1px; — запись означает, что рамка темно-серого цвета, сплошная, толщиной в 1

пиксель. Другие значения фактуры: dotted — точечная, dashed — пунктирная, double — двойная (у этой толщина должна быть никак не меньше 3 пикселей, иначе выйдет одинарная).

Местоположение рамки также легко обозначить в правилах:

border-top — вверху

border-bottom — внизу. Ну и справа, слева понятно тоже как.

Можно задать цвет или толщину рамки сразу для всех 4 сторон объекта.

Например запись:

border-color: #ccc #f4f5f7 #333 #000; — означает, что цвет верхней рамки светло-серый (#ccc), справа #f4f5f7, снизу #333, слева #000. Точно так же можно задать и толщину. Здесь те же правила, что и в случае с отступами и полями, о которых мы говорили в уроке.

5. Свойства списков.

Задается свойство следующей строкой:

list-style-type:

У маркированного списка маркеры могут быть следующего вида:

disc — круг

circle — окружность square — квадрат none — отсутствует либо, если мы хотим использовать свой рисунок маркера, то так:

list-style-image: url(bullet.gif);

Понятно, что картинка bullet.gif уже должна существовать в папке с вашим сайтом.

Для нумерованных списков можно также задать различное отображение номеров:

lower-roman — римские цифры в нижнем регистре

upper-roman — то же, но в верхнем регистре

none — отсутствует.

6. Свойства изображений.

Пару слов об обтекании рисунка текстом. На самом деле нет ничего сложного. В листе стилей пишем class, для которого указываем необходимое направление обтекания и отступы для рисунка. Например, чтобы рисунок оставался на странице слева, а текст обтекал его справа, пишем следующий код:

.pic {

float: left;

margin: o 10px 10px 0;

}

Это означает, что для любого рисунка с примененным к нему классом pic, обтекающий текст будет располагаться справа, причем сам рисунок будет плотно прилегать кверху с слева к блоку, а справа и снизу у него будут отступы по 10 пикселей.

И еще несколько полезных ссылок:

Чтобы проверить правильно ли вы оформили страницу и лист стилей, можете загрузить их прямо со

своего компа на сайт валидаторов и получить развернутое сообщение об ошибках, если таковые

имеются.

Для проверки HTML-кода топаем на validator.w3.org

Для проверки CSS идем на jigsaw.w3.org

На этом все! Следите за новостями на сайте Websovet.Com ибо не за горами новая книга о блочной верстке и CSS «Средний уровень» — вариант для продвинутых верстальщиков.