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

font-family:verdana, arial, sans-serif;/*семейство шрифтов */

font- weight: bold;/*normal, либо жирный (bold), number - жирность*/

font-size:120%; font-size:1.2em; font-size:14px; /* размер шрифта. */

color: number - цвет шрифта

background-color: number - цвет подложки

background: url - текстурная подложка

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

Основные параметры абзаца

text-align: [left|right|center|justify] – выравнивание текста

text-indent: number - отступ красной строки в % либо в пикселях.

line-height: number - высота строки.

letter-spacing: number - трекинг

padding-left: number - отступ от текста слева

padding-right: number - отступ от текста справа

padding-top: number - отступ от текста сверху

padding-bottom: number - отступ от текста снизу

margin-left: number - отступ от границы слева

margin-right: number - отступ от границы справа

margin-top: number - отступ от границы сверху

margin-bottom: number - отступ от границы снизу

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

Для задания цвета фона применяется свойство background-color. Если в качестве фона использовать изображение, то применяется свойство background-image, где в значении указывается адрес и имя файла изображения. Ограничить повторение изображения в фоне можно свойством background-repeat и его значе­ниями: repeat-x (повторение по оси X), repeat-y (по оси Y) и no-repeat (без повторений). При необходимости зафиксировать фоновое изображение неподвижным при прокручивании, используется значение fixed в свойстве background-attachment. Например:

background: #333 url(images/bg.gif) no-repeat; color — цвет шрифта.

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

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

border: #333 solid 1px; — запись означает, что рамка темно-серого цвета, сплошная, толщиной в 1 пиксель. Другие значения фактуры: dot­ted — точечная, dashed — пунктирная, double — двойная.

Местоположение рамки: 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: 0 10px 10px 0; }

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

8. Рассмотрим примеры элементов HTML и CSS, используемых для блочной вер­стки и не только. Открываем документ style.css

* {margin : 0; padding : 0; border : 0; }

body {

padding : 2% 0 0;

background : #fff; color : #333;

font-family : "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }

#container { width : 760px; margin : 0 auto; border : 1px solid #999; }

#header {background : url(header.jpg); width : 760px;height : 158px; }

#nav {background : url(navbg.jpg) repeat-x; color : #f00;

font-size : 120%; font-weight : bold; line-height : 1.8em; text-align : center; }

#nav ul { list-style-type : none; }

#nav li { display : inline; margin : 0 8px; }

#nav li a { color : #0c0; }

#nav li a:hover { color : #f00; }

a { text-decoration : none; }

#text {width : 545px; font-size : 0.8em; color : #333; margin : 10px auto;float : left;}

#text p { text-align : justify; text-indent : 1.5em; margin : 0; padding : 0 15px; }

#text a {color : #396; }

#text a:hover {color : #f36;

border-bottom : 1px dotted #f36; }

.imge { width : 200px; height : 200px;margin : 10px 10px 0 15px;float : left; }

#members {width : 300px;height : 190px; float : right;}

#members h2 {color : #f60; font-size : 120%;font-weight : bold; text-align : center;}

#members ol {color : #999; font-size : 120%;margin : 10px;float : left;}

#members li { margin : 0 5px; }

#members li a {color : #0c0;}

#members li a:hover {color : #f00;}

.line {width : 304px; height : 13px; float : right;}

#news {background: #ffc;width:185px; color : #665; margin : 10px 5px; float: right;}

#news h3 {color : #f60; font-size : 120%; font-weight : bold; text-align : center; }

#news ul { list-style : url(marker.jpg) inside; }

#news li { font-size : 75%; padding : 5px 10px;}

#footer {background : #665;color : #fff; font-size : 70%;padding : 5px; clear : both;}

#footer a {color : #ff0;}

#footer a:hover { color : #f00;}

#footer p { padding : 2px; text-align : center; }

.clearfloat{ clear:both; }

В первом правиле звёздочка означает всю страницу разом. Браузеры применяют данные с ней правила ко всей странице. В правиле мы ука­зали :Отступы - 0, Поля - 0, Рамка - 0. Если стоит ноль, то единицу измерения не нужно указывать.

Следующим правилом мы задали для тела страницы: поля — сверху 2%, с бо­ков по нулям, снизу тоже ноль. У любого прямоугольника есть 4 стороны, значения отступов для них задаются по часовой стрелке, начи­ная сверху, затем правое, низ и левое. Так как по бокам должно быть одинаковое расстояние от края экрана, то и значений всего три — 2% 0 0. Средняя цифра в этой записи нуль означает, что она одинакова для правой, и для левой стороны.

В следующем правиле появилось слово container с решёткой (#). Решётка оз­начает уникальность атрибута. Тэг div с данным атрибутом будет использован только один раз на странице. Контейнер нужен, чтобы поместить страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. При любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом равна 760 пикселям.

Общее для всех ссылок правило: a {text-decoration: none;} указывает, что все ссылки на странице по умол­чанию не используют подчёркивание.

Разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы вставили решётку (#), которая всегда возвращает на текущую страницу.

полезная площадь страницы разделена на две функциональные области:

1. Основной текст (с картинками и пр.)

2. Блок новостей.

Обычно, такую вёрстку называют двухколоночной.

В первом правиле указано, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em Слово float переводится как "обтекание'". left — сам объект слева, а течёт всё правее. И наоборот, right — объект справа, а течёт всё левее.

Слово indent означает "красную строку". Размер её полтора размера шрифта.

Ссылки. Для неактивной задали цвет салатовый, а для активной красный, и с подчёркиванием точечной (dotted) полоской в 1 пиксель толщиной.