Назначение каскадных таблиц стилей

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

Например, чтобы создать абзац с полужирным начертанием, красного цвета и с подчеркиванием, нужно использовать 3 тега - < FONT>, < B> и < U>:

< P> < font color=" red" > < B> < U> Абзац с красным полужирным подчеркнутым шрифтом < /U> < /B> < /FONT> < /P>

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

Решается такая проблема с помощью CSS (Cascading Style Sheets – каскадные таблицы стилей). CSS позволяют задать шаблон стиля и применять его в дальнейшем.

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

1. CSS предоставляет гораздо больший объем параметров форматирования объектов HTML[2].

2. Используя CSS, зачастую можно легко сократить размер исходного HTML-документа.

3. CSS позволяет «настраивать» такие объекты HTML, как таблицы, списки, гиперссылки и т.д.

6.2. Способы задания CSS

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

1-й способ: строчный ( включение в теговые конструкции ) – стили вставляются прямо в описание тегов HTML с помощью специального параметра style.

< ТЕГ style =" описание стиля" > текст< /ТЕГ>

Этот способ обычно используется, если стиль нужно применить единожды к конкретному тегу и требуется использование параметров, доступных только через CSS.

2-й способ: вложенный ( внедрение в документ ) – стили описываются все в одном месте между тегами < STYLE> и < /STYLE> (обычно этот раздел размещается в разделе < HEAD> < /HEAD> ).

< STYLE>

тег1 {описание стиля}

тег2 {описание стиля}

...

тег{описание стиля}

< /STYLE>

Используя этот способ, мы переназначаем форматирование тегов. Этот способ обычно применяется, если стиль тега в документе используется несколько раз. Тогда, описав стиль один раз в разделе < STYLE>, при указании тега в тексте уже не нужно стиль описывать повторно.

3-й способ: внешний ( ссылка на внешний файл ) – отличается от предыдущего тем, что описания стилей помещаются не в разделе < STYLE>, а вносятся в отдельный тестовый файл с расширением *.css (например, style.css). Если мы хотим использовать описанные стили на страничке, мы должны включить ссылку на этот файл в наш HTML-документ между тегами < HEAD> и < /HEAD> с помощью тега < LINK>.

< LINK rel=stylesheet type=text/css href=”имя файла с описанными стилями”>

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

Классы стилей

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

Но иногда требуется использование нескольких вариантов отображения одного и того же элемента в HTML-документе. Например, несколько абзацев (тег < P> ) имеют вид, отличающийся от других.

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

P.zagolovok {text-align: center; font-weight: bold; font-size: 16px; },

В данном примере задан класс zagolovok, который описывает набор параметров форматирования тега < P>: выравнивание, полужирное начертание, размер шрифта 16 px.

Если задается несколько классов одного тега, принадлежность класса определенному тегу определяется в первом описании, а в последующих описаниях тега можно не указывать. Например,

P {text-align: center; font-weight: bold; font-size: 16px; }

.text {text-align: left; font-weight: normal; font-size: 12px; }

.right {text-align: right}

6.4. Способы задания классов стилей

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

1. Внутренний – в разделе < STYLE> < /STYLE>.

2. Внешний – в отдельном файле с расширением.css.

Применение класса в HTML-документе осуществляется с помощью параметра class. Например,

< P class=zagolovok>

Можно задать универсальный класс – класс, который можно применять не к одному, а к нескольким тегам. Этот класс описывается самым первым или после описания классов тега < BODY>, и при его задании тег не указывается. Например,

.left {text-align: left}

Созданный в примере класс left можно будет применить к тегу < P>, < TD>, < Hх> и другим тегам, где этот параметр форматирования применим.

Задание 6.1. Создайте HTML-документ inline.html, содержащий абзац с разреженным шрифтом и таблицу с жирной верхней границей (см. рис.). Для этого:

· Во-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль у тега < P>:

 

< P style=" letter-spacing: 12" > Разреженный текст в абзаце задан с помощью CSS< /P>

· Аналогично создаем стиль у тега < TABLE> (параметры, доступные без CSS описывает вне «style»):

< TABLE style=" border-top-width: 10px; border-color: blue; " border=1 cellspacing=0
cellpadding=0 bordercolor=blue >

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

В данном примере описаны два стиля: стиль абзаца и стиль таблицы. При описании каждого стиля использовались стандартные и новые атрибуты.

Например, letter-spacing задает разреженность текста, border-top-width - толщину верхней границы, border-color – цвет границы таблицы.

Примечание. Если в описании стиля используются несколько атрибутов, то они должны быть перечислены через «; ».

Задание 6.2. Создайте HTML-документ seti.htmlпо образцу. Названия классификаций заданы тегом < P>, перечисления – элементы маркированного списка (тег < LI> ).

Тег < P>	Межсимвольный интервал – 10 px, начертание – полужирное, размер шрифта – 20 px
Тег < LI>	Начертание – нежирный курсив, размер шрифта – 18 px.

· Используйте CSS: вложенный способ описания стилей.

· Опишите стили в разделе < STYLE> < /STYLE>.

Задание 6.3. Создайте документ inform.html. Оба HTML-документа – seti.html и inform.html должны использовать одни и те же параметры форматирования, описанные в Задании 6.2.

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

· Создайте файл style.css.

· Переместите описание стилей из HTML-документа seti.html в css-файл.

· В обоих HTML-документах в разделе < HEAD> < /HEAD> добавьте ссылку на созданный css-файл с описанными стилями.

Задание 6.4. Создайте HTML-документ по образцу (см. рис.), используя наиболее подходящий способ задания стиля:

Задание 6.5. Создайте HTML-документ class.html (см. рис.). Для форматирования текста создайте два класса тега < P> с различными параметрами форматирования. Для этого:

· Введите текст странички.

· В разделе < STYLE> < /STYLE> создайте два класса у тега < P>: heading – для заголовков и text – для основного текста.

P.heading {font-family: Arial; background: yellow; font-weight: bold}

.text {font-family: Times New Roman; padding-left: 130}

⇐ Предыдущая1234567

Поделиться: