До этого мы рассматривали задание стиля линейно. Теперь мы будем строить для страниц стилевые таблицы.
Простейшие таблицы стилей, элемент ‹style›
Начнём с простейших таблиц стилей.
Ранее мы включали стилевую информацию в каждый тег, что приводило к раздутию кода — одни и те же стилевые правила повторялись множество раз. К тому же, поддержка и обновление таких страниц усложняется из-за того, что оформление и информация в них перемешаны.
Намного удобней выносить сведения о представлении страницы XHTML в отдельный элемент. Логично назвать этот элемент ‹style› и расположить его в служебном разделе документа — в элементе ‹head›.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css"> /*Стилевые правила*/ </style>
</head>
<body> <!-- Содержимое элемента ‹body› -->
</body>
</html>
Обязательный атрибут type элемента ‹style› определяет используемый язык описания оформления документа. Мы будем использовать каскадные таблицы стилей CSS, то есть как значение атрибута type запишем «text/css».
Комментарии в CSS записываются между знаками /**/, вот так - /*комментарий*/.
Из других стилевых языков стоит назвать JavaScript Style Sheets и XML Stylesheet Language.
Внутри элемента ‹style› распологаются стилевые спецификации. Каждая стилевая спецификация состоит из селектора и правил, применяемых к элементам, отвечающим данному селектору. Теперь пример.
В примере для элемента ‹body› задаётся гарнитура Minion Web, а для элементов ‹p› — крупный кегль.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css">
body {font-family: Minion Web, Palatino Linotype, Book Antiqua,
Baskerville Win95BT, Times New Roman, serif;}
h1 {text-align: center;letter-spacing: 0.1ex;font-style:normal;}
p{text-align: justify;text-justify:newspaper;text-indent:1.25em;
font-size:1.05em;}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur
aut odit aut fugit, sed quia consequuntur magni dolores eos, qui
ratione voluptatem sequi nesciunt,neque porro quisquam est, qui dolorem
ipsum, quia dolor sit, amet, consectetur,adipisci velit, sed quia non
numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit,
qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel
illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? </p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum,
quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem.</p><p>Quis autem vel eum iure reprehenderit, qui in ea
voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui
dolorem eum fugiat, quo voluptas nulla pariatur?
</p>
</body>
</html>
Таким образом , в элементе ‹style› записываются правила по представлению элементов. Первой строкой идёт селектор «body» после которого в фигурных скобках записано правило по подбору гарнитуры. Итак, селектор есть условие выбора элементов; в простейшем случае — селектор — просто тип элемента, к которому будут применяться правила. Правила записываются после селектора в фигурных скобках. Правила — набор свойств и их значений, разделённых точками с запятой. До этого мы записывали правила напрямую в теге элемента в атрибуте style. Теперь же мы будем выносить общие свойства отдельно.
Далее следуют селекторы для элементов ‹h1› и ‹p›. Обратите внимание, что дочерние элементы наследуют свойства родительских элементов. Например, ‹body› задана гарнитура, и эта же гарнитура автоматически наследуется дочерними элементами ‹h1› и ‹p›.
Мы описали представление всех абзацев несколькими строками в элементе ‹style›. Ранее нам пришлось бы указывать правила по представлению каждого абзаца отдельно в атрибуте style, то есть на лицо уменьшение размера файла. Также, теперь намного легче выровнять все абзацы по правому краю и задать для них курсивное начертание. Нам для этого понадобится лишь изменить пару строчек в одном месте документа. Vice versa, при использовании атрибута style нам пришлось бы изменять этот атрибут для трёх абзацев. А если в документе 10 абзацев? 20? 100? Итак, использование элемента ‹style› упрощает поддержку и изменение Web-страниц, так как все правила собраны вместе.
В элементе ‹style› можно указать атрибут media, который описывает, при отображении страницы на каком носителе следует применять данный стиль. Например, «media="screen"» определяет таблицу стилей для отображения на экране, а «media="print"» — таблицу стилей для печати страницы. «media="all"» определяет одну общую таблицу стилей для всех носителей.
Это удобно для адаптации страницы к различным носителям. Например, на экране странице может быть задан чёрный фон, зелёный текст на котором будет отображаться крупной гельветикой. И эта же страница будет распечатываться чёрной антиквой кеглем в 1 цицеро на белом листе. Согласитесь, это удобно.
Селекторы по иерархии
Возможно определение в стиле условий по вложению элементов.
Для этого в селекторе через пробел перечисляются родительские элементы; список заканчивает дочерний элемент.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css">
body {font-family: Minion Web, Palatino Linotype, Book Antiqua,
Baskerville Win95BT, Times New Roman, serif;}
h1 {text-align: center; letter-spacing: 0.1ex; font-style: normal;}
p {text-align: justify; text-justify: newspaper; text-indent: 1.25em;
font-size: 1.05em;}
h1 strong {text-transform: uppercase;}
p strong {font-style: italic;}
p em strong {font-style: normal;
text-decoration: underline;}
p em {color: rgb(75%, 0%, 0%);}
</style>
</head>
<body>
<h1>Ut enim ad<strong>minima</strong>veniam…</h1>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui
<strong>dolorem ipsum</strong>, quia dolor sit, amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt, ut
labore et dolore magnam aliquam quaerat voluptatem. <em>Ut enim
<strong>ad minima veniam</strong>, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
</em>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit
esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum
fugiat, quo voluptas nulla pariatur? </p> <p> Ut enim
ad minima veniam,quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil
molestiae consequatur.
</p>
</body>
</html>
Итак, в приведённом коде перечислены правила по представлению элементов ‹strong› в зависимости от того, дочерними элементами какого элемента они являются. Если элемент ‹strong› вложен в элемент ‹h1›, он выделяется верхним регистром. Если вложен в ‹p› — курсивом. А если вложен в ‹em›, который в свою очередь вложен в элемент ‹p› — подчёркиванием.
Объединение селекторов
Похожие стили можно определять, просто перечисляя селекторы через запятую.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css">
body {font-family: Minion Web, Palatino Linotype, Book Antiqua,
Baskerville Win95BT, Times New Roman, serif;}
h1 {text-align: center;letter-spacing: 0.1ex;}
p {text-align: justify;text-justify: newspaper; text-indent: 1.25em;
font-size: 1.05em;}
h1 strong {text-transform: uppercase;}
h1, p, h1 strong {font-style: normal;}
</style>
</head>
<body>
<h1>Ut enim ad <strong>minima</strong> veniam…</h1>
<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt,
explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum,
quia dolor sit, amet, consectetur,adipisci velit, sed quia non numquam
eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse,
quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo
voluptas nulla pariatur? </p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit
aut fugit, sed quia consequuntur magni dolores eos, qui ratione
voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum,
quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat
voluptatem.</p>
</body>
</html>
Идентификаторы
Описанные выше методы не позволяют выделить отдельное слово без задания того же оформления всем элементам того же типа.
Для того, чтобы определить оформление отдельного элемента, необходимо дать этому элементу идентификатор. После этого на этот элемент можно ссылаться, записав в качестве селектора диез и сам идентификатор. Например, выделим слово подчёркиванием.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css">
body {font-family: Minion Web, Palatino Linotype, Book Antiqua,
Baskerville Win95BT, Times New Roman, serif;}
h1 {text-align: center;letter-spacing: 0.1ex;}
p {text-align: justify; text-justify: newspaper; text-indent: 1.25em;
font-size: 1.05em;}
#emphasis {letter-spacing: 0.35ex;}
</style>
</head>
<body>
<h1> Lorem Ipsum </h1>
<p><em id="emphasis">Dolorem ipsum</em>,quia dolor sit,amet,consectetur,
adipisci velit,sed quia non numquam eius modi tempora incidunt, ut
labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel
eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil
molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas
nulla pariatur?</p><p>Nemo enim ipsam voluptatem, quia voluptas sit,
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos,
qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui
dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt, ut labore et dolore magnam
aliquam quaerat voluptatem.
</p>
</body>
</html>
То есть, если ранее мы записывали оформление элемента в самом элементе, то теперь мы даём элементу идентификатор и далее на этот идентификатов ссылаемся из стиля.
Итак, атрибут style заменяется атрибутом id и ссылкой на элемент в элементе ‹style›. Это позволяет упростить код и облегчить обновление документов.
Классы
Идентификаторы позволяют задать оформление отдельного элемента. Классы же служат для группировки подобно оформленных элементов.
Можно задать одинаковое оформление для нескольких элементов, объединив их в один класс. Для этого нужно определить класс атрибутом class, после чего на него можно ссылаться из стиля, записав в качестве селектора имя элемента, точку и класс элемента.
Имена классов составляются аналогично идентификаторам. Имена классов регистрозависимы и составляются из латинских букв, цифр и дефисов и начинаются всегда только с буквы.
Старайтесь подбирать для классов понятные имена, тогда Вам в последствии будет легче разобраться, за что же отвечает тот или иной класс.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css">
body {font-family: Minion Web, Palatino Linotype, Book Antiqua,
Baskerville Win95BT, Times New Roman, serif;}
h1 {text-align: center;letter-spacing: 0.1ex;}
p {text-align: justify; text-justify: newspaper; text-indent: 1.25em;
font-size: 1.05em;}
p.emphasis { /* Оформление абзацев класса emphasis. */font-size: 1.35em;
text-indent: 1.05em;}
</style>
</head>
<body>
<h1> Lorem Ipsum </h1>
<p class="emphasis">Sed ut perspiciatis, unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam eaque
ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt, explicabo. </p> <p> Nemo enim ipsam
voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,
neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt,ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p class="emphasis">Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur?</p>
<p>Quis autem vel eum iure reprehenderit, qui in ea voluptate velit
esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum
fugiat, quo voluptas nulla pariatur?
</p>
</body>
</html>
Возможно также определение одного класса для различных элементов. Тогда в селекторе в качестве имени элемента нужно записать звёздочку.
Комбинируя оба метода можно определять сложное оформление, опираясь лишь на структуру XHTML-документа. Например, ниже определено общее увеличение кегля для всего класса emphasis, но для абзацев этого класса определён меньший отступ.
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<style type="text/css">
body {font-family: Minion Web, Palatino Linotype, Book Antiqua,
Baskerville Win95BT, Times New Roman, serif;}
h1 {text-align: center;letter-spacing: 0.1ex;}
p {text-align: justify; text-justify: newspaper; text-indent: 1.25em;
font-size: 1.05em;}
p.emphasis {text-indent: 1.05em; text-align: left;}
*.emphasis {font-size: 1.35em;}
</style>
</head>
<body>
<h1> Lorem <em class="emphasis">Ipsum</em> </h1>
<p class="emphasis">Sed ut perspiciatis, unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam eaque
ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt, explicabo. </p> <p> Nemo enim ipsam
voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,
neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p class="emphasis"> Ut enim
<span class="emphasis">ad minima veniam</span>, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? </p> <p> Quis autem vel eum
iure reprehenderit, qui in ea voluptate velit esse, quam nihil
molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas
nulla pariatur?
</p>
</body>
</html>
Звёздочку можно опускать, ссылаясь на класс просто через точку и имя класса. Например, «.emphasis { }» аналогично записи «*.emphasis { }».
Обратите внимание, что для слов «ad minima veniam» задано увеличение относительно кегля абзаца, то есть по сравнению с ‹body› эти слова будут набраны в 1,35·1,35=1,35??1,82 раза большим кеглем.
Классы определяются для элементов с подобным оформлением, идентификаторы — для элементов с уникальным.
Внешние таблицы стилей
Если у Вас есть несколько Web-страниц, их оформление удобно сохранить в отдельном файле.
Давайте сохраним содержимое элемента ‹style› в отдельном файле с расширением .css. Тогда этот файл можно будет подключить ко всем вашим XHTML-документам, и они будут оформлены в едином стиле. Мало того, если Вы захотите изменить оформление всех своих Web-страниц, Вам не прийдётся менять каждую из них. Вам нужно будет изменить лишь один файл, и изменения автоматически отразятся во всех Ваших XHTML-страницах.
Вот как может выглядеть файл view.css:
/* Содержимое файла view.css. */
body {background-color: rgb(100%, 80%, 60%); color: black;
font-family: trebuchet ms, officina sans, meta, sans-serif;}
h1 {text-align: center; font-size: 3.4em; font-style: italic;}
p {line-height: 1.2em; text-indent: 0.8em; text-align: justify;
text-justify: newspaper;}
h1, strong {font-weight: normal; letter-spacing: 0.6ex;
color: rgb(100%, 80%, 0%);}
Этот файл можно подключить к Web-странице с помощью элемента ‹link›. В атрибуте rel, описывающем отношение подключаемого ресурса к документу, нужно указать «stylesheet»; в атрибуте type — тип данных подключаемого ресурса, для нас это «text/css»; в атрибуте же href — путь к внешней таблице стилей. Вот как это выглядит (предполагается, что файл view.css находится в той же папке, что и оформляемый документ).
<html>
<head>
<title>Пример каскадных таблиц стилей</title>
<link rel="stylesheet" type="text/css" href="./view.css" />
<!-- Подключение внешней таблицы стилей -->
</head>
<body>
<!-- Содержимое элемента ‹body›. -->
</body>
</html>
В элементе ‹link› можно указать атрибут media, который описывает, при отображении страницы на каком носителе следует применять данный стиль. Например, «media="screen"» определяет таблицу стилей для отображения на экране, а «media="print"» — таблицу стилей для печати страницы. «media="all"» определяет одну общую таблицу стилей для всех носителей.
Это удобно для адаптации страницы к различным носителям. Например, на экране странице может быть задан чёрный фон, зелёный текст на котором будет отображаться крупной гельветикой. И эта же страница будет распечатываться чёрной антиквой кеглем в 1 цицеро на белом листе. Согласитесь, это удобно.
Итак, сохранение таблицы стилей в отдельном файле удобно для однотипного оформления множества страниц. |
Войти
Тематическое разделение информации.
Обновления в статьях по xhtml, css, java-script, UcoZ-системе и т.д.
Ваши комментарии.
p.s. l2meat.at.ua - там сами поймёте , чего я хочу!
