Каскадные таблицы стилей или что такое css?
Cascading Style Sheets или же css при переводе на русский язык означает «каскадные таблицы стилей». Согласно официальной документации W3C css представляет из себя механизм для добавления оформления в html документ.
О том почему эти таблицы стилей названы «каскадными», почему все оформление страниц сайта следует делать используя именно css, а не те же атрибуты html, какие выгоды принесло веб-разработчикам внедрение каскадных таблиц стилей в обиход и пойдет речь в этой статье.
Что такое каскадные таблицы стилей?
CSS настолько прочно вошел в обиход верстальщиков веб-страниц, что на сегодняшний день мало кто вообще представляет как создавались сайты до его появления. Это инструмент по истине потрясающий воображение своей простотой и функциональностью.
Сама по себе каскадная таблица стилей представляет собой набор правил отвечающих за то, как будут отображаться на экране монитора те или иные элементы html структуры документа.
В слове «каскадная» заключается главная особенность данного языка веб-разработки, позволившая ему стать настолько популярным среди веб-мастеров. Она заключается в том, что в css используется наследование правил оформления элементов (стилей) от старшего элемента (родителя) к младшему (потомку, элементу содержащемуся внутри родителя, вложенному тегу, если будет понятнее).
Подробнее о «родственных» связях html тегов можно почитать в статье: «Что такое дерево документа в HTML?»
Такая каскадность позволяет не прописывать оформление для каждого конкретного элемента документа, а задавая всего несколько правил существенным образом влиять на внешний вид нашей страницы.
Для того, чтобы точно определять как должен выглядеть конкретный элемент оформления в официальном стандарте css прописаны приоритеты наследования стилей, что позволяет избежать путаницы при считывании кода.
Наследование стиля вместе с четкой расстановкой приоритетов наследования и образует собой в конечном итоге «каскад».
Пример использования css
#footer h4 {
font-family: "Cuprum",Arial,sans-serif,Verdana;
font-size: 21px;
text-transform: uppercase;
width: 300px;
padding-bottom: 10px;
background: url(/repeating-slash-bg.png) repeat-x bottom;
color: #000;
cursor: pointer;
}Данный фрагмент кода взят из оформления заголовка на одном из сайтов. Он представляет собой одно обычное правило, которое в свою очередь состоит из:
- Селектора – часть кода сообщающая браузеру к какому именно элементу или же совокупности элементов применяется данное правило. В нашем примере селектор это «#footer h4». Подробнее правила построения селекторов и принципы наследования оформления будут рассмотрены в дальнейших уроках.
- Блока определений – набор стилей оформления для конкретного селектора. Он содержится между фигурных скобок после селектора. Стили написанные не блоком, а в одну строку являются признаком дурного тона в оформлении css кода.
Правила оформления кода могут располагаться как в пределах html страницы (вложенные и встроенные таблицы стилей) для которой они используются, так и прикрепляться к ней отдельным файлом (внутри css файла и в html файл). По этому признаку их разделяют на внутренние и внешние соответственно.
Зачем понадобилось разделять содержимое и оформление html страниц?
На заре веб-разработки html использовался не только для создания структуры документа, но и для его оформления. Это приводило не просто к тому, что страницы выглядели неказисто и однообразно, а к тому, что код страницы становился крайне громоздким и сложным для восприятия, к тому же процесс корректировки внешнего вида становился достаточно нетривиальной задачей, поскольку для изменения оформления нескольких элементов необходимо было поменять оформление каждого из них вручную.
Пример кода с оформлением на чистом html:
<h2 align="center">Главный заголовок страницы</h2> <font face"Cuprum",Arial,Verdana " size="3" color="#060606"> Текст страницы </font> <hr size="1px" color="#c8c8c8" align="left"/>
Теперь пройдемся подробнее по основным причинам перехода от чистого html к html + css:
- Слишком громоздкий код страницы значительно увеличивал размер файла, что ухудшало время загрузки страницы и увеличивало нагрузку на сервер.
- Смешивание «логической» и «визуальной» части оформления приводило к ухудшению индексации страниц поисковыми роботами.
- Адаптация внешнего вида сайта под различные типы браузеров и устройств становилась невозможна.
- Код становился «грязным» не читабельным, что усложняло его поддердку веб-разработчиками.
- Ограниченность функционала оформления тегами приводила к однообразному и пресному внешнему виду сайтов. При помощи одних только атрибутов невозможно настроить полноценное оформление сайта.
- Внесение изменений в дизайн становилось крайне трудоемкой задачей, поскольку оформление приходилось менять каждому конкретному элементу, без возможности задания его целой группе элементов в один прием.
После внедрения стандарта css он решил множество проблем и позволил наконец html-лю стать тем, чем он и задумывался- языком логической разметки документа.
Что изменилось с внедрением css?
- Разделение структуры документа на логическую разметку и оформление сделало код значительно «чище», тоесть читабельней, понятней для восприятия.
- Появилась возможность адаптации сайтов для различных устройств за счет подключения для них различных правил оформления.
- Один файл css может оформлять все страницы сайта, что позволяет значительно снизить трудоемкость веб-разработки, размер сайта в целом.
- Простота применения каскадных таблиц стилей значительно сократила время на веб-разработку.
- За счет кеширования файла с оформлением сайта на порядок ускорилось время загрузки страниц сайтов и снизилась нагрузка на сервера в целом.
Подводя итоги
CSS это революционная для своего времени технология перевернувшая мир веб-разработки с ног на голову много лет назад. На сегодняшний день это официальный стандарт повсеместно использующийся в веб-разработке для оформления логической части сайтов. Он достаточно прост в освоении и крайне гибок в использовании.
Оценок: 3 (средняя 5 из 5)
- 2267 просмотров
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
| XHTML Каскадные таблицы стилей (CSS) Кодировки символов Сравнение движков отображения Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Скрипты в HTML Юникод и HTML Цвета в Web (Web colors) WWW-Консорциум (W3C) |
|---|
Представление Web-страниц. Каскадные таблицы стилей css3. План
Введение в стили CSS.
Создание стилей CSS.
Таблицы стилей.
Правила каскадности и приоритет стилей.
Важные атрибуты стилей.
Какие стили в каких случая применять.
Комментарии CSS.
1. Устно. Предыдущая часть книги была посвящена содержимому Web-страниц и языку HTML 5, на котором оно создается. Мы изучили немало новых терминов, использовали много тегов HTML и создали несколько Web-страниц нашего первого Web- сайта. Эти Web-страницы содержат большой объем текста, таблицу, графическое изображение, аудио- и видеоролик. Неплохо для начала.
Только вот выглядят эти Web-страницы как-то невзрачно. Однообразный текст, похожие друг на друга абзацы, таблицы без рамок, тоскливая черно-белая расцветка… Не помешает их как-то оформить. Вы так не считаете?..За оформление Web-страниц и отдельных их элементов «отвечает» представление. Именно представление поможет нам оформить абзацы, таблицы и гиперссылки так, как хотим мы, а не Web-обозреватель (точнее, его разработчики). Именно представление поможет нам сделать Web-страницы привлекательными.
Понятие о стилях CSS. Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (Cascading Style Sheets, CSS), или просто таблиц стилей. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web- страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое. Каждый стиль должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки описываемые выбранным стилем параметры начинают применяться к данному элементу. Привязка может быть явная, Таблица стилей может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.
Таблицы стилей пишут на особом языке, который так и называется — CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.
Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными про-граммами) мы и будем изучать.
2. Обычный формат определения стиля CSS иллюстрирует листинг 5.1.
<селектор> {
<атрибут стиля 1>: <значение 1>;
<атрибут стиля 2>: <значение 2>;
. . .
<атрибут стиля n-1>: <значение n-1>;
<атрибут стиля n>: <значение n>
}
Листинг 5.1.
Вот основные правила создания стиля.
— определение стиля включает селектор и список атрибутов стиля с их значениями.
— селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.
— за селектором, через пробел, указывают список атрибутов стиля и их значений, заключенный в фигурные скобки.
— атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ : (двоеточие). В некоторых случаях значение атрибута стиля заключают в кавычки.
Пары <атрибут стиля>:<значение> отделяют друг от друга символом ; (точка с запятой).
— между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.
— определения различных стилей разделяют пробелами или переводами строк.
— внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web-обозреватель их игнорирует. Поэтому мы можем форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.
Но правила — правилами, а главное — практика. Давайте рассмотрим пример не-большого стиля:
P { color: #0000FF }
P — это селектор. Он представляет собой имя тега <P>.
— color — это атрибут стиля. Он задает цвет текста.
— #0000FF — это значение атрибута стиля color. Оно представляет код синего цве-та, записанный в формате RGB.
Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам <P>). Это, кстати, типичный пример неявной привязки стиля.
Стиль, который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.
Рассмотрим еще пару таких стилей.
Вот стиль переопределения тега <EM>:
EM { color: #00FF00;
font-weight: bold }
Любой текст, помещенный в тег <EM>, Web-обозреватель выведет зеленым полужирным шрифтом. Атрибут стиля font-weight задает степень «жирности» шрифта, а его значение bold — полужирный шрифт.
А это стиль переопределения тега <BODY>:
BODY { background-color: #000000;
color: #FFFFFF }
Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.
А теперь рассмотрим совсем другой стиль:
.redtext { color: #FF0000 }
Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега — HTML-тега <REDTEXT> не существует.
Это другая разновидность стиля CSS — стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
<P CLASS=»redtext»>Внимание!</P>
Здесь мы привязали только что созданный стилевой класс redtext к абзацу «Внимание!». В результате этот абзац будет набран красным шрифтом.
.attention { color: #FF0000;
font-style: italic }
. . .
<P><STRONG CLASS=»attention»>Стилевой класс требует явной привязки
атрибутом тега CLASS!</STRONG></P>
Листинг 5.2.
В листинге 5.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу <STRONG>. В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним «полужирность» текста задает тег <STRONG>, а курсивное начертание и красный цвет — стилевой класс attention.
В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается.
.attention { color: #FF0000;
font-style: italic }
.bigtext { font-size: large }
. . .
<P><STRONG CLASS=»attention bigtext»>Стилевой класс требует явной
привязки атрибутом тега CLASS!</STRONG></P>
Листинг 5.3.
В примере из листинга 5.3 мы привязали к тегу <STRONG> сразу два стилевых класса: attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large — большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)
Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.
— в определении именованного стиля перед его именем ставят символ # («решетка»). Он сообщает Web-обозревателю, что перед ним именованный стиль.
— привязку именованного стиля к тегу реализуют через атрибут ID, также поддер-живаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.
— значение атрибута тега ID должно быть уникальным в пределах Web-страницы. Говоря другими словами, в HTML-коде Web-страницы может присутствовать только один тег с заданным значением атрибута ID. Поэтому именованные стили используют, если какой-либо стиль следует привязать к одному-единственному элементу Web-страницы.
#bigtext { font-size: large }
. . .
<P ID=»bigtext»>Это большой текст.</P>
абзац «Это большой текст» будет набран крупным шрифтом.
Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако CSS позволяет создавать стили с несколькими селекторами — так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.
Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.
— селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.
— селекторы перечисляют слева направо и обозначают уровень вложенности со-ответствующих тегов, который увеличивается при движении слева направо: теги, указанные правее, должны быть вложены в теги, что стоят левее.
— если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.
— селекторы разделяют пробелами.
— стиль привязывают к тегу, обозначенному самым правым селектором.
Начнем с самого простого комбинированного стиля:
P EM { color: #0000FF }
— в качестве селекторов использованы имена тегов <P> и <EM>.
— сначала идет тег <P>, за ним — тег <EM>. Значит, тег <EM> должен быть вложен в тег <P>.
— стиль будет привязан к тегу <EM>.
<P><EM>Этот текст</EM> станет синим.</P>
<P>А этот не станет.</P>
<P><STRONG>Этот</STRONG> — тоже.</P>
Здесь слова «Этот текст» будут набраны синим шрифтом.
Вот еще один комбинированный стиль:
P.mini { color: #FF0000;
font-size: smaller }
Имя тега <P> скомбинировано с именем стилевого класса mini. Значит, данный стиль будет применен к любому тегу <P>, для которого указано имя стилевого класса mini. (Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.)
<P CLASS=»mini»>Маленький красный текстик.</P>
И последний пример комбинированного стиля:
P.sel <STRONG> { color: #FF0000 }
Этот стиль будет применен к тегу <STRONG>, находящемуся внутри тега <P>, к которому привязан стилевой класс sel.
<P CLASS=»sel»><STRONG>Этот</STRONG> текст станет красным.</P>
Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:
h2, .redtext, P EM <STRONG> { color: #FF0000 }
Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега <h2>, стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.
Стили последней — пятой — разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.
— они не имеют селектора, т. к. ставятся прямо в нужный тег. Селектор в данном случае просто не нужен.
— в них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля от селектора, которого нет.
— встроенный стиль может быть привязан только к одному тегу — тому, в котором он находится.
Определение встроенного стиля указывают в качестве значения атрибута STYLE нужного тега, который поддерживается практически всеми тегами:
<P STYLE=»font-size: smaller; font-style: italic»>Маленький курсивчик.</P>
Ранее мы упомянули, что в некоторых случаях значение атрибута стиля нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.
Встроенные стили применяются сейчас довольно редко, т. к. нарушают требование концепции Web 2.0 разделять содержимое и представление Web-страниц. В основном их применяют для привязки стилей к одному-единственному элементу Web-страницы (очень редко) и во время экспериментов со стилями.
3. Мы рассмотрели пять разновидностей стилей CSS. Четыре из них — стилевые классы, стили переопределения тега, именованные и комбинированные стили — могут присутствовать только в таблицах стилей. Это мы уже знаем.
Таблицы стилей, в зависимости от места их хранения, разделяются на два вида.
Внешние таблицы стилей хранятся отдельно от Web-страниц, в файлах с расширением css. Они содержат CSS-код определений стилей.
Листинг 5.4 иллюстрирует пример внешней таблицы стилей.
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
P EM { color: #0000FF }
Листинг 5.4.
Как видим, здесь определены четыре стиля.
Если внешняя таблица стилей хранится отдельно от Web-страницы, значит, нужно как-то привязать ее к Web-странице. Для этого предназначен одинарный метатег <LINK>, который помещается в секцию заголовка соответствующей Web-страницы. Вот формат его написания:
<LINK REL=»stylesheet» HREF=»<интернет-адрес файла таблицы стилей>»
TYPE=»text/css»>
Интернет-адрес файла таблицы стилей записывают в качестве значения атрибута HREF этого тега.
Остальные атрибуты тега <LINK> для нас несущественны. Атрибут REL указывает, чем является файл, на который ссылается тег <LINK>, для текущей Web-страницы; его значение «stylesheet» говорит, что этот файл — внешняя таблица стилей. А атрибут TYPE указывает тип MIME файла, на который ссылается данный тег; внешняя таблица стилей имеет тип MIME text/css.
<HEAD>
. . .
<LINK REL=»stylesheet» HREF=»main.css» TYPE=»text/css»>
. . .
</HEAD>
Листинг 5.5.
В примере из листинга 5.5 мы привязали внешнюю таблицу стилей, хранящуюся в файле main.css, к текущей Web-странице.
Преимущество внешних таблиц стилей в том, что их можно привязать сразу к нескольким Web-страницам. Недостаток всего один, да и тот несущественный, — внешняя таблица стилей хранится в отдельном файле, так что есть вероятность его «потерять».
Внутренняя таблица стилей (листинг 5.6) записывается прямо в HTML-код Web-страницы. Ее заключают в парный тег <STYLE> и помещают в секцию заголовка. В остальном она не отличается от ее внешней «коллеги».
<HEAD>
. . .
<STYLE>
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
P EM { color: #0000FF }
</STYLE>
. . .
</HEAD>
Листинг 5.6.
Преимущество внутренней таблицы стилей в том, что она является неотъемлемой частью Web-страницы и, стало быть, никогда не «потеряется». Недостатков два. Во-первых, стили, определенные во внутренней таблице стилей, применяются только к той Web-странице, в которой эта таблица стилей находится. Во-вторых, внутренняя таблица стилей не соответствует концепции Web 2.0, требующей отделять содержимое Web-страницы от ее представления. В одной и той же Web-странице могут присутствовать сразу несколько таблиц стилей: несколько внешних и внутренняя (листинг 5.7).
<HEAD>
. . .
<LINK REL=»stylesheet» HREF=»styles1.css» TYPE=»text/css»>
<LINK REL=»stylesheet» HREF=»styles2.css» TYPE=»text/css»>
. . .
<STYLE>
. . .
</STYLE>
. . .
</HEAD>
Листинг 5.7.
В таком случае действие всех этих таблиц стилей складывается. А по каким прави-лам — мы сейчас выясним.
Лекция 6.
4. Как мы уже выяснили, на один и тот же элемент Web-страницы могут действовать сразу несколько стилей. Это могут быть стили разных видов (стиль переопределения тега, стилевой класс, комбинированный стиль, встроенный стиль) или определенные в разных таблицах стилей (внешних и внутренней). Такое встречается сплошь и рядом, особенно на Web-страницах со сложным оформлением.
Но как Web-обозреватель определяет, какой именно стиль применить к тому или иному элементу Web-страницы? Мы уже знаем, что в таких случаях действие стилей как бы складывается. Но по каким правилам?
Предположим, что мы создали внешнюю таблицу стилей (листинг 5.8).
.redtext { color: #FF0000 }
#bigtext { font-size: large }
EM { color: #00FF00;
font-weight: bold }
Листинг 5.8.
После этого мы изготовили Web-страницу, содержащую внутреннюю таблицу стилей (листинг 5.9).
<STYLE>
.redtext { color: #0000FF }
EM { font-size: smaller }
</STYLE>
Литстинг 5.9.
А в самой Web-странице написали вот такой фрагмент HTML-кода:
<P CLASS=»redtext»>Это красный текст.</P>
<P ID=»bigtext» STYLE=»color: #FFFF00″>Это большой текст.<P>
<P><EM>Это курсив.</EM></P>
Хорошо видно, что на элементы этой Web-страницы действуют сразу по нескольку стилей. Так, во второй строке кода к тегу <P> привязаны и именованный стиль bigtext, и встроенный стиль. Но этого мало — и внешняя, и внутренняя таблицы стилей содержат определение двух одинаковых стилей — стилевого класса redtext и стиля переопределения тега <EM>!
Так что же мы получим в результате?
Рассмотрим сначала последнюю строку приведенного HTML-кода с тегом <EM>. Сначала Web-обозреватель загрузит, обработает и сохранит в памяти внешнюю таблицу стилей. Затем он обработает внутреннюю таблицу стилей и добавит все содержащиеся в ней определения стилей к уже хранящимся во внешней таблице стилей. Это значит, что стили переопределения тега <EM>, заданные в разных таблицах стилей, будут сложены, и результирующий стиль, написанный на языке CSS, станет таким:
EM { color: #00FF00;
font-size: smaller;
font-weight: bold }
Именно его и применит Web-обозреватель ко всем тегам <EM>, что присутствуют на Web-странице.
Вторая строка HTML-кода, что содержит тег со встроенным стилем, будет обработана так же. Web-обозреватель добавит к считанному из внешней таблицы стилей определению именованного стиля bigtext определение встроенного стиля. Результирующий стиль, если записать его на языке CSS, будет таким:
#bigtext { color: $FFFF00;
font-size: large }
И, наконец, самая трудная задача — первая строка HTML-кода. Поскольку оба оп-ределения стилевого класса redtext задают один и тот же параметр — цвет текста (атрибут стиля color) — Web-обозреватель поступит так. Он отменит значение это-го атрибута, заданное в стиле из внешней таблицы стилей, и заменит его тем, что задано в стиле из внутренней таблицы стилей. Поскольку, с его точки зрения и с точки зрения стандартов CSS, внутренняя таблица стилей — это та рубашка, что «ближе к телу». И тогда результирующий стиль будет таким:
.redtext { color: #0000FF }
Здесь мы столкнулись с тем, что стили разных видов и заданные в разных таблицах стилей имеют разный приоритет. Web-обозреватель руководствуется этим приоритетом, когда формирует в своей памяти окончательные определения стилей.
Теперь познакомимся с правилами, описывающими поведение Web-обозревателя при формировании окончательных стилей. Их еще называют правилами каскадности.
Внешняя таблица стилей, ссылка на которую (тег <LINK>) встречается в HTML-коде страницы позже, имеет приоритет перед той, ссылка на которую встретилась раньше.
— внутренняя таблица стилей имеет приоритет перед внешними.
— встроенные стили имеют приоритет перед любыми стилями, заданными в таблицах стилей.
—более конкретные стили имеют приоритет перед менее конкретными. Это значит, например, что стилевой класс имеет приоритет перед стилем переопределения тега, поскольку стилевой класс привязывается к конкретным тегам. Точно так же комбинированный стиль имеет приоритет перед стилевым классом.
—если к тегу привязаны несколько стилевых классов, то те, что указаны правее, имеют приоритет перед указанными левее.
5. А теперь представим себе следующую ситуацию. Предположим, мы создали стили, приведенные в листинге 5.10.
.redtext { color: #FF0000;
font-weight: normal }
EM { color: #00FF00;
font-weight: bold }
Листинг 5.10.
Значение normal атрибута стиля font-weight задает обычную «жирность» шрифта, т. е. простой, светлый шрифт.
Далее мы поместили на Web-страницу вот такой абзац:
<P><EM CLASS=»redtext»>Это курсив.</EM></P>
Но предположим, будто нам нужно, чтобы весь текст, выделенный тегом <EM>, в любом случае выводился полужирным шрифтом! Что делать? Создавать другой стилевой класс, специально для такого случая?
Совсем не обязательно. Стандарт CSS предоставляет нам замечательную возможность превратить отдельные атрибуты стиля в определении стиля в важные. Параметры, задаваемые важными атрибутами стиля, будут иметь приоритет над всеми аналогичными атрибутами стиля, заданными в других стилях, даже более конкретных. Фактически таким образом мы нарушим правила каскадности стандартными средствами CSS.
Обратим внимание, что важными можно сделать только отдельные атрибуты стиля в определении стиля. Атрибуты стиля, не объявленные важными, все так же будут подчиняться правилам каскадности.
Чтобы сделать атрибут стиля важным, достаточно после его значения через пробел поставить слово !important (пишется слитно, без пробелов между восклицательным знаком и словом «important»). Вот так:
EM { color: #00FF00;
font-weight: bold !important }
Теперь текст, выделенный тегом <EM>, всегда будет выводиться полужирным шрифтом, даже если данный параметр переопределен в более конкретном стиле.
Важные атрибуты стиля могут очень пригодиться при создании поведения Web-страницы, которое управляет стилями, привязанными к элементам Web-страницы, в ответ на действия посетителя. Мы столкнемся с этим позже, когда будем создавать свое первое полезное поведение.
На этом рассмотрение принципов создания стилей и таблиц стилей можно закончить. Осталось только поговорить о том…
6. Удачно подобранный набор стилей — результат долгих экспериментов. Нам придется изрядно повозиться, прежде чем мы его получим. Но несколько правил, приведенных далее, помогут нам получить его заметно быстрее.
Прежде всего, следует выделить все правила оформления, которые должны быть применены ко всем Web-страницам и их элементам. К таким правилам относятся параметры шрифта обычных абзацев и заголовков, цвет фона Web-страницы, вы-равнивание текста, величины отступов и параметры рамки обычных таблиц и пр. В общем, то, что определяет вид всех Web-страниц.
Эти правила преобразуются в общие стили, обычно стили переопределения тегов. Их помещают в одну внешнюю таблицу стилей и привязывают ее ко всем Web-страницам Web-сайта. Такая таблица стилей называется глобальной.
Далее выделяют правила оформления, которые должны применяться к некоторым элементам Web-страниц. Это могут быть параметры шрифта каких-то избранных абзацев (например, предупреждений о чем-то), их фрагментов, параметры гиперссылок, входящих в полосу навигации, и др. Данные правила формируют так, что-бы дополнять полученные ранее, но не перекрывать их полностью, — это позволит сократить размер CSS-кода таблиц стилей.
Так мы получим более конкретные стили, дополняющие созданные ранее. Их мы оформим в виде стилевых классов и комбинированных стилей и поместим все в ту же глобальную таблицу стилей. Также можно поместить их в отдельную таблицу стилей (вторичную), которую привязать только к тем Web-страницам, где они используются; этот подход оправдан только если таких стилей получается слишком много, и нет резона «раздувать» глобальную таблицу стилей.
На следующем этапе мы выделим правила, применяемые только к одному элементу Web-страниц. Это могут быть параметры полосы навигации, заголовка Web-сайта, различных контейнеров, определяющих дизайн Web-страниц (о контейнерах речь пойдет в главе 10). Они также должны дополнять правила, полученные на предыдущих этапах, но не заменять их полностью.
Эти еще более конкретные стили мы оформим в виде именованных стилей — в данном случае это будет наилучшим выбором. И поместим их в глобальную таблицу стилей. Если их получается слишком много, мы также можем поместить их во вторичную таблицу стилей и привязать ее ко всем Web-страницам.
Последний этап — выделение правил, применяемых к совсем небольшому количе-ству элементов, которые присутствуют только на отдельных Web-страницах, а то и вообще на одной из них. К таким правилам можно отнести параметры очень специфических абзацев, отдельных иллюстраций и таблиц. Не забываем, что и эти правила, по возможности, не должны полностью перекрывать полученные ранее.
Так мы выделим самые конкретные стили. Их можно оформить в виде стилевых классов или именованных стилей. Помещаться они могут в глобальную таблицу стилей или во вторичную таблицу стилей, привязанную только к тем Web-страницам, где должны использоваться.
Что касается внутренних таблиц стилей и встроенных стилей, то в готовых Web-страницах от них рекомендуется отказаться. Как мы помним концепция Web 2.0 настоятельно рекомендует разделять содержимое и представление Web-страниц. А внутренние таблицы стилей и встроенные стили нарушают данное правило — о чем мы неоднократно говорили.
Сейчас внутренние таблицы стилей и встроенные стили применяют, в основном, во время экспериментов, чтобы выяснить, как тот или иной стиль влияет на отображе-ние элементов Web-страницы. По завершении экспериментов готовые стили пере-носят во внешние таблицы стилей и соответствующим образом оформляют.
Так или иначе, конкретные примеры выбора нужной разновидности стиля мы рас-смотрим в последующих главах, когда начнем создавать представление для наших Web-страниц. В конце концов, учиться лучше всего на примерах.
7. Ранее мы узнали о комментариях — особых фрагментах HTML-кода, которые не обрабатываются Web-обозревателем и служат для того, чтобы Web-дизайнер смог оставить какие-то заметки для себя или своих коллег. Для этого язык HTML предоставляет специальный тег. Создавать комментарии позволяет и язык CSS. Более того, с его помощью мы мо-жем формировать комментарии двух видов.
Комментарий, состоящий из одной строки, создают с помощью символа / (слэш) в самом начале строки, которая станет комментарием:
/ Это комментарий
P { color: #0000FF }
Однострочный комментарий начинается с символа / и заканчивается концом строки.
Комментарий, состоящий из произвольного числа строк, создают с помощью по-следовательностей символов /* и */. Между ними помещают строки, которые станут комментарием (листинг 5.11).
/*
Это комментарий,
состоящий из
нескольких строк.
*/
P { color: #0000FF }
Листинг 5.11.
Многострочный комментарий начинается с последовательности символов /* и з-канчивается последовательностью */.
Каскадные таблицы стилей css
CSS (Cascading Style Sheets)– эффективное средство автоматизации стилевого оформленияHTML-документов (цвет, шрифт, отступы, интервалы, размеры элементов и т.д.). Стиль – это набор значений атрибутов, определяющих оформление электронного документа, его представление на экране. Применение стилей для оформленияWeb-страниц позволяет осуществить единообразное оформление однотипных элементов текста, упрощает изменение внешнего вида документа в целом и отдельных его элементов.
Определение стиля может быть:
Собственным для каждого элемента документа, например, абзаца, заголовка;
Локальным для всего документа;
Глобальным (внешним) для нескольких документов.
Стиль задаётся с помощью таблицы стилей. Любая таблица стилей состоит из набора правил. Правило состоит из двух частей: селектора и определения:
p { color:red } ,
где p– селектор, а текст в скобках { } – определение.
Способы определения стилей
<p >Текст абзаца</p>
Локальное определение стиля задаётся тегом style, который помещается в тегhead, и действует в пределах этого документа. В тегstyleпомещаются правила таблицы стилей. Такое определение стиля называется внедрение таблицы стилей:
<head>
……..
<style type=»text/css»>
/ * Здесь можно вставлять такой комментарий!
Вложенные комментарии не допускаются. * /
body{ background-color:gray;
font—size:14pt } /* Первое правило*/
h2{ background-color:white;
color:blue } /* Второе правило*/
</style>
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Локальное определение стиля также можно выполнить с помощью команды @import, которая позволяет импортировать элементы стиля из внешнего файла *.css(импорт таблицы стилей), команда помещается в тегstyleраньше других правил таблицы стилей. Внешний файл *.cssсодержит набор правил таблицы стилей:
my.css :
body{ background-color:gray; font-size:14pt }
p{ font-size:11pt; font-face:Arial }
my.htm:
<head>
……..
<style type=»text/css»>
@import url(my.css) ; /* импорт таблицы стилей */
h2{background-color:white; color:blue} /* внедрённое правило */
</style>
Можно импортировать несколько таблиц в одном документе.
Глобальное (внешнее) определение стиля помещается в отдельный файл *.css, который содержит набор правил таблицы стилей и подключается тегомlinkв тегеheadнескольких документов, которые должны иметь общие правила оформления, такой способ задания стиля называется связывание:
<head>
……
<link rel=»stylesheet» type=»text/css» href=»my.css»>
</head>
Применение правил таблицы стилей:
<html>
<head>
…….
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Приоритеты таблиц стилей, начиная с наивысшего: встроенная, внедрённая, импортированная, связанная, по умолчанию (настройки браузера).
Виды селекторов
Селектортипа элемента– переопределяет атрибуты любого тега:
h3 { color:blue }
p {font-size:16pt }
Применение:
<h2>Заголовок</h2>
<p>Абзац</p>
Селектор класса – позволяет для одного и того же тега определить несколько вариантов оформления:
h3.red {color:red }
h3.green {color:green }
Применение:
<h2 class=»red«>Это красный заголовок</h2>
<h2 class=»green«>А это зелёный заголовок</h2>
Также селектор класса позволяет создать стиль, который можно применить для различных тегов:
.style1 {color:blue; font-size:22pt}
.style2 {color:lime; background-color:gray}
Применение:
<p class=»style1″>Большие синие буквы, фон – по умолчанию</p>
<p class=»style2″>Зелёные буквы, фон – серый, размер букв — по умолчанию</p>
<h1 class=»style1″>Заголовок — большие синие буквы, фон – по умолчанию</h1>
<h1 class=»style2″>Заголовок — зелёные буквы, фон – серый, размер букв — по умолчанию</h1>
Имя класса чувствительно к регистру символов!
18. Таблица каскадных стилей(css).
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки.
Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
CSS при отображении страницы может быть взята из различных источников (порядок иерархии от сильного к слабому):
Авторские стили (информация стилей, предоставляемая автором страницы) в виде:
Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.
Встроенных стилей — блоков CSS внутри самого HTML-документа.
Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.
Пользовательские стили
Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.
Стиль браузера
Стандартный стиль, используемый браузером по умолчанию для представления элементов.
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Пример таблицы стилей:
p {
font-family: «Garamond», serif;
}
h3 {
font-size: 110 %;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph2 {
margin: 0;
}
a:hover {
text-decoration: none;
}#news p {
color: blue; }
19. Отображение xml-документов с использованием таблиц каскадных стилей (css).
Таблица каскадных стилей представляет собой файл, который содержит инструкции для форматирования элементов в XML-документе.
Поскольку в XML вы создаете свои собственные элементы, браузер не имеет встроенных средств, позволяющих определить, как их правильно отобразить. Создание таблицы каскадных стилей и связывание ее с вашим XML-документом – это один из способов сообщить браузеру, как отображать каждый из элементов документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer 5. Вам нет необходимости использовать HTML-страницу для доступа и отображения данных (как это имеет место в других методах отображения XML, о которых будет говориться в двух следующих лекциях).
Хранение инструкций по отображению в таблице стилей отдельно от самого XML-документа повышает гибкость XML-документа и облегчает работу с ним. Вы можете, например, быстро адаптировать один XML-документ к различным условиям отображения (различным браузерам, приложениям, контекстным ситуациям, периферийным устройствам и т.д.) простым присоединением соответствующей таблицы стилей, без необходимости реструктурировать сам документ. Вы также можете быстро обновить формат для группы сходных XML-документов с помощью внесения изменений в присоединенной к этим документам таблице стилей, не открывая и не редактируя каждый из документов.
Использование таблицы стилей, наверное, является самым простым методом отображения XML-документа. Язык CSS уже знаком многим Web-дизайнерам, поскольку именно он в настоящее время используется для HTML-страниц. Кроме того, современные Web-браузеры обеспечивают высокий уровень поддержки таблиц каскадных стилей, в то время как другие методы отображения XML все еще находятся в стадии развития, и браузеры только начинают их поддерживать.
Тем не менее, по сравнению с другими методами отображения XML, о которых вы узнаете в последующих лекциях, таблицы каскадных стилей имеют ряд ограничений. Хотя таблица каскадных стилей предоставляет достаточно высокий уровень управляемости способами, которыми браузер форматирует содержимое элементов в XML-документах, она не дает возможности модифицировать или реорганизовывать его содержимое. Она также не позволяет вам осуществлять доступ к атрибутам, примитивам, инструкциям по обработке и другим компонентам XML – а также не дает возможности обрабатывать информацию, которую эти компоненты содержат.
В последующих лекциях вы познакомитесь с более сложными – но и более гибкими – способами отображения XML-документов. В лекции 8 вы узнаете, как связывать XML-документ с HTML-страницей и отображать XML-элементы путем сцепления с ними стандартных HTML-элементов. В лекции 9 вы узнаете, как осуществлять доступ и отображать отдельные элементы, атрибуты и другие компоненты XML-документа путем написания кода сценария на HTML-странице. А в лекции 10 вы откроете для себя, как применять еще более мощный язык таблиц стилей – расширяемый язык таблиц стилей (Extensible Stylesheet Language – XSL) – который позволяет вам не только форматировать содержимое XML-элемента, но и преобразовывать содержимое документа с достаточно высокой степенью гибкости.
| XHTML Каскадные таблицы стилей (CSS) Кодировки символов Сравнение движков отображения Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Скрипты в HTML Юникод и HTML Цвета в Web (Web colors) WWW-Консорциум (W3C) |
|---|
Каскадные таблицы стилей
Стиль – это правило, которое определяет внешний вид того или иного элемента в документе. Используя технологию CSS, вы можете задавать стиль для тегов, т.е. в стилевых таблицах вы определяете, как будет выглядетьweb-страница на экране браузера.
Преимущества стилевых таблиц:
Таблицы стилей позволяют отделить логическую структуру страниц от визуального представления (оформления).
Созданная таблица стилей может применяться ко всем страницам сайта, благодаря чему соблюдается единство его оформления.
Если сайт оформлен с помощью единственной стилевой таблицы, случае внесения изменений в оформление тегов в стилевой таблице эти изменения вступят в силу на всех страницах сайта. Тем самым CSS позволяют гибко управлять внешним представлением страниц на экране.
Синтаксис таблиц стилей
Все объявления стилей называются правилами,каждое из которых состоит из двух частей (рис.2):селектора (Н1), определяющего тег в НТML-документе (заголовок, параграф и т.д.) и определения (color:red), устанавливающего стиль, применяемый к данному селектору (тегу).
свойство значение
h2 {color:red}
селектор определение стиля
Рис.3 — Синтаксис CSS.
Определение, в свою очередь, состоит из двух частей: свойства (color) и значения (red). Они записываются в фигурных скобках и отделяются друг от друга двоеточием. Для уменьшения размеров таблиц стилей селекторы группируются через запятую, а определения – через точку с запятой. Например:
h2, h3 {color:red; font-family:Arial}
В данном примере задается одинаковое оформление для заголовков первого и второго уровня: красный цвет и шрифт Arial.
Кроме того, стилевые таблицы поддерживают свойство наследования, благодаря которому вы не должны определять стили для всех тегов, которые используете при создании HTML-страниц, достаточно определить стиль по умолчанию для всего документа в теге BODY. Однако важно помнить, что на практике наследование не всегда корректно поддерживается браузерами.
Для большей гибкости при оформлении страниц можно создать свои собственные классы и задать для них стили6.
Включение стилевых таблиц вHtml-документ
Существует три способа добавления CSSвHTML-документ, описанных в таблице 7.
Очевидно, что использование внешней таблицы стилей – наиболее предпочтительный вариант, поскольку вы можете подключить эту таблицу ко всем документам сайта и таким образом получите достаточно гибкий механизм управления его внешним видом. При внесении изменений в один файл (в нашем примере site.css) они вступят в силу сразу на всех страницах, использующих внешнюю стилевую таблицу, описанную в этом файле (site.css). Создать внешнюю стилевую таблицу можно с помощью простейшего текстового редактора, допустимNotepad, сохранив файл с расширением .css.
Таблица 7- Включение CSSвHTML–документ. Приоритетность стилей при перекрывании установок
Способ | Тег и распо-ложение | Пример | П | Использование нескольких стилей в одном документе |
Подключение внешней стилевой таблицы | <LINK> помещается в заголовочную частьHTML-документа <HEAD> | <LINK HREF=”css/site.css” REL=”stylesheet” TYPE=”text/css”> | <HTML> <HEAD> <TITLE>Каскадные таблицы стилей</TITLE> <LINK HREF=”css/site.css” REL=”stylesheet” TYPE=”text/css”> | |
Использова-ние внутренней стилевой таблицы | <STYLE> помещается в заголовочную частьHTML-документа <HEAD> | <style type=”text/css”> h2 {color : blue} </style> | <STYLE TYPE=”text/css”> h2 {color : blue} </STYLE> </HEAD> | |
Указание стиля непосред-ственно внутри тега | <h2 style=”color:red; font-family:Arial ”> …</h2> | <BODY> <h2style=”color:red;”>А текст будет красным</h2> </BODY> </HTML> |
риоритетность
стилейСтилевая таблица в <STYLE>…</STYLE >(второй способ) действует только внутри одного документа.
Третий способ теряет все достоинства таблиц стилей, так как записывается внутри тега и соответственно применяется только к нему.
Как показано в таблице, в случае, если к одному документу применяются сразу несколько стилевых таблиц (все три способа), то более позднее правило побеждает. Т.е. самым высоким приоритетом обладает стиль, указанный внутри тега, за ним следует тег <STYLE> и самый низкий приоритет – у <LINK>.