Каскадные стили css пример. Примеры. Выделение блока бордюром. Задание менее четырех значений для сокращенного свойства

CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида документа, написанного языком разметки. Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.

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

Объявление стиля состоит из двух частей: элемента веб-страницы — селектора , и команды форматирования — блока объявления . Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.


Рис. 1. Структура объявления CSS-стиля

Виды каскадных таблиц стилей и их специфика

1. Виды таблиц стилей

1.1. Внешняя таблица стилей

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

К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов , указав в атрибуте тега media назначение данной таблицы стилей. rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

Атрибут type="text/css" не является обязательным по стандарту HTML5, поэтому его можно не указывать. Если атрибут отсутствует, по умолчанию используется значение type="text/css" .

1.2. Внутренние стили

Внутренние стили встраиваются в раздел HTML-документа и определяются внутри тега . Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).

...

1.3. Встроенные стили

Когда мы пишем встроенные стили , мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style:

Обратите внимание на этот текст.

Такие стили действуют только на тот элемент, для которого они заданы.

1.4. Правило @import

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:

Правило @import также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Виды селекторов

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

2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например, * {margin: 0;} обнулит внешние отступы для всех элементов сайта. Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили} , *:checked {CSS-стили} .

2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех страницах сайта. Например, h1 {font-family: Lobster, cursive;} задаст общий стиль форматирования всех заголовков h1 .

2.3. Селектор класса

Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег

и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.

Инструкция пользования персональным компьютером

.headline { text-transform: uppercase; color: lightblue; }

2.4. Селектор идентификатора

Селектор идентификатора позволяет форматировать один конкретный элемент. Идентификатор id должен быть уникальным и на одной странице может встречаться только один раз.

#sidebar { width: 300px; float: left; }

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри элемента-контейнера. Например, ul li {text-transform: uppercase;} — выберет все элементы li , являющиеся потомками всех элементов ul .

Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:

p.first a {color: green;} — данный стиль применится ко всем ссылкам, потомкам абзаца с классом first ;

p .first a {color: green;} — если добавить пробел, то будут стилизованы ссылки, расположенные внутри любого тега класса.first , который является потомком элемента

First a {color: green;} — данный стиль применится к любой ссылке, расположенной внутри другого элемента, обозначенного классом.first .

2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
Например, p > strong — выберет все элементы strong , являющиеся дочерними по отношению к элементу p .

2.7. Сестринский селектор

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

h1 + p — выберет все первые абзацы, идущие непосредственно за любым тегом

, не затрагивая остальные абзацы;

h1 ~ p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.

2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

[атрибут] — все элементы, содержащие указанный атрибут, — все элементы, для которых задан атрибут alt ;

селектор[атрибут] — элементы данного типа, содержащие указанный атрибут, img — только картинки, для которых задан атрибут alt ;

селектор[атрибут="значение"] — элементы данного типа, содержащие указанный атрибут с конкретным значением, img — все картинки, название которых содержит слово flower ;

селектор[атрибут~="значение"] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p — абзацы, имя класса которых содержит feature ;

селектор[атрибут|="значение"] — элементы, список значений атрибута которых начинается с указанного слова, p — абзацы, имя класса которых feature или начинается на feature ;

селектор[атрибут^="значение"] — элементы, значение атрибута которых начинается с указанного значения, a — все ссылки, начинающиеся на http:// ;

селектор[атрибут$="значение"] — элементы, значение атрибута которых заканчивается указанным значением, img — все картинки в формате png ;

селектор[атрибут*="значение"] — элементы, значение атрибута которых содержит в любом месте указанное слово, a — все ссылки, название которых содержит book .

2.9. Селектор псевдокласса

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

:hover — любой элемент, по которому проводят курсором мыши;

:focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

:active — элемент, который был активизирован пользователем;

:valid — поля формы, содержимое которых прошло проверку в браузере на соответствие указанному типу данных;

:invalid — поля формы, содержимое которых не соответствует указанному типу данных;

:enabled — все активные поля форм;

:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

:in-range — поля формы, значения которых находятся в заданном диапазоне;

:out-of-range — поля формы, значения которых не входят в установленный диапазон;

:lang() — элементы с текстом на указанном языке;

:not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not() ;

:target — элемент с символом # , на который ссылаются в документе;

:checked — выделенные (выбранные пользователем) элементы формы.

2.10. Селектор структурных псевдоклассов

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

:nth-child(odd) — нечётные дочерние элементы;

:nth-child(even) — чётные дочерние элементы;

:nth-child(3n) — каждый третий элемент среди дочерних;

:nth-child(3n+2) — выбирает каждый третий элемент, начиная со второго дочернего элемента (+2) ;

:nth-child(n+2) — выбирает все элементы, начиная со второго;

:nth-child(3) — выбирает третий дочерний элемент;

:nth-last-child() — в списке дочерних элементов выбирает элемент с указанным местоположением, аналогично с:nth-child() , но начиная с последнего, в обратную сторону;

:first-child — позволяет оформить только самый первый дочерний элемент тега;

:last-child — позволяет форматировать последний дочерний элемент тега;

:only-child — выбирает элемент, являющийся единственным дочерним элементом;

:empty — выбирает элементы, у которых нет дочерних элементов;

:root — выбирает элемент, являющийся корневым в документе — элемент html .

2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

:nth-of-type() — выбирает элементы по аналогии с:nth-child() , при этом берёт во внимание только тип элемента;

:first-of-type — выбирает первый дочерний элемент данного типа;

:last-of-type — выбирает последний элемент данного типа;

:nth-last-of-type() — выбирает элемент заданного типа в списке элементов в соответствии с указанным местоположением, начиная с конца;

:only-of-type — выбирает единственный элемент указанного типа среди дочерних элементов родительского элемента.

2.12. Селектор псевдоэлемента

Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content:

:first-letter — выбирает первую букву каждого абзаца, применяется только к блочным элементам;

:first-line — выбирает первую строку текста элемента, применяется только к блочным элементам;

:before — вставляет генерируемое содержимое перед элементом;

:after — добавляет генерируемое содержимое после элемента.

3. Комбинация селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

img:nth-of-type(even) — выберет все четные картинки, альтернативный текст которых содержит слово css .

4. Группировка селекторов

Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

H1, h2, p, span { color: tomato; background: white; }

5. Наследование и каскад

Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой. Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего). Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.

5.1. Наследование

Наследование является механизмом, с помощью которого определенные свойства передаются от предка к его потомкам. Спецификацией CSS предусмотрено наследование свойств, относящихся к текстовому содержимому страницы, таких как color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibility , white-space и word-spacing . Во многих случаях это удобно, так как не нужно задавать размер шрифта и семейство шрифтов для каждого элемента веб-страницы.

Свойства, относящиеся к форматированию блоков, не наследуются. Это background , border , display , float и clear , height и width , margin , min-max-height и -width , outline , overflow , padding , position , text-decoration , vertical-align и z-index .

Принудительное наследование

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

Как задаются и работают CSS-стили

1) Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit);

2) Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше;

3) К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.


Рис. 2. Режим разработчика в браузере Google Chrome

4) При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

div {border: 1px solid #eee;} #wrap {width: 500px;} .box {float: left;} .clear {clear: both;}

5.2. Каскад

Каскадирование — это механизм, который управляет конечным результатом в ситуации, когда к одному элементу применяются разные CSS-правила. Существует три критерия, которые определяют порядок применения свойств — правило!important , специфичность и порядок, в котором подключены таблицы стилей.

Правило!important

Вес правила можно задать с помощью ключевого слова!important , которое добавляется сразу после значения свойства, например, span {font-weight: bold!important;} . Правило необходимо размещать в конец объявления перед закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над всеми остальными правилами. Это правило позволяет отменить значение свойства и установить новое для элемента из группы элементов в случае, когда нет прямого доступа к файлу со стилями.

Специфичность

Для каждого правила браузер вычисляет специфичность селектора , и если у элемента имеются конфликтующие объявления свойств, во внимание принимается правило, имеющее наибольшую специфичность. Значение специфичности состоит из четырех частей: 0, 0, 0, 0 . Специфичность селектора определяется следующим образом:

для id добавляется 0, 1, 0, 0 ;
для class добавляется 0, 0, 1, 0 ;
для каждого элемента и псевдоэлемента добавляется 0, 0, 0, 1 ;
для встроенного стиля, добавленного непосредственно к элементу — 1, 0, 0, 0 ;
универсальный селектор не имеет специфичности.

H1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/ em {color: silver;} /*специфичность 0, 0, 0, 1*/ h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/ #sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/ li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

В результате к элементу применятся те правила, специфичность которых больше. Например, если на элемент действуют две специфичности со значениями 0, 0, 0, 2 и 0, 1, 0, 1 , то выиграет второе правило.

Порядок подключённых таблиц

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

1. Что такое каскадные таблицы стилей css?

Здравствуйте дорогие мои читатели. Я решил открыть новую часть сайта, посвященную работе с каскадными таблицами стилей css.

Итак, что же такое каскадные таблицы стилей css?

css (англ. Cascading Style Sheets — каскадные таблицы стилей ) - язык описания внешнего вида документа, написанного с использованием языка разметки.
Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.

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

Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.

Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.

Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.

2. Как создать каскадную таблицу стилей css?

В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.

Итак, делаем так:

1. Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей.
Пусть, моя папка будет называться "css"

2. Создаем простую html страничку (index.html). Как это делается можете прочитать .

3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.

В результате у Вас должно получиться вот что:

Все, файл который будет содержать в себе стили css готов.

Теперь давайт подключим созданную стаблицу стилей к файлу index.html.

3. Как подключить каскадную таблицу стилей css?

Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге прописать тег:

Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.

Например, если наш файл index.html будет иметь такой код:

Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".

Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:

Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.

Теперь давайте проверим работу таблиц стилей css.

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

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

А если Вы планируете научиться создавать профессиональные интернет магазины на движке Magento, то это легче всего сделать с помощью моего авторского видео курса .

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

В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).

Рисунок 1

Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web

1. Определение цветов. Уроки CSS

При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors , расположенной в папке CD .

Цвет

Цвет

Black (черный)

Silver (серебряный)

Maroon (темно-бордовый)

Red (красный)

Green (зеленый)

Lime (известь)

Olive (оливковый)

Yellow (желтый)

Navy (темно-синий)

Blue (синий)

Purple (фиолетовый)

Fuchia (фуксия)

Teal (темно-зеленый)

Gray (серый)

White (белый)

Таблица безопасных цветов для разработки дизайна сайта

Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

Безопасная палитра состоит из 216 цветов. Безопасные цвета всегда неизменные при переходе от одного браузера к другому или от одной платформы к другой, от одного монитора к другому с их различными возможностями цветоотображения и разрешениями.

Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

Таблицу безопасных цветов можно просмотреть в папке CD / colors .

2. Определение CSS

Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

  • первый - средствами таблиц стилей CSS (более прогрессивный и правильный метод),
  • второй - средствами атрибутов у тегов HTML .

Начнем сразу с более прогрессивного метода.

CSS - Cascading Style Sheets (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML.

Назначение: позволяет автоматически изменить стиль HTML элемента на всех страницах сайта. Например, мы используем на десяти web-страницах заголовок H1, который должен быть зеленого цвета. При использовании таблиц стилей нам придется только один раз указать зеленый цвет и он применится сразу на десяти страницах.

Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

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

Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

Синтаксис CSS -элемента

селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}

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

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

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

Например :

h1 {font-family:Arial; font-size:14pt}

или тот же самое можно записать так:

font-family:Arial;

font-size:14pt

В этом примере:

  • h1 - селектор, в данном случае HTML-элемент,
  • font-family и font-size - стилевые свойства,
  • Arial - значение свойства font-family,
  • 14pt - значение свойства font-size.

Способы включения таблиц стилей в HTML-документ

  1. Внешняя таблица стилей (связанный стиль).
  2. Внедренная таблица стилей (глобальный стиль).
  3. Внутренние стили.

3. Внешняя таблица стилей CSS (связанный стиль)

Определяет стиль всего сайта.

Является текстовым файлом с расширением css.

В данном примере таблица стилей написана в текстовом файле style.css.

Практическое задание 1

1. Откройте чистый документ в Notepad++ и сохраните его в папке public_html под именем style . css . Обратите внимание, чтобы в поле Тип файла было установлено All types (рисунок 2).

Рисунок 2

2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main . html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):

Рисунок 3

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

  • h1 - селектор, т.е. элемент html, к которому применяется стиль;
  • text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);
  • color:#0000FF; - стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
  • font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;
  • стилевые свойства со значениями разделены между собой точкой с запятой;
  • и так далее, все согласно синтаксису.

Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main . html и style . css . Для этого откройте файл main.html и между тегами < head > и head > вставьте конструкцию , как на рисунке 4.

Рисунок 4

3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.

Рисунок 5

В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник Sprav_CSS.doc .

4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле style . css h 2 (рисунок 6).

Рисунок 6

5. Проверьте результат в браузере, он должен совпадать с рисунком 7.

Рисунок 7

6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле style . css сделаем следующую запись для селектора p (рисунок 8).

Рисунок 8

7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора body добавим запись (рисунок 9)

Рисунок 9

8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.

Рисунок 10

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

Исследовательские задания

  1. Используя справочник Sprav_CSS.doc, оформите стилями заголовок < h 3> в файле main.html. Свойства стилей на выбор.
  2. Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.
  3. Для списка «Площади домов» в качестве маркера примените изображение spisok_1.gif из папки html_css_2 . Остальные параметры по желанию.
  4. В качестве фона web-страницы примените через стили изображение fon9.jpg из папки html_css_2 .
  5. С использованием стилей сделайте шрифт абзацев полужирным.

Примерный результат на рисунке 11.

Рисунок 11

4. Классы в стилевых спецификациях

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

Например, у нас в тексте есть несколько заголовков h 1 и нам необходимо, чтобы они были разного цвета. Тогда разделить стили надо следующим образом

h1.golub{color:blue}

h1.krasn{color:red}

h1.zelen{color:green}

После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.

Теперь при использовании тега < h 1> в документе необходимо установить атрибут class , чтобы указать, какой именно стиль нужно применить:

< h 1 class =" golub "> Это голубой заголовок h 1>

< h 1 class =" krasn "> Это красный заголовок h 1>

< h 1 class =" zelen "> Это зеленый заголовок h 1>

Практическое задание 2

1. Откройте файл shablon . html . Сохраните его под новым именем ploshady . html в папке public_html .

2. Напишите между тегами и новый заголовок «Площади домов».

3. В содержимое скопируйте текст из файла Площади домов.txt из папки html _ ccs _2 .

4. Стили будем писать в том же файлеstyle . css , который у нас создан в предыдущем уроке. Поэтому в файле ploshady . html установите связку с этой таблицей стилей, вставив между тегами и (рисунок 12)

Рисунок 12

5. Отформатируйте заголовки тегом

и присвойте каждому заголовку свой класс (рисунок 13).

Рисунок 13

Ваш файл ploshady . html сейчас должен выглядеть следующим образом (рисунок 14).

Рисунок 14

6. В таблице стилей style . css создайте следующую запись (рисунок 15)

Рисунок 15

7. Проверьте web-страницу в браузере. Результат на рисунке 16.

Рисунок 16

8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):

Рисунок 17

Практическое задание 3

Под каждый заголовком в файле ploshady . html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:

Рисунок 18

5. ID-стиль для специфического элемента

Уроки CSS включают изучение так называемых id-стилей.

Любому элементу можно присвоить идентификаторid , а затем поставить в соответствие этому элементу какой-либо стиль, используя id .

Например:

Запись в файле таблиц стилей будет следующая

# test { color :#00 ffff }

Теперь можно поставить этот стиль в соответствие любому элементу в документе html:

...

...

В этом примере слово test - имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.

Практическое задание 4

Сделаем заготовку для будущего меню нашего сайта.

1. Откройте файл shablon . html и сохраните его под новым именем menu . html в папке public_html.

2. В содержимое страницы файла menu . html внесите текст из файла menu . txt из папкиhtml _ css _2 .

3. Средствами html-тегов отформатируйте файл следующим образом:

  • для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег

    ;

  • для списка «Категории проектов» используйте нумерованный список
      ;
    1. для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список

      4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif ). Результат должен совпасть с рисунком 19.

      Рисунок 19

      5. Для этого меню сделаем отдельную таблицу стилей под именем style _ menu . css . Установите связку между файлом menu . html и таблицей стилей style _ menu . css , вставив запись между тегами и в файле menu . html .

      6. Создайте чистый документ и сохраните его под именем style _ menu .css в своей папке.

      7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue . Т.е. код будет выглядеть следующим образом (рисунок 20):

      Рисунок 20

      8. В файле style _ menu . css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):

      Рисунок 21

      9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown . Т.е. код будет выглядеть следующим образом (рисунок 22):

      Рисунок 22

      10. В файле style _ menu . css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):

      Рисунок 23

      11. И добавим еще цвет фона файлу menu.html (рисунок 24)

      Рисунок 24

      12. В результате получим следующую web-страницу (рисунок 25)

      Рисунок 25

      В результате выполнения этого урока CSS, у Вас должны быть созданы следующие файлы:

      • style . css
      • style _ menu . css
      • ploshady . html
      • menu . html

      Для чего нужны таблицы стилей?

      Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

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

      Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации.

      Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.

      В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве - будь это 21" монитор или маленький черно-белый экран сотового телефона.

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

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

      Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.

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

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

      Подключение таблиц стилей
      Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:

      внешний файл

      описание в секции заголовка

      inline-описание

      Начнем с самого простого, с так называемого inline-описания или описания, встроенного в тег:

      Этот текст переопределен стилем

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

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

      При использовании этого метода описание стилей необходимо разместить в секции заголовка:


      ....

      Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:

      Этот текст написан стилем header

      Этот текст написан красным цветом

      Как видите, все не так уж сложно. Главное понять основные принципы. Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег

      Теперь весь текст, заключенный в теги, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объем файла за счет отсутствия лишних атрибутов class.

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

      Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):

      Header { text-align: center; font-size: 27pt;}
      .red { color: red; }
      p { text-align: center; font-size: 12pt;}


      ....

      ....

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

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

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

      Каскадность стилей
      Итак, для начала разберемся, почему стили называются каскадными. Позволь, дорогой читатель, я еще раз приведу способы внедрения стилей на страничку:

      использование отдельного стилевого файла и вставка его при помощи тега

      описание стиля в заголовке документа

      применения стиля как параметра в теге.

      Каскадность заключается в том, что стили могут переопределяться. Приведенный выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.

      Например, мы определили во внешнем стилевом файле, что текст в теге

      должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге

      должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

      Для чего это нужно? О, это очень полезная вещь. И сейчас я покажу это на конкретном примере. Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль:


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

      Copyright (C)
      1998-2001 Cherry-Design

      Сделали мы это при помощи параметр style, а он, как Вы помните, действует лишь в пределах того тега, в котором был определен. Что нам и нужно.

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

      В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

      Что-то


      Что-то

      Что-то

      Тег

      подобен , но только с тем отличием, что делает до и после себя отбивку (точно так же, как и

      ). А вот стиль текста, которым набрано основное содержимое странички, лучше всего сделать переопределением тега

      А не определением отдельного класса.

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

      , т.к. Netscape категорически отказывается наследовать стили, присвоенные до таблицы.

      Разобравшись с каскадностью, давайте поговорим о синтаксисе.

      Синтаксис CSS
      Описание каждого класса делается при помощи конструкции, подобной этой:

      Small { font-size: 9pt; }

      Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:

      Small { font-size: 9pt; color: #eeeeee; text-align: center; }

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


      Раз есть универсальные классы, то, вероятно, существуют и какие-то другие? Все правильно, еще бывают так называемые теговые классы:

      p.small { font-size: 9pt; }

      Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:

      Этот текст будет выведен стилем small


      Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую:

      p, td { font-size: 9pt; color:green;}

      Такой прием называется группировкой, и в данном случае мы определили и для

      одинаковый размер и цвет текста.

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

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

      a { text-decoration: none; }
      a:hover { text-decoration: underline; }

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

      А вот и другой пример псевдокласса - определение буквицы вначале абзаца:

      p:first-letter { font-size: 200%; font-weight: bold; }

      Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.

      Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием <домашняя страничка> или английским словом . Если раньше создание web-страниц было уделом избранных и на просторах Рунета царили лишь признанные <киты> web-дизайна, то теперь даже мой десятилетний сынишка в свободное от учебы время мастерит потихонечку собственную страницу, собираясь разместить ее на каком-нибудь бесплатном сервере (вроде narod.ru или boom.ru), которых за последний год тоже развелось в Рунете множество. Web-конструированием сегодня не занимается, наверное, только не подключенный к Сети или ленивый. Множество людей, поблуждав по просторам Интернета, рано или поздно задумываются о создании собственной странички. Для них-то и написана эта статья.

      Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.

      Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad"ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.

      Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.

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

      Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.

      Логическое и физическое форматирование

      Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой <неподвластности> логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.

      Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги

      ,

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

      Назначение стилей отдельным элементам страницы

      CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу . Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?

      Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега , присвоив ему соответствующее значение. Синтаксис такой:

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

      Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.

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

      Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей

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

      Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:

      ... ...

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

      Назначение стилей одновременно для нескольких страниц сайта

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

      Вот пример содержимого такого файла (например, my.css):

      Body { font-family: "Times New Roman", serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; }

      Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами и следующую строку:

      ... ...

      В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.

      Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера ...

      Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер ... ...

      Вопрос журналиста

      Ответ интервьюируемого

      ...

      В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.

      Селектор id

      Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:

      ... ... ...

      Текст, вводимый в это поле, будет отображен зеленым цветом:

      Текст, вводимый в это поле, будет отображен красным цветом:

      ...

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

      Контекстные селекторы

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

      H1 { color: red; background-color: gray; } p { color: green; background-color: yellow; } em { color: black; background-color: silver; }

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

      H1 em { color: #CC0000; background-color: gray; }

      А вот пример кода страницы с использованием этого контекстного селектора:

      ... ... ...

      Это - заголовок первого уровня с выделенным словом

      А это - обычный абзац с выделенными словами

      ...

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



СХОЖИЕ СТАТЬИ