Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 31


Самоучитель по HTML и CSS

Добрый день.

На сайте htmlbook.ru в очередной раз обновился раздел «Теги HTML». Изменения следующие.

  • расширился список браузеров;
  • слегка поменялся дизайн, в частности, цветовая расцветка;
  • наконец-то появился скроллинг в списке с тегами (!);
  • подсветка синтаксиса в примерах;
  • примеры можно открыть и посмотреть в текущем или новом окне;
  • к некоторым тегам добавлено описание особенностей поведения в разных браузерах;
  • к примерам добавлен список браузеров, где указывается, работает в этом браузере пример или нет;
  • для каждого примера указывается валиден он или нет согласно спецификации HTML 4.01. Впрочем, это уже было, просто приняло другой вид.

 

Также изменения коснулись свойств CSS, но только локальной версии, выполненной в виде файла в формате CHM. Она платная, стоит 48 р. и отличается от своей версии на сайте. В частности:

  • отсутствует реклама, которая имеется в демо-версии и онлайн-версии;
  • все свойства упорядочены по алфавиту и по категориям;
  • список браузеров содержит актуальные версии, в том числе: Internet Explorer 8 (Beta), Opera 9.5, Safari 3.1, Firefox 3;
  • приведен список хаков для различных браузеров;
  • содержит список псевдоклассов и псевдоэлементов;
  • включен полнофункциональный поиск;
  • для каждого параметра указаны ошибки, возникающие в браузере;
  • бесплатное обновление.

Купить локальную версию можно по адресу http://htmlbook.ru/css/buy/. Оплата в любой удобной системе — Яндекс.Деньги, WebMoney, SMS и др. По вопросам приобретения справочника можете писать на ящик css@htmlbook.ru.

А теперь решения задач, приведенных в предыдущем выпуске рассылки.

Решение задач

1. Создание таблицы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Таблица</title>
</head>
<body>
<table width="80%" border="1" cellpadding="4" cellspacing="0">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td rowspan="2" valign="top">Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
<tr>
<td>Ячейка 5</td>
</tr>
</table>
</body>
</html>

2. Верхний и нижний индекс

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Многочлен</title>
</head>
<body>
<p>Многочлен степени <em>n</em></p>
<p><big><big><em>f(x) = a<small><sub>0</sub></small> + a<small><sub>1</sub></small> x + ... + a<small><sub>n-1</sub> </small>x<small> <sup>n-1</sup></small> + a<small><sub>n</sub></small> x <small><sup>n</sup></small></em></big></big></p>
</body>
</html>

3. Создание списка

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Список</title>
</head>
<body>
<hr />
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectetuer adipiscing elit</li>
<li>Duis te feugifacilisi</li>
</ul>
<hr />
</body>
</html>

 

2. Добавление CSS

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

Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>, как показано в примере 2.1.

Пример 2.1. Подключение таблицы связанных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

Значения параметров тега <LINK> — rel и type остаются неизменными, как приведено в данном примере. Аргумент href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <LINK> приведено в примере 2.2.

Пример 2.2. Файл со стилем

H1 {
 color: navy;
 font-size: 200%;
 font-family: Arial, Verdana, sans-serif;
 text-align: center;
}

P {
 padding-left: 20px;
}

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

Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>, как показано в примере 2.3.

Пример 2.3. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глобальные стили</title>
<style type="text/css">
H1 {
 font-size: 120%;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #336;
}
</style>
</head>
<body>

<h1>Hello, world!</h1>

</body>
</html>

В данном примере определен стиль тега <H1>, который затем можно повсеместно использовать на данной веб-странице.

Внутренние стили

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

Пример 2.4. Использование внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Внутренние стили</title>
</head>
<body>

<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336;">Заголовок</h1>

</body>
</html>

В данном примере стиль тега <H1> задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.

Замечание

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

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 2.5 применяется сразу два метода добавления таблиц стилей в документ.

Пример 2.5. Сочетание разных методов подключения стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подключение стиля</title>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>
<body>

<h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1>
<h1>Заголовок 2</h1>

</body>
</html>

В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зеленым цветом через таблицу глобальных стилей.

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с таблицей связанных или глобальных стилей, но никак не со встроенными стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью директивы url или без нее. В примере 2.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

Пример 2.6. Импорт CSS в глобальную таблицу стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Импорт</title>
<style type="text/css">
@import url("/style/header.css");
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>

<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>

В данном примере показано подключение файла header.css, который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 2.7).

Пример 2.7. Импорт в таблице связанных стилей

@import "/style/print.css" print;
import "/style/palm.css" handheld;

BODY {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 background: white;
 color: black
}

В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 2.1, а именно с помощью тега <LINK>.

Про типы носителей упомянутых в синтаксисе @import расскажем в следующих выпусках.

Вопросы для проверки

1. Юля подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причем в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зеленым. Какой цвет текста будет на странице?

  1. красным
  2. синим
  3. зеленым
  4. черным
  5. установленным в браузере по умолчанию

2. Требуется задать цвет заголовка зеленым. Какой стилевой атрибут подойдет для этой цели?

  1. font-color
  2. color
  3. font-family
  4. text
  5. font-size

3. Петя написал следующий код для изменения стиля текста абзаца. Но цвет текста в браузере IE остался черным. Почему?

<style type="css/text">
P { color: red; font-size: 200%; }
</style>

  1. В документе не установлен <!DOCTYPE>
  2. Стиль определен для тега <P>, а должен быть для <BODY>
  3. Настройки браузера не позволяют подключать таблицу глобальных стилей
  4. Неверно задано значение параметра type
  5. Ошибка в стилевом атрибуте

4. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

  1. Таблица связанных стилей
  2. Таблица глобальных стилей
  3. Таблица блочных стилей
  4. Внутренние стили
  5. Импорт стиля
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное