Идёт загрузка страницы...

htp://aptem.net.ru
Навигатор
На форум
Софт
Программирование
Delphi
Visual Basic
Borland C++
1С
Вебмастеру
HTML
PHP
Perl
ОС
Windows XP
Windows 98
Windows 2000




    Стили (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>

    Здесь вызываем описания стилей :
    <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 или % проценты

Вернуться?

Перейти к разделу "Учебники по HTML"