Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2.doc
Скачиваний:
331
Добавлен:
01.03.2016
Размер:
10.1 Mб
Скачать

Некоторые подсказки по синтаксису css:

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

font-family:verdana,arial,sans-serif; /* предложено семейство шрифтов, из которого браузер выберет что-то похожее и близкое.*/

font-style:italic;/* Может быть какnormal,italicилиoblique— наклонный*/

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

font-size:120%;/* размер шрифта. Указывается либо в процентах,*/

font-size:1.2em;/* либо в относительных величинахem, */

font-size:14px; /*либо в пикселяхpx.*/

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. Свойства цвета и фона.

color— задает цвет шрифта. Задается шестнадцатиричным числом либо поименованной константой :color: #fff;

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

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

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

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

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

border: #333solid1px; — запись означает, что рамка темно-серого цвета, сплошная, толщиной в 1 пиксель. Другие значения фактуры:dotted— точечная,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 пикселей.