Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Веб программирование.Начало пути.doc
Скачиваний:
6
Добавлен:
01.04.2025
Размер:
8 Мб
Скачать
☆

Некоторые подсказки по синтаксису 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: #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 пикселей.