Базовый синтаксис.

Дата добавления: 2013-12-23; просмотров: 629; Нарушение авторских прав

Единицы измерения размеров.

Способы совместного использования CSS и (X)HTML.

Имеется три основных способа применения CSS-стилей к (X)HTML-документу. Перечислим их в порядку предпочтения:

1. использование внешних (связанных) таблиц стилей;

2. использование внутренних (глобальных) таблиц стилей;

3. использование встраиваемых (inline) стилей.

Место определения	Синтаксис
Внешний CSS-файл	<head> … <link rel="stylesheet" type="text/css" href="имя файла.css" /> … </head>
Внешний CSS-файл	<head> … <style type="text/css" media="all">@import "имя файла.css"; </style> … </head>
В (X)HTML-файле	<head> … <style type="text/css"> body { color: red; } </style> … </head>
Непосредственно в теге	<p style="font-size: 21px; color: green;">Текста абзаца</p>

3. Теги style и link могут содержать параметр media, указывающий устройство, для которого предназначена таблица стилей. Значением параметра могут выступать:


all	стиль предназначен для всех типов устройств
aural	речевые синтезаторы и речевые браузеры.
print	печатающие устройства
projection	проектор
screen	экран монитора
tv	телевизор

IE7 начал поддерживать

Привести примеры…

Различают относительные и абсолютные единицы измерения размеров.

Табл. 1. Абсолютные единицы измерения
Единица	Описание
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма) = 0,3528 mm
pc	Пика (1 пика равна 12 пунктам) = 4,2336 mm
Табл. 2. Относительные единицы измерения
Единица	Описание
em	Высота шрифта текущего элемента
ex	Высота символа x
px	Пиксель
%	Процент

Пример.

	Рекомендуемые	Не рекомендуемые
Экран	em, ex, px, %	pt, cm, mm, in, pc
Печать	em, cm, mm, in, pt, pc, %

5. Представление цвета:

* англоязычные слова;

* шестнадцатеричная RGB-форма:

* десятиричная RGB-форма: rgb(К, З, С);

Каждый CSS-документ состоит из описания стилей. Стиль – это набор параметров, задающих представление некоторого элемента веб-страницы, например конкретного тега.

Стили описываются в такой форме:

селектор { свойство1: значение1;

свойство2: значение2;

…

свойствоN: значениеN; }

Селектор – это имя стиля.

Пример CSS-документа:

body { font-family: Arial;

background: URL(foto-bg.jpg); }

h1, h2 { text-align: center; }

p { text-align: justify; }

strong { text-decoration: underline; }

<== предыдущая лекция	\|	следующая лекция ==>
Общие сведения о CSS. Стандарты CSS.	\|	Visited