Игорь Квинт - HTML, XHTML и CSS на 100% Страница 27
Игорь Квинт - HTML, XHTML и CSS на 100% читать онлайн бесплатно
<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.
7.2. Синтаксис CSS
Теперь, когда вы имеете представление о том, как можно добавить таблицу стилей в HTML-документ, разберем синтаксис языка CSS.
Ключевые слова
В CSS, как и в других языках программирования, есть ключевые слова. Помните, что в CSS они не должны заключаться в кавычки («…» или …). Так, например, red – это ключевое слово, а «red» – нет. Для большего понимания приведу еще примеры недопустимого написания:
width: «auto»;
background: "green";
border: "none";
Рассмотрим каждую строку отдельно. Итак, в первой строке ширина должна задаваться автоматически. Для автоматической задачи ширины нужно использовать ключевое слово auto без кавычек. Во второй строке используется ключевое слово green, которое означает название цвета «зеленый», а в третьей – ключевое слово none, означающее, что рамка не будет видна вообще. Как и в предыдущих строках, оно не должно заключаться в кавычки.
Комментарии
Комментарии в CSS начинаются с символов /* и заканчиваются символами */. Они могут находиться в любом месте таблицы. Использование комментариев очень удобно. Впоследствии вам может понадобиться много времени, чтобы сообразить, за какую часть документа отвечает тот или иной CSS-код. В то же время наличие комментариев поможет быстро в этом разобраться.
Приведем пример CSS-кода с комментарием:
/* Цвет основного заголовка – синий */
h1 { color: blue }
Из записи в комментарии понятно, что делает данное CSS-правило.
Правила@
Правила @ начинаются с ключевого слова @, непосредственно за которым следует идентификатор (например, @import, @page). Каждый из этих идентификаторов далее рассмотрим подробнее.
Все же надо отметить, что браузер с поддержкой CSS будет игнорировать все правила @import, которые находятся внутри блока CSS либо не предшествуют ни одному набору правил. Лучше всего это понять из примера. Рассмотрим неверную таблицу стилей:
@import «subs.css»;
h1 { color: blue }
@import "list.css";
Второе правило @import недопустимо. Браузер полностью проигнорирует второе правило @ целиком. Иными словами, в реальности он отобразит HTML-документ, используя такую таблицу стилей:
@import «subs.css»;
h1 { color: blue }
Приведем еще один пример недопустимого использования правила @:
@import «subs.css»;
@media print {
@import "print-main.css";
body { font-size: 10pt }
}
h1 {color: blue }
В этом примере второе правило @import недопустимо, так как оно находится в пределах другого блока @media.
В последующих разделах мы подробно разберем каждое правило @.
7.3. Селекторы
Селектором в CSS для простоты понимания будем считать название элемента, для которого задаются свойства. Теперь рассмотрим, как можно задать одни и те же свойства разным элементам документа.
Группировка
Для задания разным элементам документа одних и тех же свойств в CSS существует группировка. Селекторы, то есть элементы, можно сгруппировать в список, разделив запятыми.
Приведу пример, в котором разным элементам задается одно и то же свойство:
h1 { color: red }
h2 { color: red }
h3 { color: red }
Вышеприведенный пример можно значительно упростить, используя правило группировки:
h1, h2, h3 { color: red }
Как отмечалось выше, при группировке селекторы разделяются запятыми.
Селекторы потомков
Иногда необходимо задать свойства элементу, который располагается непосредственно внутри какого-то другого элемента, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.
Допустим, внутри HTML-документа есть такой код:
<h1>Очень <em>важный</em> заголовок</h1>
Теперь предположим, что мы хотим изменить свойства элемента H1 и слова важный внутри строки. Если мы используем CSS-код, описанный ниже, то повлияем на все элементы EM на странице, а этого делать не нужно:
h1 { color: red }
em { color: blue }
Чтобы повлиять на свойства слова важный, которое в нашем примере находится внутри элемента EM, а тот, в свою очередь, внутри элемента H1, надо использовать следующий CSS-код:
h1 em { color: blue }
Обратите внимание, что в отличие от группировки при обращении к потомкам запятые не ставятся. Количество элементов, которые можно записать потомками, не ограничено. Например:
body div p span { color: green }
Если в документе встретится элемент SPAN, находящийся внутри элемента P, который, в свою очередь, находится внутри элемента DIV, то текст в элементе SPAN будет зеленым. В столь длинных описаниях элемент BODY можно опускать, так как все элементы находятся внутри него.
Если при разработке таблицы стилей вы еще точно не знаете, какой элемент будет размещаться внутри какого, можете воспользоваться символом *. Учтите, что с обеих сторон этого символа обязательно должны находиться пробелы.
Пример, представленный выше, можно переписать так:
body * span { color: green }
Нужно помнить, что текст будет зеленым, даже если элемент SPAN будет просто находиться внутри элемента DIV. Иными словами, звездочкой считается любой набор селекторов и их потомков.
Сестринские селекторы
Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя такой код:
Жалоба
Напишите нам, и мы в срочном порядке примем меры.
