CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор
правил оформления и форматирования, который может быть применен к различным
элементам страницы. В стандартном 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;} |
|
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 или % |
проценты |
