[Править]css-вёрстка
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Преимущества:
Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и могут быть закешированы.
Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
Недостатки:
Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.
Стили и таблицы стилей
На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств,значения которых определяют его вид при выводе браузером. Так, например, у большинства тегов (<P>, <TD>, и т. д.) есть свойство COLOR, значение которого определяет цвет, используемый для отображения содержимого тега.
Таблица (лист) стилей CSS -- набор правил отображения, применяемых в документе, к которому присоединяется соответствующая таблица стилей. Все свойства, использующиеся в таблицах стилей, условно можно разделить на несколько групп:
управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..);
управляющие форматированием абзаца (отступ красной строки, выравнивание, интерлиньяж, расстояние между словами,..);
управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока в документе, видимость блока,..);
другие (цвет ссылок, изменение внешнего вида курсора,..).
Классы стилей
При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.
Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P>), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.
Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора класса CLASS.
<HTML>
...
<BODY>
...
<P CLASS="ask">Вопрос журналиста</P>
<P CLASS="answer">Ответ интервьюируемого</P>
...
</BODY>
</HTML>
В разделе HEAD документа зададим стиль каждого класса.
P.ask{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
text-align: justify;
color: gray;
margin-left: 100px;
font-weight: bold;
}
P.answer{
font-family: Times, serif;
font-size: 14pt;
color: black;
text-align: justify;
margin-left: 20px;
}
Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.
Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.
Каскадные таблицы стилей
Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования. Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты.
Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое возможно осуществить тремя способами: inline-описание, описание в секции заголовка и использование внешнего файла.
Самый простой способ -- это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута STYLE можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <FONT>.
Пример
<P STYLE="color:red; text-align:center;">Этот
параграф переопределен стилем</P>
Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам, т. е. воспользоваться способом описания стилей в секции заголовка. Именно этим способом мы пользовались в примерах, рассматривающих форматирование абзаца и оформление интервью. Действие таблицы стилей, подключенной таким образом, распространяется на весь HTML-документ.
И наконец, третий способ, -- вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css. В раздел HEAD документа включить строку, аналогичную следующей, где атрибут HREF содержит имя файла со стилями:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="list.css">
Диапазон воздействия таблицы в этом случае простирается на все файлы, в которые включено такое описание. Если потребуется изменить внешний вид группы документов, то будет достаточно откорректировать лишь один стилевой файл. Сравните этот способ с предыдущими: в одном из них придется менять описание стилей в каждом документе, а в другом -- даже в каждом теге.
На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный.
Например, пусть во внешнем стилевом файле определено, что текст в теге <P> должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе HEAD документа переопределить тег <P>, указав, что текст должен отображаться шрифтом в 12 пунктов, то он будет выведен именно таким кеглем - стиль, расположенный в заголовке документа, переопределит стиль внешнего файла.
В целом, браузер расставляет приоритеты таблиц стилей следующим образом:
inline-стили (встроенные с помощью атрибута STYLE непосредственно в теги документа) -- наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;
внедренные стили (перечисленные в теге-контейнере <STYLE> в разделе <HEAD> документа) - чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);
связанные стили (стили, присоединенные к HTML-файлу посредством тега <LINK>) - наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.
Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS (cascading style sheets) - несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким "каскадом" в порядке их приоритетности.
Применение таблиц стилей
Подготавливая Web-материал, авторы всегда встают перед выбором, как организовать оформление материала: пользоваться обычными средствами HTML или подключать таблицы стилей? Профессиональные Web-дизайнеры всегда останавливают свой выбор на таблицах стилей. Какие же преимущества имеет этот подход?
Во-первых, таблицы стилей позволяют разделить смысловое содержимое документа и его оформление. Согласно идеологии текстовой разметки все оформление рекомендуется вынести во внешний стилевой файл. Основной документ будет содержать только информацию и ссылки на необходимые стили. Такой подход дает возможность конкретному устройству при показе документа задействовать соответствующую таблицу стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае нужно использовать минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае допустимо использовать все возможности шрифтового и цветового оформления.
Во-вторых, как мы уже убедились, размещение всей стилевой информации в одном внешнем файле позволяет, изменив содержимое только одного (!) стилевого файла, в считанные секунды сменить дизайн целой группы документов. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если все документы группы ссылаются на одну и ту же таблицу стилей.
В-третьих, таблицы стилей довольно часто используются для достижения единого стиля оформления какого-либо набора документов. Например, члены научного сообщества, готовя материалы к публикации их на WWW-сервере, могут пользоваться стандартными таблицами стилей, которые для них заранее подготовил Web-мастер.
Основы CSS
|
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTMLкода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя. CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли? Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Webстраниц. Потрясающе удобно. И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле. Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой. Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь. Практическое освоение CSS Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере. Второй вариант, при котором описание стилей располагается в коде Webстранички, внутри тега <BODY>, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания броузеру использовать CSS. И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Webстраниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже. Пример:
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет. Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега <P>...</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа. CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее. Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных). Пример:
Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
Содержащийся в ячейке текст будет отображаться согласно описанию класса. Таким образом, вы можете присвоить описанный стиль любым текстовым элементам страниц. Обратите внимание, что при написании названия классов необходимо соблюдать регистр символов, согласно тому, как вы назвали класс в описании стиля! Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс. Свойства элементов, управляемых с помощью CSS В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но из-за того, что этот стандарт еще очень молод, в полном объеме его пока не поддерживают наиболее популярные броузеры (Netscape Navigator и Microsoft Internet Explorer). Последние версии этих броузеров могут работать с довольно большим количеством команд CSS, а вот 3-и версии или совсем не поддерживают его (Netscape Navigator 3), или поддерживают, но лишь частично (Microsoft IE 3). Более того, поскольку разработчики из этих компаний никак не могут договориться между собой, последние версии броузеров поддерживают неодинаковый набор свойств CSS. Все это делает малоприемлемым использование CSS в полном объеме, так как, при использовании CSS для форматирования элементов страницы и просмотре ее с помощью броузера версии ниже 4й, есть большая вероятность увидеть нечто такое, что вам не понравится. Поэтому будет разумнее воздержаться от использования CSS для форматирования основной структуры страниц до всеобщего перехода на последние версии броузеров. В то же время, применяя «безопасные», т. е. совместимые с максимальным количеством броузеров элементы CSS, вы можете сильно облегчить себе жизнь и сделать ваши Web-странички более привлекательными в плане шрифтового оформления, а пользователи, путешествующие по Internet с помощью устаревших броузеров, просто этого не увидят, но также они не увидят и тех кошмаров, которые появляются при использовании CSS для верстки страниц.
Итак, перейдем к изучению безопасных элементов CSS. Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием. Указывая абсолютные, а не относительные размеры шрифтов, вы лишаете людей, просматривающих ваши странички, возможности увеличивать или уменьшать размер шрифтов с помощью специальной кнопочки в броузере в соответствии с разрешением их дисплея и зрением. Шрифты будут отображаться только такого размера, который вы указали при написании странички. Поэтому, если использование абсолютных размеров шрифтов не обусловлено художественным замыслом или коварным умыслом, рекомендую вам использовать для этих целей указание размеров в процентах. В этом случае размер шрифта будет меньше (больше) на указанное вами количество процентов, чем при оформлении его с помощью стандартного HTML-тега. Есть еще одна небольшая, но очень полезная хитрость – это способ скрыть от устаревших броузеров описания стилей, располагающихся в теге <STYLE>, внутри раздела<HEAD>. Поскольку броузер был написан несколько лет назад, когда никакого CSS еще и в планах не было, он просто не поймет, что это такое написано внутри <STYLE>…</STYLE>, и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.
Устаревшие броузеры посчитают все заключенное между тегами комментариев информацией неотображенной, а новые и сообразительные броузеры определят, что это — описание стилей, и задействуют их. Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью: вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать один слой текста на другой и получать весьма интересные и привлекательные результаты. Добиться такого эффекта не очень сложно, давайте попробуем создать страничку с заголовком, который будет выглядеть трехмерным, но не будет использовать графику. Создадим новый html-файл и составим описание стилей для трех объектов:
В этом описании мы присвоили <BODY> (впрочем, это мог быть практически любой другой тег) размер, шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для каждого из классов z. Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг них: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий...
Откроем наш любимый Web-редактор Notepad и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничках нашего сайта:
Внутри описания стиля для удобства форматирования вы можете использовать любое количество пробелов и переносов строк – при чтении стиля броузер просто отбросит все лишние пробелы. В этом стиле мы задали, что параграфы <P> на всех страничках, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание – полное (по обеим сторонам). Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал, который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать. В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт – так текст статьи будет гораздо читабельнее. Давайте так же создадим стиль для заголовков статей:
Все заголовки наших страниц, оформленные тегом <H2>, будут отображаться жирным шрифтом Verdana или, если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установим равным 14 пунктам, цвет черный, отступ слева равен 20 % ширины страницы, а отступ сверху – 1 см. Заголовок будет выравниваться относительно левого края страницы. Благодаря тому, что боковые отступы заголовка и параграфа установлены нами в процентах от ширины окна броузера, при просмотре наших страничек на компьютерах с разным разрешением дисплея пропорции и расположение заголовка, основного текста и отступов будут сохранены. Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр HREF="URL" в нашем случае будет просто именем нашего файла стилей (styles.css). |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||