Стиль для отдельного HTML-файла

2015-11-27

859

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 2 3 4 5 678 9 10 11 Следующая ⇒

Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать определение в головной части документа через стилевые определения.

Стилевые определения или селекторы располагаются внутри блока

и «запаковываются» в HTML-комментарий.

Стилевое определение имеет вид:

Имя тега (или имена тегов через запятые)

{

характеристика: величина;

…

характеристика: величина;

}

Например:

<HTML>

<HEAD> <META http-equiv="Content-Type"

content="text/html">

<TITLE>Стиль для отдельного файла</TITLE>

<!--

H1,H2,H3,H4,H5,H6

{

text-align: right;

color:red;

font-family: "Arial Cyr",

Geneva, sans-serif;

}

-->

</STYLE>

</HEAD>

<H2>Стиль для отдельного файла</H2>

<HR>

<P>Это обычный текст

<H3>Это заголовок</H3>

<P>Это снова обычный текст

</BODY

</HTML>

Результат работы этой программы:

Браузер отображает заголовки в этом документе рубленым шрифтом цвета red и выравнивает их по правому краю экрана. Такое поведение браузера соответствует следующей инструкции:

<!--

Н1,Н2,НЗ,Н4,Н5,Н6

{

text-align: right;

color: red;

font-family: "Arial Cyr", Geneva, sans-serif;

}

-->

</STYLE>

В приведенном выше примере использованы три характеристики:

• text-align: right; – задает выравнивание по

правому краю;

• color: red; – задает цвет red;

• font-family: "Arial Cyr", – задает рубленый

Geneva, sans-serif; шрифт.

Заголовки будут выводиться шрифтом Arial Cyr, если, конечно, этот шрифт есть в компьютере пользователя. Если шрифта нет, браузер последовательно ищет шрифты Geneva, Helvetica или, в конце концов, какой-нибудь рубленый шрифт (указание «sans-serif»). В случае полной неудачи браузер выведет текст «шрифтом по умолчанию», т. е., как правило, шрифтом Times New Roman.

Стиль для нескольких HTML-файлов

Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение css. Например, можно в файле style.css записать:

BODY {margin-left: 40рх;}

Hl,H2,H3,H4,H5,H6

{

text-align: right;

color: red;

font-family: "Arial Cyr", Geneva, sans-serif;

}

Для подключения этих указаний в разделе <head>...</head> HTML-файла

нужно поместить ссылку:

На этот стилевой файл могут ссылаться многие HTML-документы. Изменения в этом единственном файле скажутся на внешнем виде десятка страниц.

Обратите внимание на стилевое указание

body {margin-left: 40рх;}

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

Комбинирование стилей

Были показаны три способа внедрения стилей в HTML-коды:

• указания в отдельном теге;

• указания в заголовке HTML-файла;

• указания в отдельном CSS-файле.

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

Проделаем серию опытов. Документ без CSS-указаний

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

<HTML>

<HEAD> <TITLE>Пример 1</TITLE>

</HEAD>

<BODY bgcolor=white

text=black>

<H1>Заголовок 1</H1>

<H2>Заголовок 2</H2>

<HЗ>Заголовок 3</HЗ>

</BODY>

</HTML>

CSS-указания в отдельном теге

Этот код отобразит первые два заголовка черным цветом, а последний — красным.

<HTML>

<HEAD>

<TITLE>Пример 2</TITLE>

</HEAD>

<BODY bgcolor=white

text=black>

<H1>Заголовок 1</H1>

<H2>Заголовок 2</H2>

Заголовок 3 </H3>

</BODY>

</HTML>

CSS-указания в CSS-файле Файл prim.сss содержит:

H1,H2,H3

{

color: green;

}

Тогда HTML-файл с использованием этого файла имеет сл. вид.

<HTML>

<HEAD>

<!-- Подключение файла prim.css. - - >

<!--

H1,H2,H3

{

color: blue;

}

-->

</STYLE>

<TITLE>Пример 4</TITLE>

</HEAD>

<H1>Заголовок 1</H1>

<H2>Заголовок 2</H2>

Заголовок 3</H3>

</BODY>

</HTML>

Рассмотрим другой порядок следования тегов <style> и <link>.

<HTML>

<HEAD>

<!--

H1,H2,H3

{

color: blue;

}

-->

</STYLE>

<LINK rel=stylesheet type="text/css"

href=prim.css>

<TITLE>Пример 5</TITLE>

</HEAD>

<H1>Заголовок 1</H1>

<H2>Заголовок 2</H2>

<H3 style="color:red">Заголовок 3</H3>

</BODY>

</HTML>

Таким образом, используя CSS можно:

· задавать поля, отступы, размер и тип шрифта, цвета текста и фона для отдельных элементов страницы (абзацев, слов, букв), оформлять красные строки и т.д.

· изменять оформление целого сайта, состоящего из сотен файлов, не прикасаясь к HTML-коду, редактируя всего лишь один CSS-файл;

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

Вопросы к самопроверке:

1. Как расшифровывается аббревиатура CSS?

2. Опишите назначение технологии CSS.

3. Каким атрибутом можно задать стиль в теге?

4. В каком специальном HTML-блоке <?????>...</?????> размещают стилевые описания?

5.В каком теге записывается ссылка на файл со стилевыми определениями, каким атрибутом она задается? Запишите эти имена вместо вопросительных знаков:

<???? rel = stylesheet type="text/css" ????=file.css>

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

2015-11-27

859

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 2 3 4 5 678 9 10 11 Следующая ⇒

Обсуждение в статье: Стиль для отдельного HTML-файла

Обсуждений еще не было, будьте первым... ↓↓↓