Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ИСИС.docx
Скачиваний:
4
Добавлен:
17.04.2019
Размер:
210.92 Кб
Скачать

40. Встроенные таблицы стилей, задание правил отображения текста, находящегося внутри html-элементов, параметр style, стилевые атрибуты.

Встроенные таблицы стилей задаются внутри HTML-элемента STYLE (между парными тегами <STYLE> и </STYLE>), помещенного в разделе HEAD документа. При создании встроенных таб­лиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать зна­чение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением од­ноименных атрибутов HTML-элемента LINK.

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

Правила отображения HTML-элементов

Рассмотрим самое простое применение CSS — задание правил отображения текста (или прочего содержимого), находящегося внутри определенных HTML-элементов. Для этого нужно указать в первой части правила название HTML-элемента (или нескольких HTML-элементов), напри­мер:

Н1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, за­головки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML-элемента Р будет отображаться курсивом.

41.Внешние таблицы стилей, элемент link и его атрибуты.

Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Эти файлы являются обычны­ми текстовыми файлами, созданными, например, в редакторе БЛОКНОТ. Нужно лишь при сохране­нии этих файлов использовать расширение CSS (например, mystyle. ess). Подключаются вне­шние таблицы стилей к документу при помощи HTML-элемента LINK. При этом используются следующие атрибуты этого элемента:

<S> href — задает URI файла с подключаемой таблицей стилей;

rel — для подключения таблицы стилей этому атрибуту присваивается значение stylesheet; <S> type — при подключении CSS задается значение text /ess;

<s> media — задает тип устройства, для которого применяется подключаемая CSS (эта замеча­тельная возможность будет рассмотрена далее).

HTML-элемент LINK задается при помощи одиночного тега <LINK>, который помещается в шап­ке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:

<HEAD>

<LINK href = "mystyle.css" rel = "stylesheet" type = "text/css">

<UNK href = "mystyle_ex.css" rel = "stylesheet" type = "text/css"> <HEAD>

42.Использование стилевых классов, псевдостили гиперссылок.

Второй способ использования таблиц стилей — создание стилевых классов. Рассмотрим это на примере:

Н1.arial {color: red; font-family: arial} H2.newroman {color: blue; font-family: newroman} P.italic {font-style: italic} bold {font-weight: bold}

Здесь создано четыре стилевых класса с именами arial, newroman, italic, bold. Первые три из них могут использоваться только для HTML-элементов HI, Н2 и Р соответственно. Четвер­тый стилевой класс можно назначать любому элементу.

Назначение стилевого класса HTML-элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, МЕТА, PARAM, SCRIPT, STYLE, TITLE.

псевдостили гиперссылок.

Мы можем задавали параметры отображения гиперссылок докумен­та при помощи атрибутов HTML-элемента BODY? С использованием CSS можно сделать то же самое.При этом нужно применять предопределенные названия элементов в записях таблицы стилей:А: link (непосещенная гиперссылка), A: visited (посещенная ссылка), A: active (ак­тивная гиперссылка, проявляется, например, при перемещении по гиперссылкам при помощи та­буляции) и А: hover (состояние при наведении указателя мыши на гиперссылку). При этом со­здаются псевдостили гиперссылок

<STYLE> A:link {text decoration: none} A:hover {font-style: italic} A:active {color: red}

A:visited {color: green; font-weight: bold} </STYLE>