ПОЗНАВАТЕЛЬНОЕ

Оси и плоскости тела человека - Тело человека состоит из определенных топографических частей и участков, в которых расположены органы, мышцы, сосуды, нервы и т.д.

Отёска стен и прирубка косяков - Когда на доме не достаёт окон и дверей, красивое высокое крыльцо ещё только в воображении, приходится подниматься с улицы в дом по трапу.

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

Форматирование с помощью таблиц стилей

12 3

Лабораторная работа № 3. Таблицы стилей

Цель занятия:

1. Изучить возможности внедрения таблиц стилей в Web-документ.

2. Освоить приемы форматирования документов с использованием таблиц стилей.

Таблицы стилей расширяют возможности форматирования страниц. Вначале развитие Web-технологий шло по пути стилистических расширений HTML – авторы языка добавляли новые теги и увеличивали количество их атрибутов. Это привело к усложнению и ограничению гибкости Web-страниц. Одновременно были предложены таблицы стилей (CSS), которые изящно решают эти проблемы и превосходят механизмы форматирования в HTML. С помощью таблиц стилей компактно описывают любые стили и применяют их практически без изменений текста HTML-документов.

Например, следующая таблица, хранящаяся в файле mycss.css, описывает стиль абзаца с зеленым цветом текста и со сплошной красной рамкой:

P.special { color: green; border: solid red; }

Для применения этого стиля любой документ достаточно связать с файлом таблицы стилей:

<HTML>

<HEAD>

</HEAD>

<BODY>

<P class="special">B этом абзаце текст должен быть отображен символами зеленого цвета и обрамлен рамкой красного цвета.

</BODY>

</HTML>

Такое описание стилей позволяет гибко управлять стилем всего сайта. При этом таблицы стилей не привязывают HTML к конкретному языку таблиц стилей. Каскады объединяют описания стилей нескольких источников. Например, могут быть стили для корпорации, для группы документов, а также стили для одного документа. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Но не все языки таблиц стилей поддерживают каскады.

HTML-документы не зависят от устройств. А таблицы стилей применяют к конкретным устройствам или группам устройств. Это позволяет браузерам избежать загрузки ненужных таблиц стилей. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.

Если в документе применяют стили, то с помощью тега МЕТАуказывают на используемый язык таблицы стилей по умолчанию. Например, следующий тег указывает на язык CSS:

<МЕТА HTTP-EQUIV=”Content-Style-TYPE" CONTENT="text/css">

Язык по умолчанию можно описывать и в ссылке надокумент. Браузеры язык таблицы стилей по умолчанию для документа обычноопределяют в соответствии с последним указанием на язык в документе.

Внедрение таблиц стилей в документ

Внутренние стили тегов

Теги могут иметь атрибут STYLE, который описывает значения параметров стилей текущего тега. Например, в следующем документе в теге абзаца устанавливают зеленый цвет шрифта и обрамление рамкой красного цвета текста текущего абзаца:

<HTML>

<HEAD>

<МЕТА HTTP-EQUIV="Content-Style-TYPE" CONTENT="text/css">

</HEAD>

<BODY>

<P STYLE="color:green; border: solid red;">B этом абзаце текст должен быть отображен символами зеленого цвета и обрамлен рамкой красного цвета.

</BODY>

</HTML>

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

В CSS описания параметров стилей имеют форму

"имя_параметра:значение {;имя_параметра:значение}"

Глобальные таблицы стилей

Глобальные таблицы стилей описывают в области заголовки документа между тегами <STYLE>и </STYLE>.Тегов STYLEв области заголовка может быть «сколько угодно. Действие глобальной таблицы стилей распространяется на содержимое текущего документа. Тег STYLEимеет следующие атрибуты:

1. TYPE- задает язык таблиц стилей (например, "text/ess") для описываемого тега и имеет приоритет над языком таблиц стилей, используемым по умолчанию. Значение этого атрибута нужно задавать обязательно - для него нет значения по умолчанию.

2. MEDIA - задает дескриптор устройства отображения содержимого описываемого тега. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение "screen".

3. TITLE - рекомендуемый заголовок.

Например, следующий фрагмент:

<HEAD>

H1 {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

сообщает браузеру о необходимости рисования рамок вокруг всех заголовков H1 в текущем документе и центрирования их.

Если предполагается, что этот документ может быть загружен браузером, не поддерживающим таблицы стилей, то рекомендуется закомментировать содержимое между тегами <STYLE> и </STYLE>. Язык CSS проигнорирует комментарии HTML и этот стиль для заголовков будет соблюдаться. А если браузер не поддерживает CSS, то содержимое  будет прочитано браузером как комментарий HTML.

Синтаксис описания значений параметров стилей в глобальных таблицах стилей совпадает с синтаксисом описания значений параметров внутренних стилей тегов. Однако есть отличия в применении стилей.

Например, тег STYLE может описывать стили для всех тегов:

- текущего документа;

- указанных классов текущего документа;

- текущего документа, у которых в атрибуте ID установлено указанное значение.

Для применения стиля только, например к заголовкам Н1 класса class1, можно записать следующим образом:

<HEAD>

H1.class1 {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 CLASS="class1">Стиль влияет на этот заголовок </Н1>

<Н1>А на этот заголовок стиль не влияет</Н1>

</BODY>

Для ограничения применения стиля только, например к тегам с идентификатором id1, можно записать следующим образом.

<HEAD>

#idl {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 ID = "idl">Cтиль влияет на этот заголовок</Н1 >

<Н1>На этот заголовок стиль не влияет</Н1>

<Р ID="idl">Cтиль влияет на этот абзац</Р>

</BODY>

Глобальный стиль можно описывать почти для всех тегов HTML. Но наиболее часто стили описывают для тегов DIV и SPAN. Они удобны тем, что не мешают другим тегам форматирования Теги DIV и SPAN с атрибутами CLASS и ID позволяют неограниченно расширять язык HTML.

Например, в следующем фрагменте тег SPAN применяют для установки малых прописных букв для стиля шрифта:

<HEAD>

SPAN.maintext { font-variant: small-caps }

</STYLE>

</HEAD>

<BODY>

<Р>Здесь текст отображается обычными символами. А следующие слова <SPAN сlаss= "maintext"> выделены малыми прописными буквами</SPAN>. Здесь текст опять отображается обычными символами.

</BODY>

В следующем фрагменте тег DIV применяют для выравнивания содержимого блоков класса divl:

<HEAD>

DIV.divl { text-align: center }

</STYLE> </HEAD>

<BODY>

<P>Teг блоков действует на все содержимое между тегами DIV и /DIV. Можете повторить количество абзацев или других элементов тела документа и увидите, что выравнивание для класса divl действует и на них. </DIV>

</BODY>

Применение стилей можно ограничивать и типами устройств. Например, в следующем фрагменте при показе на проекторе заголовки H1 будутотображаться синим цветом, а при печати они будут отцентрированы;

<HEAD>

H1 {color: blue}

H1 {text-align: center }

</STYLE>

</HEAD>

Вследующем теге задают звуковые эффекты для устройства речевого вывода:

А { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}

</STYLE>

Внешние таблицы стилей

Таблицы стилей можно описывать отдельно от HTML-документов. Это позволяет:

- совместно использовать таблицы стилей в ряде документов и сайтов;

- изменять таблицы стилей без изменения документа;

- загружать таблицы стилей выборочно.

HTML позволяет связывать с документом любое количество внешних таблиц стилей. Язык CSS определяет взаимодействие нескольких внешних таблиц стилей (например, правила "каскадов").

Упражнение 1. В текстовом редакторе «Блокнот» запишем следующий текст: P.special { color : green; border: solid red; }

и сохраним его в файле mycss.css.

Теперь для применения этой внешней таблицы стилей нужно связать документ с файлом mycss.css.Вследующем примере для связывания применяют тег LINK:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Связывание внешней таблицы стилей с помощью атрибутов тега LINKсостоит из следующих шагов:

1. В атрибуте HREFуказывают URI файла таблицы стилей.

2. В атрибуте TYPEуказывают язык таблицы стилей. Браузеры не загружают таблицы стилей, использующие неподдерживаемые языки.

3. С помощью атрибутов RELи TITLEуказывают, является ли таблица стилей постоянной, предпочитаемой или альтернативной.

3.1. Таблица постоянная, если REL="stylesheet", а значение TITLEне установлено.

3.2 Таблица предпочитаемая, если REL="stylesheet",а значением атрибута TITLEтаблице присваивают имя.

3.3. Таблица альтернативная, если REL="alternate stylesheet",а значением атрибута TITLEтаблице присваивают имя.

Например, укажем, что таблица стилей в файле mycss.cssявляется предпочитаемой:

Если тегами LINKуказаны несколько предпочитаемых таблиц стилей, применяется указанная первой таблица.

Для установки предпочитаемой таблицы стилей можно применить и тег МЕТА.Например, чтобы установить предпочитаемую таблицу стилей "compact", можно записать следующую строку:

<МЕТА HTTP-EQUIV="Default-Style" CONTENT="compact">

Если тегами МЕТАуказаны несколько предпочитаемых таблиц стилей, применяется указанная последней таблица.

Предпочитаемые таблицы стилей, указанные тегами МЕТАимеют преимущество над таблицами, задаваемыми тегами LINK.

Можно сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые) одним именем стиля.Если пользователь выбирает именованный стиль, браузер применяет все таблицы стилей с этим именем.

Также можно указывать постоянные таблицы стилей, которые браузеры применяют в дополнение к альтернативным таблицам.

Каскады таблиц стилей

Каскадные языки таблиц стилей, такие как CSS, допускают применение таблиц стилей из нескольких источников (каскад таблиц стилей) Для создания каскада указывают последовательность тегов LINKи/или STYLEКаскад таблиц производится в порядке их указания в заголовке документа. При этом следует избегать смешивания языков таблиц стилей.

Рассмотрим следующий фрагмент:

<LINK REL="alternate stylesheet" TITLE="compact"

HREF="small-base.css" TYPE="text/css">

<LINK REL=''alternate stylesheet" TITLE="compact"

HREF="small-extras.css"TYPE="text/css">

<LINK REL="alternate stylesheet" TITLE="big print"

HREF="bigprint.css"TYPE="text/css">

Если пользователь выбирает стиль "compact",браузер применяет обе внешние таблицы. Если пользователь выбирает стиль "big print",браузер применяет таблицу "bigprint.css".При любом выборе применяется и постоянная таблица "common.css".

Каскад может включать таблицы стилей, применяемые к различным устройствам. Браузер сразу отбрасывает таблицы стилей, не применяемые к текущему устройству. В следующем примере каскада таблица стилей "соrр"представлена для печати, экранного представления и речевых браузеров.

Таблица "tech"применяется ко всем устройствам. Стиль, определяемый тегом STYLE,используется для печати и для экрана, но не для звукового представления.

<LINK REL="stylesheet" media="aural"

HREF="corp-aural.css"TYPE="text/css">

<LINK REL="stylesheet" media="screen"

HREF="corpe-screen.css"TYPE="text/css">

<LINK REL="stylesheet" media="print"

HREF="corp-print.css"TYPE="text/css">

p.sperial { color: rgb(230,100,180)}

</STYLE>

Форматирование с помощью таблиц стилей

Стили символов

С помощью таблиц стилей можно достичь большого разнообразия эффектов. Например, следующий фрагмент.

<HEAD>

.#myid {font-style: italic; color: blue}

P { font-weight: 700 }

H1 { font-weight: 200 }

</STYLE>

</HEAD> <BODY>

<H1 ID="myid">Стиль влияет на этот заголовок</Н1>

<Р ID="myid"> Стиль влияет на этот абзац

</BODY>

в окне просмотра отобразится следующим образом:

То есть, можно гибко переопределять стили любых тегов.

В следующем фрагменте задают отступ в первой строке абзаца:

Р {text-indent: 2.6em }

<P ID ="myid">Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац.

Тогда первая строка любого абзаца будет, отображена с отступом

Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац. Стиль влияет на этот абзац.

Здесь величина отступа 2.6еm подбиралась так, чтобы отступ был равен ширине 5 символов.

Стили могут наследоваться от внешних блоков. В следующем фрагменте стиль выравнивания наследуется от блока с идентификатором center:

<HEAD>

.#myid {font-style: italic; color: blue}

P { font-weight: 700 }

HI { font-weight: 200 }

DIV.#center {text-align: center }

</STYLE>

</HEAD>

<BODY>

<DIV>

<H1 ID ="myid”>Cтиль влияет на этот заголовок</Н1>

<Р ID ="myid"> Стиль влияет на этот абзац

</DIV>

</BODY>

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

Р {letter-spacing: 0.2em}

Можно отобразить все символы прописными

Hl {text-transform: uppercase }

12 3