CSS Cascading Style SheetsC (Таблицы
каскадных стилей) –это набор правил оформления и форматирования,
который может быть применен к различным элементам страницы. В стандартном
HTML для присвоения какому-либо элементу определенных свойств (таких,
как цвет, размер, положение на странице и т. п.) приходиться каждый
раз описывать эти свойства. Применяя CSS, Вы можете один раз описать
свойства элементов и определить это описание как стиль, а в дальнейшем
просто указывать, что элемент, который вы хотите оформить соответствующим
образом, должен принять свойства стиля, описанного вами.
Вы можете сохранить описание стиля не в тексте вашей странички, а
в отдельном файле – это позволит использовать описание стиля на любом
количестве Web-страниц.
Описания стилей находятся в тегах ‹STYLE›‹/STYLE›
и размешаются между тегами ‹HEAD›‹/HEAD›
. Приведем пример использования стилей, где слово "Пример" отображается
шрифтом Comic Sans MS, если такого нет на машине пользователя, используется
шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым
цветом :
Описываем
стили под именем Example :
<STYLE><!--
.Example{font-family: Comic Sans
MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
--></STYLE>
Здесь вызываем описания стилей :
<div class="Example">
Пример </div>
|
Если Вы распологаете стили в отдельном
файле, тогда между тегами <HEAD></HEAD> каждого HTML документа
нужно добавить ссылку на CSS файл
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">
Example.css - это Ваш CSS файл, содержащий
описание применяемых стилей. Если он находиться в другом каталоге,
нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе,
например, в Блокноте, нужно будет только изменить расширение текстового
файла на CSS. В CSS файле не должны указыватся теги <STYLE></STYLE>.
Например:
У нас есть файл Example.css,
содержажий такие параметры (подчеркиваем ссылки только при
наведении на них курсором):
<!--
A { text-decoration: none; }
A:hover { color: #FF0000; text-decoration: underline; }
-->
|
Ссылка
на него в HTML документе будет выглядить так:
<LINK REL=STYLESHEET TYPE="text/css"
HREF="Example.css"> |
Вы можете определить стиль для любого тега отдельно. Для этого нужно
в тег добавить элемент STYLE и описать его стиль в кавычках. Следующий
пример отображает слово "Пример" шрифтом Verdana, размером
150 процентов и красным цветом. <H3
STYLE="font-family:Verdana; font-size:150%; color:red">
Пример </H3>
В таблице приведены некоторые свойства элементов,
управляемых с помощью CSS.
|
Свойство шрифта |
| font-family |
Используется для
указания шрифта или шрифтового семейства, которым будет отображаться
элемент.
Пример:
P {font-family: Verdana, sans-serif;} |
| font-weight |
Определяет степень жирности
шрифта с помощью трех параметров: lighter (обычный), bold (жирный),
bolder (очень жирный)
Пример:
B {font-weight: bolder;} |
| font-size |
Устанавливает размер шрифта.
Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тегов H1, H2, H3:
H1 {font-size:
200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;} |
| Свойства
текста: |
| text-decoration |
Устанавливает эффекты оформления
шрифта, такие, как подчеркивание или зачеркивание текста
Пример использования для тега Н4:
H4 {text-decoration:
underline;} (подчеркивание)
H4 {text-decoration:
line-through;} (зачеркивание) |
| text-align |
Определяет выравнивание элемента.
Пример:
P {text-align: left} (выравнивание
по левому краю)
P {text-align: right} (выравнивание
по правому краю)
P {text-align: justify} (выравнивание
по ширине)
P {text-align: center} (выравнивание
по центру) |
| text-indent |
Устанавливает отступ первой
строки текста. Чаще всего используется для создания параграфов
с табулированной первой строкой.
Пример использования для тега H1:
H1 {text-indent:
60pt;} |
| line-height |
Управляет интервалами между
строками текста.
Пример:
P {line-height: 50 %} |
Цвет
элемента и фона:
|
| color |
Определяет цвет элемента
I {color: yellow;}
Пример использования для тега H3:
H3 {color: #0000FF;}
Ц вет в формате rgb ({R},{G},{B}) ,где каждая состовляющая
задается десятичным числом.
rgb(0,255,0)-зеленый цвет. |
| background-color |
Устанавливает цвет фона для
элемента.
Пример использования для тега H3:
<H3 style=”background-color:gold;
color:brown;”> Пример </H3>
|
| Свойства
границ: |
margin-left (слево)
margin-right (справо)
margin-top (сверху)
margin-bottom (снизу) |
Устанавливают значения отступов
вокруг элемента.
Пример использования для рисунка:
IMG { margin-left:
20pt}
IMG { margin-right: 20pt}
IMG { margin-top: 20pt}
IMG { margin-bottom: 20pt} |
| Единицы
измерения: |
| px |
Пиксели |
| cm |
Сантиметры |
| mm |
Миллиметры |
| pt или % |
проценты |
в начало
|
