Здесь я решил собрать в кучку некоторые подсказки по синтаксису 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 «Средний уровень» — вариант для продвинутых верстальщиков.
Реклама |
---|
Подробная информация Ремонт газонокосилок husqvarna в Москве у нас. |