| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Стили CSS - технология
|
|
Стили CSS - технология каскадных таблиц
Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (CSS), или просто таблиц стилей. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.
Каждый стиль css должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки описываемые выбранным стилем css параметры начинают применяться к данному элементу. Привязка может быть явная, когда мы сами указываем, какой стиль css к какому элементу Web-страницы привязан, или неявная, когда стиль css автоматически привязывается ко всем элементам Web-страницы, созданным с помощью определенного тега.
Таблица стилей css может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; как мы помним, она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили css можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.
Таблицы стилей css пишут на особом языке, который так и называется — CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.
Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.
Создание стилей CSS
Обычный формат определения стиля CSS иллюстрирует листинг 8.1.
Листинг 8.1
<селектор> {
<атрибут стиля 1>: <значение 1>;
<атрибут стиля 2>: <значение 2>;
. . . .
<атрибут n-1>: <значение n-1>;
<атрибут стиля n>: <значение n>
}
Oсновные правила создания стиля css.
Определение стиля css включает селектор и список атрибутов стиля с их значениями.
Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.
За селектором, через пробел, указывают список атрибутов стиля css и их значений, заключенный в фигурные скобки.
Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ : (двоеточие). В некоторых случаях значение атрибута стиля css заключают в кавычки.
Пары <атрибут стиля>: <значение> отделяют друг от друга символом ; (точка с запятой).
Между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.
Определения различных стилей разделяют пробелами или переводами строк.
Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web-обозреватель их игнорирует. Поэтому мы можем форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.
Но правила — правилами, а главное — практика. Давайте рассмотрим пример небольшого стиля:
p { color: #0000FF }
Разберем его по частям.
p — это селектор. Он представляет собой имя тега <p>
color — это атрибут стиля. Он задает цвет текста.
#0033CC — это значение атрибута стиля color.
Оно представляет код синего цвета, записанный в формате RGB.
Подробнее об RGB-коде и его задании мы поговорим позже.
Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам <p>). Это, кстати, типичный пример неявной привязки стиля.
Стиль css, который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.
Рассмотрим еще пару таких стилей.
Cтиль переопределения тега <em>:
em { color: #00FF00;
font-weight: bold }
Текст, помещенный в тег <em>, Web-обозреватель выведет зеленым полужирным шрифтом.
Атрибут стиля font-weight задает степень "жирности" шрифта.
У атрибута font-weight есть значение bold, — полужирный шрифт.
Cтиль переопределения тега <body>:
body { background-color: #000000;
color: #FFFFFF }
Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.
А теперь рассмотрим совсем другой стиль:
.redtext { color: #FF0000 }
Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега — HTML-тега <redtext> не существует.
Это другая разновидность стиля CSS — стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки — это признак того, что определяется именно стилевой класс.
Стилевой класс требует явной привязки к тегу. Для этого служит атрибут class, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:
<p>Привет!</p>
Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Привет!". В результате этот абзац будет набран красным шрифтом.
Листинг 8.2
attention { color: #FF0000;
font-style: italic }
. . . .
<p><strong class="attention">Стилевой класс требует явной привязки
атрибутом тега class</strong></p>
В листинге 8.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу <strong>. В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним "полужирность" текста задает тег <strong>, а курсивное начертание и красный цвет — стилевой класс attention.
В качестве значения атрибута class можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)
Листинг 8.3
attention { color:#FF0000;
font-style-style: italic }
bigtext { font-size: large }
. . . .
<p><strong class="attention bigtext">Стилевой класс требует явной привязки
атрибутом тега class</strong></p>
В примере из листинга 8.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>
Здесь слова "Этот текст" будут набраны синим шрифтом.
Вот еще один комбинированный стиль css:
P.mini { color: #FF0000;
font-size: smaller }
Имя тега <p> скомбинировано с именем стилевого класса mini. Значит, данный стиль css будет применен к любому тегу <p>, для которого указано имя стилевого класса mini.
Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.
<p>Маленький красный текстик.</p>
И последний пример комбинированного стиля css:
p.sel <strong> { color: #FF0000 }
Этот стиль будет применен к тегу <strong>, находящемуся внутри тега <p>, к которому привязан стилевой класс sel. В данном примере слово "Этот" будет выделено красным цветом.
<p><strong>Этот</strong> текст станет красным.</p>
Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:
H1, .redtext, p em <strong> { color: #FF0000 }
Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега <h1>, стилевой класс redtext и комбинированный стиль p em. Все они задают красный цвет шрифта.
Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы.
Стили последней — пятой — разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.
Они не имеют селектора, т. к. ставятся прямо в нужный тег. Селектор в данном случае просто не нужен.
В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля css от селектора, которого нет.
Встроенный стиль css может быть привязан только к одному тегу — тому, в котором он находится.
Определение встроенного стиля css указывают в качестве значения атрибута style нужного тега, который поддерживается практически всеми тегами:
<p style="font-size: smaller; font-style: italic">Маленький
- курсивчик.</p>
Ранее мы упомянули, что в некоторых случаях значение атрибута стиля css нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.
Встроенные стили css применяются сейчас довольно редко, т. к. нарушают требование концепции Web 2.0 разделять содержимое и представление Web-страниц. В основном их применяют для привязки стилей к одному-единственному элементу Web-страницы (очень редко) и во время экспериментов со стилями.
Далее мы рассмотрим еще одну разновидность стилей CSS. А пока что закончим с ними и приступим к рассмотрению таблиц стилей.
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
