7.1. Встраивание CSS в HTML

7.1. Встраивание CSS в HTML

Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).

Листинг 7.1. Простой HTML-документ

<html>

<head>

<title>Моя домашняя страница</title>

</head>

<body>

<h1>Моя домашняя страница</h1>

<p>На этой странице вы найдете информацию обо мне и моих друзьях.

</body>

</html>

Чтобы сделать текст из элемента H1 синим, вместо обычного атрибута color элемента FONT нужно использовать следующее CSS-правило:

h1 { color: blue }

Собственно правило в CSS состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue. В последующих разделах мы подробно разберем, что такое селектор, и, двигаясь дальше, узнаем, какие бывают свойства CSS и их значения.

В спецификации языка HTML 4 описано два правила описания таблиц стилей для HTML-документов. Первый – это вставка CSS-кода непосредственно внутрь HTML-документа. Второй – это запись таблицы стилей во внешнем файле и установка ссылки на этот файл в HTML-документе.

Чтобы добавить CSS непосредственно внутрь HTML, используется элемент STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD. В листинге 7.2 приведен пример простой HTML-страницы с записанной таблицей стилей внутри документа.

Листинг 7.2. CSS внутри HTML-документа

<html>

<head>

<title>Моя домашняя страница</title>

<style type="text/css">

h1 { color: blue }

</style>

</head>

<body>

<h1>Моя домашняя страница</h1>

<p>На этой странице вы найдете информацию обо мне и моих друзьях.

</body>

</html>

Для максимальной гибкости имеется возможность создавать внешние таблицы стилей. Если код таблицы стилей находится во внешнем файле, то вы имеете возможность использовать его во всех страницах сайта. Представьте, что ваш сайт насчитывает более 1000 страниц. Если вы захотите внести какие-то изменения, то вам придется изменять код на каждой странице. Используя внешние таблицы стилей, вы лишь один раз внесете изменения в CSS-файл таблицы стилей.

Для соединения HTML-документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE, рассмотренный выше, должен располагаться в заголовке документа внутри элемента HEAD. Код страницы со ссылкой на внешний файл таблицы стилей представлен в листинге 7.3.

Листинг 7.3. Таблица стилей во внешнем файле

<html>

<head>

<title>Моя домашняя страница</title>

<link rel="stylesheet" href="my_style.css" type="text/css">

</head>

<body>

<h1>Моя домашняя страница</h1>

<p>На этой странице вы найдете информацию обо мне и моих друзьях.

</body>

</html>

Как вы заметили, элемент LINK имеет несколько атрибутов. Рассмотрим их названия и подробное описание:

• rel – тип соединения, который для таблиц стилей задается как stylesheet;

• href – местонахождение таблицы стилей, то есть адрес и имя файла. В нашем примере в листинге 7.3 это my_style.css;

• type – тип присоединяемой таблицы стилей. Поскольку элемент LINK может использоваться для присоединения и других файлов в HTML-документ, то желательно указать тип присоединяемого файла. Для таблиц стиля это значение text/css.

Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, добавим в наш пример больше цветов (листинг 7.4), используя элемент STYLE.

Листинг 7.4. Оформление документа

<html>

<head>

<title>Моя домашняя страница</title>

<style type="text/css">

body { color: red }

h1 { color: blue }

</style>

</head>

<body>

<h1>Моя домашняя страница</h1>

<p>На этой странице вы найдете информацию обо мне и моих друзьях.

</body>

</html>

Таблица стилей теперь содержит два правила: первое предопределяет отображение элементов основного текста красным цветом red, в то время как второе – отображение текста, находящегося внутри элемента H1, синим цветом blue. Поскольку для элемента P значение цвета не было задано, то он унаследует цвет от родительского элемента, а именно от основного текста: элемента BODY. Элемент H1 также является дочерним элементом основного текста, но второе правило переопределяет унаследованное им значение.

В CSS существует более 100 различных свойств, одним из которых и является свойство color. Рассмотрим некоторые другие свойства на примере из листинга 7.5.

Листинг 7.5. Различные свойства CSS

<html>

<head>

<title>Моя домашняя страница</title>

<style type="text/css">

body {

font-family: "Some Type", sans-serif;

font-size: 12pt;

margin: 3em;

}

</style>

</head>

<body>

<h1>Моя домашняя страница</h1>

<p>На этой странице вы найдете информацию обо мне и моих друзьях.

</body>

</html>

Первой бросается в глаза группа строк, разделенных точкой с запятой и заключенных в фигурные скобки {}. За последней строкой в этой группе можно не ставить точку с запятой, это никак не повлияет на отображение документа.

Разберем каждую строку отдельно.

• Первая строка для элемента BODY устанавливает семейство шрифтов Some Type. Если этот тип шрифтов недоступен, то браузер будет использовать шрифт SansSerif, который является одним из пяти шрифтов, распознаваемых всеми браузерами. Все дочерние элементы наследуют значение font-fami l y элемента BODY. В последующих главах мы подробно разберем работу со шрифтами.

• Вторая строка устанавливает размер шрифта элемента BODY равным 12 пунктам. Далее мы подробно рассмотрим единицы измерения, которые могут использоваться в CSS, и их различия.

• Третья строка задает размер полей вокруг документа, хотя в ней используется уже другая единица измерения: em.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

1.2. HTML

Из книги Интернет решения от доктора Боба автора Сворт Боб


8.3.2. Расширение и встраивание языков

Из книги Искусство программирования для Unix автора Реймонд Эрик Стивен

8.3.2. Расширение и встраивание языков Один из фундаментально важных вопросов заключается в том, возможно ли реализовать мини-язык путем расширения или встраивания существующего языка сценариев. Нередко такой подход является правильным путем к императивному мини-языку,


18.3.5. HTML

Из книги Microsoft Visual C++ и MFC. Программирование для Windows 95 и Windows NT автора Фролов Александр Вячеславович

18.3.5. HTML С момента широкого распространения World Wide Web в начале 90-х годов прошлого века документация небольшой, но возрастающей части Unix-проектов пишется непосредственно на HTML. Проблема данного подхода заключается в том, что генерировать из HTML высококачественный


Встраивание

Из книги Искусство программирования для Unix автора Реймонд Эрик Стивен

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


8.3.2. Расширение и встраивание языков

Из книги Как раскрутить и разрекламировать Web-сайт в сети Интернет автора Загуменов Александр Петрович

8.3.2. Расширение и встраивание языков Один из фундаментально важных вопросов заключается в том, возможно ли реализовать мини-язык путем расширения или встраивания существующего языка сценариев. Нередко такой подход является правильным путем к императивному мини-языку,


18.3.5. HTML

Из книги Операционная система UNIX автора Робачевский Андрей М.

18.3.5. HTML С момента широкого распространения World Wide Web в начале 90-х годов прошлого века документация небольшой, но возрастающей части Unix-проектов пишется непосредственно на HTML. Проблема данного подхода заключается в том, что генерировать из HTML высококачественный


HTML

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

HTML http://www.w3.org/MarkUp/HTML Home Page – стандарты HTML.http://uts.cc.utexas.edu/%7Echurchh/htmlchek.htmlHTML syntax and cross-reference checker – проверка синтаксиса HTML.http://www.ics.uci.edu/pub/websoft/MOMspider/MOMspider – Web Site Maintenance Utility – утилита для проверки корректности ссылок, имеющихся на


Встраивание драйверов в ядро

Из книги автора

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


4.1. Встраивание изображений

Из книги автора

4.1. Встраивание изображений Начнем с добавления изображения, потому что это самый простой для добавления и самый распространенный мультимедийный элемент, встречающийся в Интернете. У изображений много плюсов: статичность, небольшие размеры файлов (относительно других


Встраивание объектов

Из книги автора

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


Встраивание аудио

Из книги автора

Встраивание аудио Для начала возьмем самую распространенную задачу – проигрывание фонового звука. Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого


Встраивание видео

Из книги автора

Встраивание видео Сейчас встраивать видео на сайт можно без опасений – нынешних скоростей доступа в Интернет достаточно, чтобы у пользователей не было проблем с просмотром и скачиванием видео. Тем более что сейчас перемещение видеоархивов в сеть становится весьма


Встраивание Flash-графики

Из книги автора

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


Встраивание сценариев в рамках элемента SCRIPT

Из книги автора

Встраивание сценариев в рамках элемента SCRIPT Кроме возможности обработки событий, для внедрения сценариев в веб-страницы в языке разметки HTML есть специальный элемент SCRIPT. Браузер, встретив тег <script> в процессе разбора кода, интерпретирует текст, последующий до