Свойства элементов веб-страницы

 

Свойства шрифта
font-family	Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. Пример: Р {font-family: Times New Roman, sans-serif;}
font-style	Задает способ начертания шрифта: normal — нормальный (по умолчанию), italic — курсив, oblique — наклонный. Пример: Р {font-style: italic;}
font-weight	Определяет степень жирности шрифта с помощью па­раметров; normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Пример: В {font-weight: bolder;}
font-size	Устанавливает размер шрифта. Параметр может указы­ваться как в относительной (проценты), так и абсолют­ной (пункты, пикселы, сантиметры) величине. Пример: H1 {font-size: 200%;} Н2 (font-size: 150 рх;} НЗ {font-size: 400 pt;}
Font-variant	Переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps) p:first-line {font-variant: small-caps;}
Line-height	Задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта. p {line-height: 8mm;}
	Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family. Пример: p { font: italic normal 400 12px/14px Arial; } /* выделенные жирным значения обязательны, остальные могут быть опущены */   Эквивалентно p { font-style: italic; font-variant: normal; /* значение по умолчанию можно опустить*/ font-weight: 400; /* значение по умолчанию можно опустить*/ font-size: 12px; line-height: 14px; font-family: Arial; } Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.
Цвет элемента и цвет фона
color	Определяет цвет элемента Пример: I {color: green;}
background-color	Устанавливает цвет фона для элемента — именно для элемента, например для текста. Пример: Н4 {background-color: yellow;}
background-image	Устанавливает или получает фоновый рисунок для эле­мента. Может принимать значения попе (по умолчанию), в таком случае используется цвет родительского объекта или Ur! — задается абсолютный или относительный путь к рисунку. Пример: НЗ {background-image: url(../32.jpg);}.

Свойства текста
text-decoration	Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст. Примеры: Н4 {text-decoration: underline;} — подчеркива­ние, A {text-decoration: none;} — стандартный текст, I {text-decoration; line-through;} — зачеркивание, В {text-decoration:overline;} — надчеркивание
text-align	Определяет выравнивание элемента. Возможные значе­ния: left, right, center, justify. Пример: Р {text-align:justify}
text-indent	Устанавливает отступ первой строки текста. Использу­ется для создания параграфов с красной строкой. Пример: Р {text-indent: 50 pt;}
line-height	Управляет интервалами между строками текста. Пример: Р {line-height: 50 %}
word-spacing	Задает интервалы между словами. Можно использовать отрицательные значения. Пример: Р {word-spacing: 50 %}
letter-spacing	Задает интервалы между буквами. Пример: Р {letter-spacing: 50 pt}
vertical-align	Устанавливает вертикальное положение элемента. Мо­жет принимать следующие значения: baseline, middle, sub, super, text-top, text-bottom, top, bottom. Пример: P {vertical-align: 50 pt}
border-width	Ширина границы может быть задана значением в пик-' селях или с помощью зарезервированных слов: thin (тон­кая), medium (средняя), thick (толстая). Пример: table {border-width: 2 рх;}. То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.
Границы - параметры данного раздела описывают атрибуты стиля border, который позволяет задать вид границ вокруг объектов. Данные параметры могут быть применены не только к таблицам, но и к любым объектам.
border-color	Цвет границы может принимать значение transparent для задания невидимой, но имеющей ширину границы, что иногда полезно. Пример: table {border-color: green;} Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color. border - сокращенное свойство, объединяющее border-width, border-style и border-color. Пример: p { border: 2px solid #f33; }
border-style	Задает стиль рисования границы. Может принимать сле­дующие значения: попе (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset. Пример: table {border-style: dashed;}
	Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения. Пример: p { border-top-style: double; }

*

 

Упражнение. Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.

 

 

Отступы
margin	Задает ширину отступа от четырех сторон объекта. Примеры: Н4 {margin: 1cm;} body {margin:5mm;}. Исполь­зуя свойства margin-top, margin-bottom, margin-left, margin-right, вы задаете размер отступа от объекта сверху снизу, слева, справа
padding	Задает отступ, вставляемый между объектом и его гра­ницей. Пример: id (padding:2 cm;}. Используя свойства padding-bottom, padding-top, padding-left, padding-right, вы за­даете размер пространства между объектом и его гра­ницами Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left. Примеры: p { padding: 20px; }      /* все поля равны 20 пикс */ p { padding: 5px 20px; } /* вертикальные поля равны 5 пикс, а горизонтальные 20 пикс */ p { padding: 5px 20px 5px 10px; } /* сверху 5, справа 20, снизу 5, а слева 10 пикс */