 |
 |
 |
 |
|
 |
|||||||||||||||||||
 |
 |
||||||||||||||||||
 |
 |
||||||||||||||||||
 |
 |
||||||||||||||||||
 |
Гостевая | ||||||||||||||||||
 |
Статьи | ||||||||||||||||||
 |
Веб-дизайн | ||||||||||||||||||
|
Фотошоп | ||||||||||||||||||
|
Система | ||||||||||||||||||
|
Биос | ||||||||||||||||||
|
|||||||||||||||||||
|
|||||||||||||||||||
Каскадные таблицы стилей (CSS)
Internet Explorer предлагает вам свой стиль, называемый по умолчанию. Этот стиль предполагает белый чистый фон, черный цвет шрифта, все ссылки подчеркнутые и синего цвета и т. д. Что если вам не нравится все это? Вы уже умеете менять различные аттрибуты напрямую. Даже если одинаковых по значению объектов и много, вы уже умеете применять классы. Но существует еще одна возможность. Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
Классический HTML версии 3.2, наиболее распространенный на данный момент в сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные тэги (например, тэги <font> <b>, <i>) и множество различных атрибутов (size, color, height, width и т.п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти тэги и атрибуты для каждого нового абзаца, что очень сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования при попытке проанализировать структуру документа остается непонятным - выделено данное слово жирным начертанием просто для красоты, или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых браузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой "неподвластности" логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, т.е. такое форматирование, при котором структура и оформление документа были бы четко разделены.
Все оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили. При показе странички конкретному устройству должна быть задействована соответствующая случаю таблица стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае мы используем минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае в нашем распоряжении имеется все богатство шрифтового и цветового оформления. Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.
Реализуется разделение структуры и оформления документа как раз с помощью CSS, или, по-русски, каскадные таблицы стилей - мощное средство стилевого оформления. Это уже стандарт оформления HTML - документов в Сети.
С помощью CSS можно создать как единый стиль, так и оформление отдельных элементов, которое, кстати, подчас невозможно создать с помощью обычных тэгов физического форматирования типа <font>, <b>, etc.
Размещение всей стилевой информации в одном внешнем файле открывает нам и другие полезные возможности - ведь изменив содержимое только одного (!) стилевого файла, мы можем в считанные секунды сменить весь дизайн сайта. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально сайт был спроектирован верно.
Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тэгу HTML, в том числе тэгу <body>. Если стиль задан для тэга <body>, он наследуется всеми элементами (абзацами, заголовками и т.д.), помещенными внутри этого тэга-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать тэги font и атрибуты color, size и т.п. для каждого абзаца на странице - достаточно задать некий стиль для тэга <body>, и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?
Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тэга <body>, присвоив ему соответствующее значение. Синтаксис такой:
<body style="font-family: 'Times New Roman', serif; font-size: 12pt; color: darkgreen;">Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тэгами <font> и их атрибутами. Представляете, какая экономия в размере файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, браузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, что, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тэг документа — так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях — если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице, или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы — создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial полужирного начертания размером 16 пунктов зеленого цвета, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в "голове" страницы (в любом месте между тэгами <head> и </head>) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тэг-контейнер таблицы стилей, начинающийся открывающим тэгом <style> и заканчивающийся закрывающим тэгом </style>. Внутри этого тэга-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тэга HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:
<head> … <style> body { font-family: 'Times New Roman', serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; } </style> … </head>Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, если вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
body { font-family: 'Times New Roman', serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; }Обратите внимание: тэги <style> и </style> внутри файла таблицы стилей не используются - расширение .css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В .html-файле для связывания нужно прописать в любом месте между тэгами <head> и </head> следующую строку:
<head> ... <link rel="stylesheet" type="text/css" href="my.css"> ... </head>В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css( (type="text/css"), и находится он в той же директории, что и файл .html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в "голове" страницы внутри тэга-контейнера <style>) имеют преимущество перед связанными стилями при анализе страницы браузером. Следовательно, при использовании связанных стилей мы всегда имеем возможность переназначить стиль именно для данного конкретного элемента страницы.
Для импортирования файла таблицы стилей (в том числе с другого сервера) мы должны прописать в любом месте между тэгами <head> и </head> внутри тэга-контейнера <style> следующую строку:
<head> ... <style> ... @import: url (my.css); ... </style> ... </head>Помимо адреса импортируемой таблицы стилей вы можете прописать в тэг-контейнер <style> любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице. Эти правила, как вы помните, будут называться внедренными. Внедренные правила приоритетнее импортированных при анализе страницы браузером, именно поэтому они могут корректировать стили, импортированные извне. В целом, браузер расставляет приоритеты таблиц стилей следующим образом:
inline-стили (встроенные с помощью атрибута style непосредственно в тэги документа) - наивысший приоритет, будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
внедренные стили (перечисленные в тэге-контейнере <style> в "голове" документа) - чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в тэге-контейнере <style>) - еще меньший приоритет, будут применяться в тех случаях, если отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;
связанные стили (стили, присоединенные к html-файлу посредством тэга <link>) - наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
Таким образом, зная, в какой последовательности браузер анализирует таблицы стилей, мы можем задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к html-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.
Подключение таблиц стилей
Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:
- внешний файл
- описание в секции заголовка
- inline-описание
Начнем с самого простого, с так называемого inline-описания или описания, встроенного в тег:
<p style="color:red; text-align:center;"> Этот текст переопределен стилем</p>
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.
Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам. Это будет второй способ - описание в секции заголовка. Его действие распространяется на всю страничку. Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.
При использовании этого метода описание стилей необходимо разместить в секции заголовка:
<head>
....
<style type="text/css">
<!--
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
-->
</style>
</head>Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:
<p class=header>Этот текст написан стилем header<p>
<p class=red>Этот текст написан красным цветом<p>Как видите, все не так уж сложно. Главное понять основные принципы. Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:
<style type="text/css">
<!--
p { text-align : center; font-size : 12pt;}
-->
</style>Теперь весь текст, заключенный в теги <p></p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объем файла за счет отсутствия лишних атрибутов class.
И наконец, третий способ - вынесение описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет.
Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
p { text-align : center; font-size : 12pt;}А потом ссылка на него внедряется в документ при помощи тега <link>:
<head>
....
<link rel="stylesheet" type="text/css" href="css/mystyle.css" title="MyStyleSheet">
....
</head>Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.
