В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.

Осуществить данную задачу можно тремя способами:

• Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
• Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
• Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

Атрибут style.

Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

Пишется так:

style="" >

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

Ну например:

style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках, сейчас же речь идет о том как применить CSS к какому либо HTML тегу.

По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.

style="background-color: #c5ffa0" >

style="color: #0000ff; font-size:18px" >Всё о слонах

Купить слона

style="color: #ff0000; font-size:14px" >

style="color: #0000ff; font-size:16px" >Взять слона на прокат

style="color: #ff0000; font-size:14px" >

Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

,

- будут синими а параграфы

- красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.

Теперь обещанные комментарии:

Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

• shortcut icon - Определяет, что подключаемый файл является .
• stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Файл elephant.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Файл elephant1.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

• Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
• Используйте тег

  Если написать такой код между тегами ... , то все заголовки первого уровня будут синими. При этом способе стили задаются при помощи тегов . Также тегу , но не сайта в целом.

• Внешние таблицы стилей . Задаются в отдельном файле и подключаются к html-документу при помощи тега , который размещается между тегами ... . Рассмотрим более подробно этот случай. Набираем в блокноте такой вот код и сохраняем его как html-файл.

  
  
  
  
  
  
  

  Заголовок первого уровня

  
  

  Заголовок третьего уровня, расположенный по центру html-документа

  
  

  Заголовок шестого уровня, выравненный по правому краю веб-страницы

  
  
  

  После этого создаём новый файл такого содержания:

  H1 {color:blue;}
  H3 {color:red;}
  H6 {color:green;}

  И сохраняем его как style с расширением *css . Результат смотри . Это наш html-файл с заголовками. Разберём теперь как работает эта конструкция. В html-документе с заголовками мы между тегами ... написали такую строчку:

  Здесь при помощи тега мы подключаем таблицы стилей к html-документу. Атрибут href ссылается на место, где размещён файл со стилями, это обязательный атрибут. Атрибут type мы уже знаем, он указывает тип таблицы стилей. Атрибут rel указывает отношение подключаемого файла к данному html-документу. В нашем случае значение атрибута rel="stylesheet" обозначает, что мы добавили основную таблицу стилей. Плюс такого метода задания таблиц стилей заключается в том, что ели захочется поменять дизайн сайта в целом, достаточно изменить только один файл с таблицами стилей.

Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней.

Три Способа Вставить CSS

Существует три способа вставки таблицы стилей:

• Внешняя таблица стилей
• Внутренняя таблица стилей
• Встроенный стиль

Внешняя Таблица Стилей

Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей, вы можете изменить вид целого Веб сайта путем редактирования одного файла. Каждая страница должна ссылаться на таблицу стилей, используя тег . Тег находится в head-секции:

Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.

Внутренняя Таблица Стилей

Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы HTML, используя тег

Пример: Внутренняя таблица стилей

• Попробуй сам »

Заголовок

Текст первый

Текст второй

Текст третий

Заголовок

Текст первый

Текст второй

Текст третий

В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

: color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

: font-size:20px; color:red; text-align:center .

Встроенный стиль

Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:

Параграф

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

Заголовок

Текст первый

Текст второй

Текст третий

Задачи

• Выравнивание текста по центру

  Используя встроенный стиль к параграфу выровняйте текст по центру.

Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (CSS), или просто таблиц стилей. Таблица стилей css содержит набор правил (стилей), описывающих оформление самой Web-страницы и отдельных ее фрагментов. Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и обтекающим его текстом, наличие и параметры рамки у таблицы, цвет фона Web-страницы и многое другое.

Каждый стиль css должен быть привязан к соответствующему элементу Web-страницы (или самой Web-странице). После привязки описываемые выбранным стилем css параметры начинают применяться к данному элементу. Привязка может быть явная, когда мы сами указываем, какой стиль css к какому элементу Web-страницы привязан, или неявная, когда стиль css автоматически привязывается ко всем элементам Web-страницы, созданным с помощью определенного тега.

Таблица стилей css может храниться прямо в HTML-коде Web-страницы или в отдельном файле. Последний подход более соответствует концепции Web 2.0; как мы помним из главы 1, она требует, чтобы содержимое и представление Web-страницы были разделены. Кроме того, отдельные стили css можно поместить прямо в тег HTML, создающий элемент Web-страницы; такой подход используется сейчас довольно редко и, в основном, при экспериментах со стилями.

Таблицыстилей css пишут на особом языке, который так и называется -CSS. Стандарт, описывающий первую версию этого языка (CSS 1), появился еще в 1996 году. В настоящее время широко поддерживается и применяется на практике стандарт CSS 2 и ведется разработка стандарта CSS 3, ограниченное подмножество которого уже поддерживают многие Web-обозреватели.

Как раз CSS 3 (точнее, то его подмножество, поддерживаемое современными программами) мы и будем изучать.


Создание стилей CSS

Обычный формат определения стиля CSS иллюстрирует листинг 7.1.

Вот основные правила создания стиля css.

Определение стиля css включает селектор и список атрибутов стиля с их значениями.

- Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.

За селектором, через пробел, указывают список атрибутов стиля css и их значений, заключенный в фигурные скобки.

Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через символ: (двоеточие). В некоторых случаях значение атрибута стиля css заключают в кавычки.

Пары <атрибут стиля>:<значение> отделяют друг от друга символом; (точка с запятой).

Между последней парой <атрибут стиля>:<значение> и закрывающей фигурной скобкой символ; не ставят, иначе некоторые Web-обозреватели могут неправильно обработать определение стиля.

Определения различных стилей разделяют пробелами или переводами строк.

Внутри селекторов и имен стилей не должны присутствовать пробелы и переводы строки. Что касается пробелов и переводов строк, поставленных в других местах определения стиля, то Web-обозреватель их игнорирует. Поэтому мы можем форматировать CSS-код для удобства его чтения, как проделывали это с HTML-кодом.

Но правила - правилами, а главное - практика. Давайте рассмотрим пример небольшого стиля:

P { color: #0000FF }

Разберем его по частям.

P - это селектор. Он представляет собой имя тега

Color - это атрибут стиля. Он задает цвет текста.

- #0000FF - это значение атрибута стиля color. Оно представляет код синего цвета, записанный в формате RGB. (Подробнее об RGB-коде и его задании мы поговорим в главе 8.)

Когда Web-обозреватель считает описанный стиль, он автоматически применит его ко всем абзацам Web-страницы (тегам

). Это, кстати, типичный пример неявной привязки стиля.

Стиль css , который мы рассмотрели, называется стилем переопределения тега. В качестве селектора здесь указано имя переопределяемого этим стилем HTML-тега без символов < и >. Селектор можно набирать как прописными, так и строчными буквами; автор предпочитает прописные.

Рассмотрим еще пару таких стилей.

Вот стиль переопределения тега :

EM { color: #00FF00;
font-weight: bold }

Любой текст, помещенный в тег , Web-обозреватель выведет зеленым полужирным шрифтом. Атрибут стиля font-weight задает степень "жирности" шрифта, а его значение bold - полужирный шрифт.

А это стиль переопределения тега :

BODY { background-color: #000000;
color: #FFFFFF }

Он задает для всей Web-страницы белый цвет текста (RGB-код #FFFFFF) и черный цвет фона (RGB-код #000000). Атрибут стиля background-color, как мы уже поняли, задает цвет фона.

А теперь рассмотрим совсем другой стиль:

Redtext { color: #FF0000 }

Он задает красный цвет текста (RGB-код #FF0000). Но в качестве селектора используется явно не имя тега - HTML-тега не существует.

Это другая разновидность стиля CSS - стилевой класс. Он может быть привязан к любому тегу. В качестве селектора здесь указывают имя стилевого класса, которое его однозначно идентифицирует. Имя стилевого класса должно состоять из букв латинского алфавита, цифр и дефисов, причем начинаться должно с буквы. В определении стилевого класса его имя обязательно предваряется символом точки - это признак того, что определяется именно стилевой класс.

Стилевой класс требует явной привязки к тегу. Для этого служит атрибут CLASS, поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного стилевого класса без символа точки:

Внимание!

Здесь мы привязали только что созданный стилевой класс redtext к абзацу "Внимание!". В результате этот абзац будет набран красным шрифтом.



В листинге 7.2 мы создали стилевой класс attention, который задает красный цвет и курсивное начертание шрифта. (Атрибут стиля font-style задает начертание шрифта, а его значение italic как раз делает шрифт курсивным.) Затем мы привязали его к тегу . В результате содержимое этого тега будет набрано полужирным курсивным шрифтом красного цвета; особую важность и связанную с ним "полужирность" текста задает тег , а курсивное начертание и красный цвет - стилевой класс attention.

В качестве значения атрибута CLASS можно указать сразу несколько имен стилевых классов, разделив их пробелами. В таком случае действие стилевых классов как бы складывается. (Подробнее о действии на элемент Web-страницы нескольких разных стилей мы поговорим потом.)



В примере из листинга 7.3 мы привязали к тегу сразу два стилевых класса: attention и bigtext. В результате содержимое этого тега будет выведено полужирным курсивным шрифтом красного цвета и большого размера. (Атрибут стиля font-size указывает размер шрифта, а его значение large - большой размер, сравнимый с размером шрифта, которым выводятся заголовки первого уровня.)

Именованный стиль во многом похож на стилевой класс. Селектором этого стиля также является имя, которое его однозначно идентифицирует, и привязывается он к тегу также явно. А дальше начинаются отличия.

В определении именованного стиля перед его именем ставят символ # ("решетка"). Он сообщает Web-обозревателю, что перед ним именованный стиль.

Привязку именованного стиля к тегу реализуют через атрибут ID, также поддерживаемый практически всеми тегами. В качестве значения этого атрибута указывают имя нужного именованного стиля, уже без символа #.

Значение атрибута тега ID должно быть уникальным в пределах Web-страницы. Говоря другими словами, в HTML-коде Web-страницы может присутствовать только один тег с заданным значением атрибута ID. Поэтому именованные стили используют, если какой-либо стиль следует привязать к одному-единственному элементу Web-страницы.

В примере

#bigtext { font-size: large }
. . .


Это большой текст.

абзац "Это большой текст" будет набран крупным шрифтом.

Во всех рассмотренных нами разновидностях стилей был один селектор, с помощью которого и выполнялась привязка. Однако CSS позволяет создавать стили с несколькими селекторами - так называемые комбинированные стили. Такие стили служат для привязки к тегам, удовлетворяющим сразу нескольким условиям. Так, мы можем указать, что комбинированный стиль должен быть привязан к тегу, вложенному в другой тег, или к тегу, для которого указан определенный стилевой класс.

Правила, которые установлены стандартом CSS при написании селекторов в комбинированном стиле.

- Селекторами могут выступать имена тегов, имена стилевых классов и имена именованных стилей.

Селекторы перечисляют слева направо и обозначают уровень вложенности соответствующих тегов, который увеличивается при движении слева направо: теги, указанные правее, должны быть вложены в теги, что стоят левее.

Если имя тега скомбинировано с именем стилевого класса или именованного стиля, значит, для данного тега должно быть указано это имя стилевого класса или именованного стиля.

Селекторы разделяют пробелами.

Стиль привязывают к тегу, обозначенному самым правым селектором.

Мудреные правила, не так ли?.. Чтобы их понять, рассмотрим несколько примеров.

Начнем с самого простого комбинированного стиля:

P EM { color: #0000FF }

В качестве селекторов использованы имена тегов

И .

Сначала идет тег

За ним - тег . Значит, тег должен быть вложен в тег

Стиль будет привязан к тегу .

Этот текст станет синим.




А этот не станет.




Этот - тоже.

Здесь слова "Этот текст" будут набраны синим шрифтом.

Вот еще один комбинированный стиль css:

P.mini { color: #FF0000;
font-size: smaller }

Имя тега

Скомбинировано с именем стилевого класса mini. Значит, данный стиль css будет применен к любому тегу

Для которого указано имя стилевого класса mini. (Значение smaller атрибута стиля font-size задает уменьшенный размер шрифта.)

Маленький красный текстик.

И последний пример комбинированного стиля css:

P.sel { color: #FF0000 }

Этот стиль будет применен к тегу , находящемуся внутри тега

К которому привязан стилевой класс sel.

Этот текст станет красным.

В данном примере слово "Этот" будет выделено красным цветом.

Стандарт CSS позволяет определить сразу несколько одинаковых стилей, перечислив их селекторы через запятую:

H1, .redtext, P EM { color: #FF0000 }

Здесь мы создали сразу три одинаковых стиля: стиль переопределения тега

, стилевой класс redtext и комбинированный стиль P EM. Все они задают красный цвет шрифта.

Все четыре рассмотренные нами разновидности стилей CSS могут присутствовать только в таблицах стилей. Если указать их в HTML-коде Web-страницы, они, скорее всего, будут проигнорированы.

Стили последней - пятой - разновидности указывают прямо в HTML-коде Web-страницы, в соответствующем теге. Это встроенные стили. В сплоченном семействе стилей они стоят особняком.

Они не имеют селектора, т. к. ставятся прямо в нужный тег. Селектор в данном случае просто не нужен.

В них отсутствуют фигурные скобки, поскольку нет нужды отделять список атрибутов стиля css от селектора, которого нет.

Встроенныйстиль css может быть привязан только к одному тегу - тому, в котором он находится.

Определение встроенного стиля css указывают в качестве значения атрибута STYLE нужного тега, который поддерживается практически всеми тегами:

Маленький
-курсивчик.

Ранее мы упомянули, что в некоторых случаях значение атрибута стиля css нужно заключать в кавычки. Но в определении встроенного стиля вместо кавычек используются апострофы.

Встроенные стили css применяются сейчас довольно редко, т. к. нарушают требование концепции Web 2.0 разделять содержимое и представление Web-страниц. В основном их применяют для привязки стилей к одному-единственному элементу Web-страницы (очень редко) и во время экспериментов со стилями.

В главе 14 мы рассмотрим еще одну разновидность стилей CSS . А пока что закончим с ними и приступим к рассмотрению таблиц стилей.