| Стили (CSS). |
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>
Здесь вызываем описания стилей : |
Если Вы распологаете стили в отдельном файле, тогда между тегами <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 или % | проценты |
Главная
|