it.onat.edu.uait.onat.edu.ua/docs/html_css_rus.docx · web viewНапример, если вы...

Введение..................................................................................................................................................................................3

Создайте свой первый сайт.....................................................................................................................................................4

Структура..................................................................................................................................................................................6

Базовые тэги.............................................................................................................................................................................9

Атрибуты.................................................................................................................................................................................12

Ссылки....................................................................................................................................................................................13

Изображения..........................................................................................................................................................................16

Таблицы..................................................................................................................................................................................20

Внешний вид (CSS).................................................................................................................................................................24

Публикация страниц..............................................................................................................................................................26

Web-стандарты и проверка...................................................................................................................................................27

Каскадные таблицы стилей. Что такое CSS?.........................................................................................................................30

Как работает CSS?...................................................................................................................................................................31

Цвет и фон..............................................................................................................................................................................33

Шрифты...................................................................................................................................................................................39

Текст........................................................................................................................................................................................42

Ссылки....................................................................................................................................................................................44

Селекторы тегов.....................................................................................................................................................................47

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

Соседние селекторы..............................................................................................................................................................50

Дочерние селекторы..............................................................................................................................................................53

Селекторы атрибутов.............................................................................................................................................................57

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

Идентификация и группирование элементов (class и id)....................................................................................................65

Группирование элементов (span и div)................................................................................................................................67

Боксовая модель....................................................................................................................................................................68

Поля и заполнение.................................................................................................................................................................70

Рамки......................................................................................................................................................................................72

height/высота и width/ширина..............................................................................................................................................74

Всплывающие элементы (поплавки)....................................................................................................................................75

Подробно о свойстве float перевод взят с habrahabr...................................................................................................78

Что такое float?.......................................................................................................................................................................78

Позиционирование элементов.............................................................................................................................................89

Наслоение с помощью z-index (Слои)...................................................................................................................................91

Псевдоклассы.........................................................................................................................................................................93

Псевдоэлементы....................................................................................................................................................................93

Наследование и каскадирование в CSS................................................................................................................................93

Адаптивный Веб-дизайн........................................................................................................................................................94

1

LESS........................................................................................................................................................................................102

Web-стандарты и проверка кода........................................................................................................................................102

Полезные ресурсы, обязательные для рассмотрения......................................................................................................103

2

Введение

HTML?Что такоеHTML это "родной язык" вашего браузера (программы просмотра вэб-страниц).Говоря кратко, HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Tim Berners-Lee мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните "View" в линейке меню вашего браузера и выберите "Source" либо «Просмотр кода странцы» и т.п. в других браузерах.

.

HTML?Для чего я могу использоватьЕсли вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver (либо другие визуальные редакторы), знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML легко изучать и использовать. HTML используется для создания (верстки) web-сайтов.

H-T-M-L?Как расшифровываетсяHTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки" - и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали.Hyper противоположно linear/построчно. В добрые старые времена - когда кошки ловили мышей - компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить Onat.edu.ua.Text - всё понятно.Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.Language это язык - HTML. В нём используется много английских слов.В данном учебнике вы будете изучать так называемы XHTML (Extensible HyperText Mark-up Language), который, коротко говоря, является новым и более структурированным вариантом HTML.Если вы поняли, что такое HTML (и XHTML), давайте перейдём к тому, для чего они оба предназначены: к созданию web-сайтов.

HTML (HyperText Markup Language) - язык разметки гипертекста.

Отнести HTML к языкам программирования можно лишь с большой натяжкой, это все-таки язык РАЗМЕТКИ. Из названия становится понятным его предназначение - указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора.

Что такое html элемент? Да все, что мы размещаем: текст, рисунки, анимации и т.д. С помощью HTML мы можем указать браузеру где именно их разместить; какой текст сделать большим и жирным, а какой -

3

маленьким курсивом; где начать новую строку, а где сделать переход на другую страницу. И многое другое.

Например,

<b>Что такое html?</b> - этот текст будет отображаться жирным;<i>Этот текст будет выделен курсивом</i>

В данном случае, символы <b> </b> - делают текст жирным, а символы <i> </i> - курсивом. Такие символы составляют основу html, они называются ТЕГАМИ. Между < и > находится имя тега и его параметры (если они есть).

HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.

В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.

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

Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.

Теги могут иметь параметры (или атрибуты), например,

<body style="color:red">Здесь содержимое</body> В данном случае тег <body> имеет параметр style, значение которого равно "color:red". Переводя на человеческий язык - сделать текст документа красного цвета.

По сути, HTML - это набор тегов и их параметров.

Создайте свой первый сайт

После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.

Необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа - текстовый редактор, лучше – с подсветкой тегов – Sublime Text 2).

Откройте Notepad (Блокнот) или другой текстовый редактор:

? ?Что я могу С чего начать

Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: "Ура! Это моя первая web-страница." Читайте дальше, и вы узнаете, как это легко сделать.

HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо . Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.

4

Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг "<html>" в первой строке документа Notepad.

Как вы помните, <html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг "</html>" на пару строк ниже и вводите весь текст документа между <html> и </html>.

Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>).

Ваш документ теперь должен выглядеть так:

<html> <head> </head>

<body> </body>

</html>

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

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

web- ?Как добавить содержимое в сайт

Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.

Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе "head". Тэг для названия - <title>:

<title>Моя первая web-страница</title>

Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".

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

<p>Ура! Это моя первая страница.</p>

Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.

5

Ваш HTML-документ должен теперь иметь такой вид:

<html>

<head> <title>My first page </title> </head>

<body> <p>Hurrah! This is my first page.</p> </body>

</html>

Готово! Вы создали свой первый настоящий web-сайт!

Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере.

Структура

Структура html-документа состоит из трех пар тегов:

<html> <head> Заголовок документа </head> <body> Тело документа </body></html> Теги <html> </html> являются контейнером для всех остальных, т.е в них помещаются все остальные. Таким образом, ваш документ должен начинаться с тега <html>, а заканчиваться тегом </html>.

Сам документ условно разделен на две части - заголовок документа (теги <head> </head>) и тело документа (теги <body> </body>).Заголовок документа - тег HEAD и его элементы

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

Title

Единственным обязательным элементом заголовка документа являются теги <title> </title>. Они необходимы, чтобы дать документу название, оно отражается в заголовке окна браузера. Например, если написать следующий код:

<html>

<head> <title>Заголовок документа</title> </head>

<body> Тело документа </body>

6

</html> В окне браузера он будет выглядеть так:

Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами.

Не давайте своим документам безликие названия, типа "Первая страница", во-первых название документа должно характеризовать его содержимое, а во-вторых, содержимое тегов <title> </title> играет не последнюю роль при оптимизации и раскрутке сайта.

Base

Одиночный тег <base> служит для указания полного URL-адреса документа. Зачем это нужно? Представьте, что блуждая по интернету, вы сохранили какую-нибудь html-страницу себе на компьютер, с тем, чтобы просмотреть ее позже. Все картинки на этой страницы превратятся в красные крестики. Но если вы не отключены от сети, а на странице присутствует тег <base>, то браузер будет знать, где искать необходимый файл, найдет его и загрузит картинки.

У этого тега один атрибут href, значением которого является адрес страницы. Пример кода:

<html>

<head> <title>Структура html</title> <base href="http://www.my_site.ru/"> </head>


</html>

Link

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

7

У тега <link> несколько атрибутов:

href - указывает URL-адрес подключаемого файла.

rel - указывает на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа).

type - указывает тип и параметры присоединенной таблицы стилей.

Пример кода:

<html>

<head> <title>Структура html</title> <base href="http://www.my_site.ru/"> <link rel="stylesheet" type="text/css" href="style.css"> </head>


</html>

Meta

Информация в этом теге не имеет никакого отношения к HTML, однако ее использование очень удобно для решения ряда задач:

- указание кодировки страницы, например, для русского текста в кодировке Windows:

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"> - указание ключевых слов страницы (используется при оптимизации страниц):

<meta http-equiv="KEYWORDS" content="тег, структура html, заголовок страницы"> - указание краткого описания страницы:

<meta http-equiv="DESCRIPTION" content="Описание структура html и элементов заголовка"> Возможны и другие варианты. Рассмотрим параметры тега <meta>:

http-equiv - определяет свойство тега (тип контента, ключевые слова, описание и т.д.)

name - используется для дополнительного описания тега, если отсутствует, то считаеся эквивалентным параметру http-equiv.

content - значение параметра http-equiv.

Примeр кода<html>

<head> <title>Структура html</title> <base href="http://www.my_site.ru/">

8

Таким же образом, как вы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива/italic тэгом <i>. И конечно, "i" это сокращение от "italic". В современной верстке чаще используется <strong> вместо <b> и <em> вместо <i>.

1:Пример <i>Это должно быть выведено курсивом.</i>

будет выглядеть в браузере:

Это должно быть выведено курсивом.

Следует отметить, что теги <b> и <strong>, также как <i> и <em>, несмотря на сходный результат, не совсем эквивалентны и заменяемы. Первый тег <b> — относится к тегам физической разметки и устанавливает жирный текст, а тег <strong> — является тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Аналогично можно уменьшить размер шрифта тэгом <small>:

2:Пример <small>Это будет выведено уменьшенным шрифтом.</small>


Это будет выведено уменьшенным шрифтом.

?Возможно ли использовать несколько тэгов одновременно

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

3:Пример

Если вы хотите вывести текст bold и italic, это нужно сделать так:

<b><i>Текст bold и italic</i></b>

а НЕ так :

<b><i>Текст bold и italic</b></i>

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

Как сказано в Уроке 4, есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретными буквами, являются изолированными командами. Пример - тэг <br />, который создаёт перевод строки:

10

4:Пример Некоторый текст<br /> и ещё текст, уже на новой строке


Некоторый текст и ещё текст, уже на новой строке

Заметьте, что этот тэг записан как гибрид открывающего и закрывающего тэгов с пробелом и слэшем: <br />. В принципе, его можно записывать <br></br>, но зачем усложнять?

Другой такой тэг - <hr /> - рисует горизонтальную линию ("hr" от "horizontal rule"):

Пример 5:

<hr />


Примеры тэгов, требующих наличия и закрывающего тэга: <ul>, <ol> и <li>. Эти тэги используются для вывода списков.

<ul> - сокращение от "unordered list/неупорядоченный список" - вставляет значок кнопки для каждого элемента списка. <ol> - сокращение от "ordered list/упорядоченный список" - нумерует каждый элемент списка. Для создания элемента списка используйте тэг <li> ("list item/элемент списка"). Непонятно? См. примеры:

7:Пример <ul>

<li>Элемент списка</li> <li>Другой элемент списка</li>

</ul>

выглядит в браузере:

Элемент списка Другой элемент списка

8:Пример <ol>

<li>Первый элемент списка</li> <li>Второй элемент списка</li>

</ol>

выглядит в браузере:

1. Первый элемент списка2. Второй элемент списка

11

Полный пример:

<i>Italic</i> <small>Уменьшенный шрифт</small> <br /> перевод строки <hr /> Горизонтальная линия <ul>Список</ul> <ol>Упорядоченный список</ol> <li>Элемент списка</li>

Атрибуты

Вы можете назначать атрибуты во многих тэгах.

?Что такое атрибут

Как вы, возможно, помните, тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".

1:Пример <h2 style="background-color:#ff0000;">Мой друг HTML</h2>

Атрибуты всегда записываются внутри тэга, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.

?О чём же речь

Атрибуты бывают разные. Первый изученный вами атрибут это style/стиль. С помощью этого атрибута вы можете настраивать отображение вашего web-сайта. Например, цвет фона/background color:

Пример 2:

<html>

<head> </head>

<body style="background-color:#ff0000;"> </body>

</html>

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

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

12

?Как страница стала красной

В предыдущем примере мы запросили вывод красного фона кодом "#ff0000". Это код красного цвета в т. н. шестнадцатиричном формате (HEX). Каждому цвету соответствует своё 16-ричное число. Вот примеры:

Белый: #ffffff whiteЧёрный: #000000 (нули) blackКрасный: #ff0000 redСиний: #0000ff blueЗелёный: #00ff00 greenЖёлтый: #ffff00 yellow

16-ричный код цвета состоит из # и шести цифр или букв. Существует более 1000 HEX кодов и бывает непросто определить, какой HEX-код какому цвету соответствует.

Можно использовать также английские названия самых распространённых цветов (white, black, red, blue, green и yellow).

Пример 3:

<body style="background-color: red;">

Но хватит о цвете. Давайте вернёмся к атрибутам.

?Какие тэги могут использовать атрибуты

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

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

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

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

В этом учебнике мы рассмотрим самые важные атрибуты.

, ?Кстати их каких ещё частей состоит тэг

Основная часть тэга называется элемент (например, p в <p>). Таким образом, тэг состоит из элемента (например, <p>), либо из элемента плюс один или более атрибутов (например, <p style="background-color:#ff0000;">).

Ссылки

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

?Что необходимо для создания ссылки

Для создания ссылки вы используете то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом - и вы можете перейти куда угодно. Вот пример того, как может выглядеть ссылка на Onat.edu.ua:

13

1:Пример<a href="http://onat.edu.ua/">Это ссылка на onat.edu.ua</a>


Это ссылка на onat . edu . ua

Элемент a обозначает "якорь/anchor". Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

В примере атрибут href имеет значение "http://onat.edu.ua", которое является полным адресом Onat.edu.ua и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Это ссылка на Onat.edu.ua" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a>.

?Как насчёт ссылок между моими собственными страницами

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

2:Пример

<a href="page2.htm">Щёлкните здесь для перехода на page 2</a>

Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:

3:Пример

<a href="subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>

В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:

Пример 4:

<a href="../page1.htm">Ссылка на page 1</a>

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

Разобрались? Альтернативно вы всегда можете указать полный адрес файла (URL).

?А ссылки внутри страницы

Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ "#".

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

14

http://www.html.net/

<h1 id="heading1">heading 1</h1>

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

<a href="#heading1">Ссылка на heading 1</a>

Всё станет понятнее на примере:

Пример 5:

<html> <head> </head>

<body>

<p><a href="#heading1">Ссылка на heading 1</a></p> <p><a href="#heading2">Ссылка на heading 2</a></p>

<h1 id="heading1">heading 1</h1> <p>Text text text text</p>

<h1 id="heading2">heading 2</h1> <p>Text text text text</p>

</body> </html>

выглядит в браузере (щёлкните по ссылкам):

Ссылка на heading 1

Ссылка на heading 2

Heading 1Text text text text

Heading 2Text text text text

(Примечание: атрибут id должен начинаться с буквы)

15

http://ru.html.net/tutorials/html/lesson8.php#heading2

http://ru.html.net/tutorials/html/lesson8.php#heading1

- ?Могу я перейти ещё куда нибудь

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:

Пример 6:

Ссылка на <a href="mailto:[email protected]">Отправить e-mail nobody на Onat.edu.ua</a>

будет в браузере:

Отправить e-mail nobody на onat . edu . ua

Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо адреса документа, вы записываете mailto: с последующим адресом электронной почты/e-mail. При щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса. Обратите внимание, что эта функция будет работать только в том случае, если e-mail программа установлена на вашем компьютере. Попробуйте!

Для создания ссылки вы обязательно должны использовать атрибут href. Кроме того, в ссылку можно поместить title:

7:Пример <a href="http://onat.edu.ua/" title="Посещайте Onat.edu.ua и изучайте HTML">Onat.edu.ua</a>


Onat.edu.ua

Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст "Посещайте Onat.edu.ua и изучайте HTML".

Изображения

Здóрово было бы поместить портрет актёра и музыкальной легенды David'а Hasselhoff'а прямо в центре ваше страницы?!

...Это звучит немного дерзко

Может быть, но это довольно просто сделать. Всё, что вам необходимо, как всегда, - тэг:

Пример 1:

<img src="david.jpg" alt="David" />


16


mailto:[email protected]

Вам необходимо сообщить браузеру, что вы хотите вставить изображение/image (img), и указать его размещение (src, сокращение для "source"). У вас есть файл изображения?

Обратите внимание, что тэг img не требует наличия закрывающего тэга. Как и <br />, это команда не связана с буквенным текстом.

"david.jpg" это название файла изображения. ".jpg" - расширения файла, тип изображения. Как ".htm" указывает, что файл является HTML-документом, так и ".jpg" сообщает браузеру, что файл является изображением. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)

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

Традиционно форматы GIF и JPEG являются преобладающими типами, но в последнее время становится всё более популярным формат PNG (прежде всего из-за издержек формата GIF). Формат PNG по многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие.

?Где мне взять файлы изображений

Для этого вам понадобится программа редактирования файлов изображений. Такая программа совершенно необходима для создания интересных web-сайтов.

К сожалению в Windows и других операционных системах отсутствуют хорошие программы для редактирования изображений. Таким образом, вы может вложить деньги в приобретение Paint Shop Pro, PhotoShop или Macromedia Fireworks - это три лучшие программы редактирования изображений, имеющиеся в данный момент на рынке.

Однако, как мы говорили ранее, не обязательно покупать дорогие программы для работы с этим учебником. Вы можете загрузить прекрасную программу для работы с изображениями, Irfan View, которая является т. н. freeware, и, следовательно, ничего не стóит.

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

1. Правой клавишей мыши щёлкните на изображении в Internet.2. Выберите "Save picture as..." в меню.3. Выберите место для сохранения на вашем компьютере и нажмите "Save".

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

17

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

, ?Это всё что нужно знать об изображениях

Вам необходимо знать ещё две вещи.

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

Пример 2:

<img src="images/logo.png">

3:Пример <img src="http://www.html.net/logo.png">

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

4:Пример <a href="http://www.html.net"> <img src="logo.png"></a>

будет выглядеть в браузер примерно так (попробуйте щёлкнуть на изображении):

, ?Есть ещё атрибуты которые мне необходимы

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

Атрибут alt используется для альтернативного описания изображения, если, по каким-то причинам, оно не показано пользователю. Это особенно касается пользователей с ослабленным зрением, или если страница очень медленно загружается. Следовательно, всегда нужно использовать атрибутalt:

5:Пример <img src="logo.gif" alt="HTML.net logo">

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

Атрибут title можно использовать для краткого описания изображения:

18


Пример 6:

<img src="logo.gif" title="Learn HTML from HTML.net">


Если вы поместите курсор, без щелчка, над ссылкой, вы увидите, что текст "Learn HTML from HTML.net" появился во всплывающем боксе.

Два других важных атрибута - width и height:

Пример 7:

<img src="logo.png" width="141" height="32">

даст в браузере:

Атрибуты width и height можно использовать для установки ширины и высоты изображения, соответственно. Значение указывается в пикселах. Пиксел это единица для измерения разрешения экрана. (Обычное разрешение - 800x600 и 1024x768 пикселов). В отличие от сантиметров, пикселы являются относительными единицами, которые зависят от разрешения данного экрана. Для пользователя с высоким разрешением экрана 25 пикселов могут выглядеть как 1 сантиметр, а эти же 25 пикселов при низком разрешении могут соответствовать 1.5 сантиметрам экрана.

Если вы не установите width и height, изображение будет показано в своём реальном размере. При помощи width и height вы можете изменять размеры:

8:Пример <img src="logo.gif" width="32" height="32">

будет в браузере:

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

Тем не менее, неплохо использовать атрибуты width и height, поскольку браузер сможет определять размер изображения на странице до его полной загрузки. Это позволит браузеру быстрее и более качественно загружать страницы.

19

Таблицы

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

?Это трудно

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

Пример 1:

<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr>

</table>


Cell 1 Cell 2Cell 3 Cell 4

Какая разница между <tr> и <td>?

Как видно из приведённого примера, это, возможно, самый сложный из примеров HTML, которые мы вам давали до сих пор. Давайте здесь остановимся и сделаем пояснения:

3 :Для вставки таблиц используются базовых тэга

<table> - начало и конец таблицы. Логично. <tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично. <td> - сокращение от "table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку

ряда таблицы. Всё просто и логично.

Вот что происходит в Примере 1: таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки:<td>Cell 1</td> и <td>Cell 2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается</table>.

Чтобы было ещё понятнее: ряды это горизонтальные строки ячеек, а столбцы - вертикальные столбцы ячеек:


Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

Пример 2:

20

<table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> <tr> <td>Cell 9</td> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr>

</table>


Cell 1 Cell 2 Cell 3 Cell 4Cell 5 Cell 6 Cell 7 Cell 8Cell 9 Cell 10 Cell 11 Cell 12

- ?Есть ещё какие нибудь атрибуты

Разумеется. Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

Пример 3:

<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr>

</table>



Толщина рамки специфицируется в пикселах (См. Урок 9)

Как и с изображениями, вы можете указывать размер таблицы в пикселах или в процентах от размера экрана:

4:Пример <table border="1" width="30%">

21

http://ru.html.net/tutorials/html/lesson9.php

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

?Ещё атрибуты

У таблиц есть много атрибутов. Вот ещё два:

align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.

valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

Пример 5:

<td align="right" valign="top">Cell 1</td>

?Что можно вставлять в таблицы

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

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

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:

Пример 1:

<table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr>

</table>


Cell 1Cell 2 Cell 3 Cell 4

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример 2:

<table border="1"> <tr> <td colspan="2">Cell 1</td> <td>Cell 2</td>

22

</tr> <tr> <td>Cell 3</td> <td>Cell 4</td> <td>Cell 5</td> </tr>

</table>


Cell 1 Cell 2Cell 3 Cell 4 Cell 5

rowspan?А как насчёт

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

Пример 3:

<table border="1"> <tr> <td rowspan="3">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr>

</table>


Cell 1Cell 2Cell 3Cell 4

В этом примере rowspan имеет значение "3" в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.

23

(CSS)Внешний вид

Хорошо было бы придать страницам достойный их содержания вид?

Для этого используйте Cascading Style Sheets (CSS)/каскадные таблицы стилей. В этом уроке мы дадим краткое описание CSS. Этот урок, так сказать, для растравки.

CSS это лучшая половина HTML. Но, в плане кодирования, их статус различается: HTML заботится об общем выводе информации (её структуре), в то время как CSS производит тонкую настройку внешнего вида (layout).

CSS может добавляться атрибутом style. Например, вы можете установить тип и размер шрифта параграфа:

Пример 1:

<p style="font-size:20px;">Это напечатано размером 20</p> <p style="font-family:courier;">Это напечатано шрифтом Courier</p> <p style="font-size:20px; font-family:courier">Это напечатано

шрифтом Courier размером 20</p>


Это напечатано размером 20

Это напечатано шрифтом Courier

Это напечатано шрифтом Courier размером 20

В этом примере мы использовали атрибут style для специфицирования типа шрифта (командой font-family) и размер шрифта (командой font-size). Обратите внимание, как в последнем параграфе мы одновременно установили тип и размер, разделяя параметры точкой с запятой.

?Объём работы значительно возрастёт

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

Пример 2:

<html> <head>

<title>My first CSS page</title>

<style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman}</style>

</head>

<body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p>

24

</body> </html>

В этом примере правила CSS вставлены в раздел head и применяются ко всей странице. Для этого используется тэг <style type="text/css">, который даёт соответствующее указание браузеру.

В этом примере заголовки на странице будут выведены шрифтом Arial размера 30px. Все подзаголовки - Courier размера 15. А весь текст в обычных параграфах будет шрифтом Times New Roman размера 8.

Можно также указывать правила CSS в отдельном документе. Тогда можно применять CSS уже ко всем страницам. Это очень важное качество, если вам понадобится изменить тип или размер шрифта для большого web-сайта с тысячами страниц. Сейчас мы не будем в это углубляться, но вы можете изучить всё подробнее в нашем учебнике CSS.

CSS?Что ещё можно сделать с помощью

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

<p style="color:green;">Зелёный текст</p>

<h1 style="background-color: blue;">Заголовок на синем фоне<h1>

<body style="background-image: XXX;">

Попробуйте вставить эти примеры на ваши страницы - как показано выше, а также как CSS в разделе head.

CSS , ?это ничего кроме цветов и типа шрифта

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

3:Пример <p style="padding:25px;border:1px solid red;">Мне нравится CSS</p>


Мне нравится CSS

С помощью свойства float элемент может "всплывать" вправо или влево. Это иллюстрирует следующий пример:

4:Пример <img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit

25

lobortis nisl ut aliquip ex ea commodo consequat...</p>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

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

С помощью свойства position вы можете поместить элемент точно в нужном месте на странице:

Пример 5:<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:150px;" />

Публикация страниц

До сих пор только вы имели возможность наслаждаться просмотром ваших страниц. Теперь пришло время и всем остальным оценить ваши произведения.

?Готов ли мир к этому

Мир готов - скоро и вы тоже будете готовы. Для показа вашего web-сайта в Internet вы должны иметь пространство на сервере и бесплатную FTP-программу.

Если у вас есть доступ в Internet, у вас, возможно, уже есть немного места для вашего web-сайта. Ваше пространство на сервере может называться примерно так - http://home.provider.com/~usernumber. Но сначала вы должны активировать его. Прочтите об этом в документации вашего Internet-провайдера или на его справочных страницах.

Другая возможность получить некоторое пространство в Internet - настроить учётную запись e-mail (на, например, Hotmail), тогда вы сможете зарегистрировать свободное пространство в Internet. Такой сервис имеют несколько компаний, среди них - 000webhost.com (щёлкните "Order" и выберите free membership) - регистрация займёт всего несколько минут.

Для доступа на сервер вам необходимо знать "Host Name" (Например, ftp.htmlnet.site50.net) и иметь своё username и password.

26

http://www.000webhost.com/

, ?Это всё что мне нужно

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

Имеется множество FTP-программ. Одна из лучших - FileZilla, абсолютно бесплатная. Можно скачать FileZilla с filezilla.sourceforge.net.

?А как выгружать страницы

Ниже мы даём описание того, как выгружать страницы на бесплатную учётную запись/account на 000webhost.com с помощью FileZilla. Но эта процедура применима, в большей или меньшей степени, для всех провайдеров и FTP-программ.

Откройте FTP-программу после того, как подключитесь к Internet. Вставьте "Host Name" ("ftp.htmlnet.site50.net" ниже "Address"), имя пользователя (ниже "User") и пароль (ниже "Password") и щёлкните "Connect". У вас теперь имеется доступ к этому серверу. В одной части программы вы видите содержимое вашего компьютера ("Local Site"), а в другой - содержимое сервера ("Remote Site"):

Найдите ваши HTML-документы и изображения на вашем компьютере (в "Local site") и перешлите их на сервер ("Remote site") дважды щёлкнув на них. Теперь их видит весь мир! (Например, по адресу http://htmlnet.site50.net/page1.htm).

Назовите одну из страниц "index.htm" (или "index.html"), и она автоматически станет стартовой страницей. т. е., если вы введёте http://htmlnet.site50.net (без указания имени файла), откроется http://htmlnet.site50.net/index.htm.

Для длительной работы неплохо приобрести собственный домен (www.ваше-имя.com) и избавиться от длинного адреса, предоставляемого Internet-провайдером бесплатного сервиса. Можете купить домен, к примеру, на Speednames или NetworkSolutions.

Web- стандарты и проверка

В этом уроке мы дадим несколько больше теории HTML.

27

http://www.networksolutions.com/

http://www.speednames.com/

http://filezilla.sourceforge.net/

HTML?Что ещё нужно знать о

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

Почти с момента зарождения Internet начались попытки выработать общий HTML-стандарт на World Wide Web Consortium (W3C), который основал Tim Berners-Lee (ага! тот крутой парень, который изобрёл HTML). Но это длинный и долгий путь.

В старину - когда за браузеры надо было заплатить - Netscape был основным браузером. Существовали HTML-стандарты .0 и 3.2. Но на рынке, на 90% занятом Netscape не было необходимости в общих стандартах. Кроме того, Netscape изобретал собственные странные элементы, которые не работали на других браузерах.

Многие годы Microsoft почти игнорировал Internet. Затем началось соревнование с Netscape, и появился новый браузер. Первые версии нового браузера Microsoft'а - Internet Explorer - поддерживали HTML-стандарты не лучше, чем Netscape. Но Microsoft решил распространять свой браузер бесплатно (это всегда приветствуется), и Internet Explorer вскоре стал самым популярным браузером.

Начиная с версий 4 и 5, Microsoft всё более и более поддерживал HTML-стандарты от W3C. Netscape не занимался разработкой новых версий и продолжал выпускать устаревшую версию 4.

Конец этой истории. Сегодня HTML-стандарты называются 4.01 и XHTML. Теперь уже Internet Explorer занимает свыше 90% рынка. В Internet Explorer тоже есть свои необычные элементы, но он также поддерживает и W3C HTML-стандарты. Так же делают и другие все браузеры, такие как Mozilla, Opera и Netscape.

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

! , - ?Круто Можно я расскажу ещё кому нибудь

При наличии различных разновидностей HTML вы должны сообщать браузеру, на каком "диалекте" HTML говорите вы, в нашем случае - XHTML. Для этого используйте Document Type Definition/определение типа документа. DTD всегда записывается в самом начале документа:

Пример 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head> <title>Title</title> </head>

<body> <p>text text</p> </body>

</html>

Помимо Document Type Definition (первая строка пример), которое сообщает браузеру, что вы пишете на языке XHTML, вы должны вставить также дополнительную информацию в тэг html с помощью атрибутов xmlns и lang.

28

http://www.w3.org/

http://www.w3.org/

xmlns, это сокращение от "XML-Name-Space", всегда должен иметь значение http://www.w3.org/1999/xhtml. Это всё, что нужно знать. Но, если вы интересуетесь сложными вопросами, можете прочесть о namespaces на W3C web-сайте.

В атрибуте lang вы указываете, на каком языке написан документ. Для этого используется стандарт ISO 639, в котором перечислены коды всех языков мира. В предыдущем примере установлен English ("en").

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

DTD также имеет важное значение при проверке ваших страниц.

?Почему нужно делать проверку

Вставьте DTD в ваши страницы - и ваш HTML всегда можно будет проверить на наличие ошибок с помощью бесплатного проверщика W3C's free validator.

Чтобы протестировать эту возможность, создайте страницу и поместите её в Internet. Теперь перейдите на validator.w3.org, введите адрес (URL) вашей страницы и проверьте её. Если ваш HTML корректен, вы получите congratulations message. В ином случае - сообщение об ошибках с точным указанием того, что и где сделано неправильно. Сделайте специально несколько ошибок и посмотрите, что получится.

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

Всегда проверяйте ваши страницы для обеспечения их корректности.

29

http://validator.w3.org/

http://validator.w3.org/

http://www.w3.org/WAI/ER/IG/ert/iso639.htm#2letter

http://www.w3.org/TR/1999/REC-xml-names-19990114/

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

Возможно, вы уже слышали о CSS, но не знаете, что это такое? В этом уроке вы узнаете, что такое CSS и что он может сделать для вас.

CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.

CSS?Что можно делать с помощью

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

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

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

CSS HTML?В чём разница между и

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

Согласен, это звучит как-то заумно. Но, пожалуйста, читайте дальше. Вскоре всё начнёт проясняться.

Давным-давно, когда Мадонна была девой, а парень по имени Tim Berners Lee изобрёл World Wide Web, язык HTML использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.

По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

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

CSS?Какие преимущества даст мне

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:

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

30

CSS?Как работает

Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

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

CSSБазовый синтаксис

Скажем, нам нужен красный цвет фона web-страницы:

В HTML ранее это можно сделать так:

<body bgcolor="#FF0000">

С помощью CSS того же самого результата можно добиться так:

body {background-color: #FF0000;}

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

CSS HTML-Применение к документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

1: /In-line ( style)Метод Инлайн атрибут

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body>

31

</html>

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:

<html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body></html>

3: ( )Метод Внешний ссылка на таблицу стилей

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

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...

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

32

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

Давайте посмотрим, как это сделать.

Попытайтесь сделать это сами

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

default.htm<html>

<head> <title>Мой документ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Моя первая таблица стилей</h1> </body></html>

style.cssbody {

background-color: #FF0000;}

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!

Цвет и фон

В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства:

33

color background-color background-image background-repeat background-attachment background-position background

: 'color'Цвет переднего плана свойство

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.

h1 {color: #ff0000;}

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).

'background-color'Свойство

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.

Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.

body {background-color: #FFCC66;}

h1 {color: #990000;background-color: #FC9804;}

Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.

[background-image]Фоновые изображения

CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение бабочки. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите "сохранить изображение как/save image as"), либо вы можете использовать другое изображение.

34

http://ru.html.net/tutorials/css/lesson3.php#s7







Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.

body {background-color: #FFCC66;background-image: url("butterfly.gif");}


NB: Обратите внимание, что мы специфицируем место, где находится файл как url("butterfly.gif"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url("../images/butterfly.gif"), или даже на файлы в Internet, указывая полный адрес файла : url("http://www.html.net/butterfly.gif").

/ [background-repeat]Повторение мультипликация фонового изображения

Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойствоbackground-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение Описание

Background-repeat: repeat-x Рисунок повторяется по горизонтали

background-repeat: repeat-y Рисунок повторяется по вертикали

background-repeat: repeat Рисунок повторяется по горизонтали и вертикали

background-repeat: no-repeat Рисунок не повторяется35

Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:

body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;}


Блокировка фонового изображения [background-attachment]

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.


Background-attachment: scroll Изображение прокручивается вместе со страницей - разблокировано

Background-attachment: fixed Изображение блокировано

Например, следующий код фиксирует изображение.

body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;}


[background-position]Расположение фонового рисунка

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

36

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:

В таблице дано несколько примеров.


background-position: 2cm 2cm Рисунок расположен на 2 cm слева и на 2 cm сверху

background-position: 50% 25% Рисунок расположен по центру и на четверть экрана сверху

background-position: top right Рисунок расположен в правом верхнем углу страницы

В примере кода фоновое изображение располагается в правом нижнем углу экрана:

body {background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;}

h1 {color: #990000;

37

background-color: #FC9804;}

Сокращённая запись [background]

Свойство background входит в состав всех свойств, перечисленных в этом уроке.

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

Например, посмотрите на эти строки:

background-color: #FFCC66;background-image: url("butterfly.gif");background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;

Используя background, того же результата можно достичь одной строкой кода:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:

background: #FFCC66 url("butterfly.gif") no-repeat;

то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.

38

Шрифты

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

font-family font-style font-variant font-weight font-size font

[font-family]Семейство шрифта

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

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-nameПример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic familyЕго можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

Разницу можно также проиллюстрировать так:

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

39







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

Список шрифтов может выглядеть так:

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif;}

Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

[font-style]Стиль шрифта

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.

h1 {font-family: arial, verdana, sans-serif;}h2 {font-family: "Times New Roman", serif; font-style: italic;}

[font-variant]Вариант шрифта

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h1 {font-variant: small-caps;}h2 {font-variant: normal;}

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

p {font-family: arial, verdana, sans-serif;}td {font-family: arial, verdana, sans-serif; font-weight: bold;}

40

[font-size]Размер шрифта

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

h1 {font-size: 30px;}h2 {font-size: 12pt;}h3 {font-size: 120%;}p {font-size: 1em;}

Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта, а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.

Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами - прекрасное свойство, как вы полагаете?

41

[font]Сокращённая запись

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

Например, вот четыре строки описания свойств шрифта для <p>:

p {font-style: italic;font-weight: bold;font-size: 30px;font-family: arial, sans-serif;}

Используя сокращённую запись, код можно упростить:

p {font: italic bold 30px arial, sans-serif;}

Порядок свойств font таков:

font-style | font-variant | font-weight | font-size | font-family

Текст

Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:

text-indent text-align text-decoration letter-spacing text-transform

[text-indent]Отступы

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:

p {text-indent: 30px;}

[text-align]Выравнивание текста

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.

42






В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:

th {text-align: right;}

td {text-align: center;}

p {text-align: justify;}

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.

h1 {text-decoration: underline;}

h2 {text-decoration: overline;}

h3 {text-decoration: line-through;}

[letter-spacing]Интервал между буквами

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3pxмежду буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:

h1 {letter-spacing: 6px;}

p {letter-spacing: 3px;}

[Трансформация текста text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

43

capitalize

Капитализирует каждое слово. Например: "john doe" станет "John Doe".

uppercase

Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".

lowercase

Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".

none

Трансформации нет - текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.

h1 {text-transform: uppercase;}

li {text-transform: capitalize;}

Ссылки

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

?Что такое псевдокласс

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

Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использовать a в качестве селектора:

a {color: blue;}

Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.

a:link {color: blue;}

44

a:visited {color: red;}

Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.

Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.

: linkПсевдокласс

Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.

В примере кода непосещённые ссылки - синие.

a:link {color: #6699CC;}

Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.

a:visited {color: #660099;}

: activeПсевдокласс

Псевдокласс :active используется для активных ссылок.

В примере активные ссылки имеют жёлтый фон.

a:active {background-color: #FFFF00;}

: hoverПсевдокласс

Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.

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

a:hover {color: orange;font-style: italic;

45

}

1: Пример Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса:hover.

1a: Пример Расстояние между буквами

Расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:

a:hover {letter-spacing: 10px;font-weight:bold;color:red;}

1Пример b: UPPERCASE и lowercase

Мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:

a:hover {text-transform: uppercase;font-weight:bold;color:blue;background-color:yellow;}

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

2: Пример Удаление подчёркивания ссылок

Обычный вопрос - как удалить подчёркивание ссылок?

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

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

a {text-decoration:none;}

46

http://ru.html.net/tutorials/css/lesson5.php

Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.

a:link {color: blue;text-decoration:none;}

a:visited {color: purple;text-decoration:none;}

a:active {background-color: yellow;text-decoration:none;}

a:hover {color:red;text-decoration:none;}

Селекторы тегов

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

Тег { свойство1: значение; свойство2: значение; ... }

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

Пример. Изменение стиля тега абзаца<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Селекторы тегов</title> <style type="text/css"> P { text-align: justify; /* Выравнивание по ширине */ color: green; /* Зеленый цвет текста */ } </style> </head> <body>

<p>Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.</p>

</body>

47

</html>

В данном примере изменяется цвет текста и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера <p>.

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

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

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1> <Тег2> ... </Тег2></Тег1>

Использование контекстных селекторов продемонстрировано в примере 10.1.

Пример. Контекстные селекторы<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Контекстные селекторы</title> <style type="text/css"> P B { font-family: Times, serif; /* Семейство шрифта */ font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */ } </style> </head> <body> <div><b>Жирное начертание текста</b></div> <p><b>Одновременно жирное начертание текста и выделенное цветом</b></p> </body></html>

В данном примере показано обычное применение тега <b> и этого же тега, когда он вложен внутрь абзаца <p>. При этом меняется цвет и шрифт текста, как показано на рис. 10.1.

48

Оформление текста в зависимости от вложенности тегов

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

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

Пример. Использование классов<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Контекстные селекторы</title> <style type="text/css"> A { color: green; /* Зеленый цвет текста для всех ссылок */ } .menu { padding: 7px; /* Поля вокруг текста */ border: 1px solid #333; /* Параметры рамки */ background: #fc0; /* Цвет фона */ } .menu A { color: navy; /* Темно-синий цвет ссылок */ }

</style> </head> <body> <div class="menu"> <a href="http://htmlbook.ru/1.html">Русская кухня</a> | <a href="http://htmlbook.ru/2.html">Украинская кухня</a> | <a href="http://htmlbook.ru/3.html">Кавказская кухня</a> </div> <p><a href="http://htmlbook.ru/text.html">Другие материалы по теме</a></p> </body></html>

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

49

Ссылки разных цветов

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

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

Соседние селекторы

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

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

В этом примере тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Здесь теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

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

В примере показана структура взаимодействия тегов между собой.

Пример. Использование соседних селекторов<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

50

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Соседние селекторы</title> <style type="text/css"> B + I { color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> </body></html>

Результат примера показан на рис.

Выделение текста цветом при помощи соседних селекторов

В данном примере происходит изменение цвета текста для содержимого контейнера <i>, когда он располагается сразу после контейнера <b>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег <i>, но по соседству никакого тега <b> нет, так что стиль к этому контейнеру не применяется.

Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путем и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовем его sic, и станем применять его к тегу <h2>. Первый абзац после такого заголовка выделяется цветом фона и отступом (пример 11.2). Вид остальных абзацев останется неизменным.

Пример. Изменение стиля абзаца<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Изменение стиля абзаца</title> <style type="text/css"> H2.sic { font-size: 140%; /* Размер шрифта */ color: maroon; /* Цвет текста */ font-weight: normal; /* Нормальное начертание текста */ margin-left: 30px; /* Отступ слева */ margin-bottom: 0px; /* Отступ снизу */

51

} H2.sic + P { background: #ddd; /* Цвет фона */ margin-left: 30px; /* Отступ слева */ margin-top: 0.5em; /* Отступ сверху */ padding: 7px; /* Поля вокруг текста */ } </style> </head> <body> <h1>Методы ловли льва в пустыне</h1> <h2>Метод последовательного перебора</h2> <p>Пусть лев имеет габаритные размеры L x W x H, где L - длина льва от кончика носа до кисточки хвоста, W - ширина льва, а H - его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.</p> <h2 class="sic">Важное замечание</h2> <p>Для упрощения расчетов хвост в качестве погрешности измерения можно отбросить и не принимать во внимание.</p> <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.</p> </body></html>


52

Изменение вида абзаца за счет использования соседних селекторов

В данном примере текст отформатирован с применением абзацев (тег <p>), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега <h2>, у которого добавлен класс с именем sic.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <h1> и <h2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов <h2> и <p>, а также в других подобных случаях. В примере таким манером изменяется величина отступов между указанными тегами.

Пример. Отступы между заголовками и текстом<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Соседние селекторы</title> <style type="text/css"> H1 + H2 { margin-top: -10px; /* Смещаем заголовок 2 вверх */ } H2 + P { margin-top: -1em; /* Смещаем первый абзац вверх к заголовку */ } </style> </head> <body> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <p>Абзац!</p> </body></html>

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

Дочерние селекторы

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

Пример. Вложенность элементов в документе<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Lorem ipsum</title> </head> <body> <div class="main"> <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

53

<p><strong><em>Ut wisis enim ad minim veniam</em></strong>, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body></html>

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

Дерево элементов для примера

На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу<div> выступает тег <p>. Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку он расположен в контейнере <p>.

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

Селектор 1 > Селектор 2 { Описание правил стиля }

Стиль применяется к Селектору 2, но только в том случае, если он является дочерним для Селектора 1.

Если снова обратиться к примеру 12.1, то стиль вида P > EM { color: red } будет установлен для первого абзаца документа, поскольку тег <em> находится внутри контейнера <p>, и не даст никакого результата для второго абзаца. А все из-за того, что тег<em> во втором абзаце расположен в контейнере <strong>, поэтому нарушается условие вложенности.

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

Пример. Контекстные и дочерние селекторы<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>

54

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Дочерние селекторы</title> <style type="text/css"> DIV I { /* Контекстный селектор */ color: green; /* Зеленый цвет текста */ } P > I { /* Дочерний селектор */ color: red; /* Красный цвет текста */ } </style> </head> <body> <div> <p><i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet <i>dolore magna</i> aliguam erat volutpat.</p> </div> </body></html>


Цвет текста, заданный с помощью дочернего селектора

На тег <i> в примере действуют одновременно два правила: контекстный селектор (тег <i> расположен внутри <div>) и дочерний селектор (тег <i> является дочерним по отношению к <p>). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.

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

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

55

Список в виде меню

Для размещения текста по горизонтали к селектору LI добавляется стилевое свойство float. Чтобы при этом разделить между собой стиль горизонтального и вертикального списка и применяются дочерние селекторы

Пример. Использование дочерних селекторов<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Дочерние селекторы</title> <style type="text/css"> UL#menu { margin: 0; padding: 0; /* Убираем отступы */ } UL#menu > LI { list-style: none; /* Убираем маркеры списка */ width: 100px; /* Ширина элемента в пикселах */ background: #b3d9d2; /* Цвет фона */ color: #333; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт */ font-size: 90%; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ float: left; /* Располагаем элементы по горизонтали */ } LI > UL { list-style: none; /* Убираем маркеры списка */ margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */ border-bottom: 1px solid #666; /* Граница внизу */ padding-top: 5px; /* Добавляем отступ сверху */ } LI > A { display: block; /* Ссылки отображаются в виде блока */ font-weight: normal; /* Нормальное начертание текста */ font-size: 90%; /* Размер шрифта */ background: #fff; /* Цвет фона */ border: 1px solid #666; /* Параметры рамки */ border-bottom: none; /* Убираем границу снизу */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <ul id="menu"> <li>Правка

56

<ul> <li><a href="#">Отменить</a></li> <li><a href="#">Вырезать</a></li> <li><a href="#">Копировать</a></li> <li><a href="#">Вставить</a></li> </ul> </li> <li>Начертание <ul> <li><a href="#">Жирное</a></li> <li><a href="#">Курсивное</a></li> <li><a href="#">Подчеркнутое</a></li> </ul> </li> <li>Размер <ul> <li><a href="#">Маленький</a></li> <li><a href="#">Нормальный</a></li> <li><a href="#">Средний</a></li> <li><a href="#">Большой</a></li> </ul> </li> </ul> </body></html>

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

Селекторы атрибутов

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input>может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение атрибута type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определенного атрибута тега или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

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

[атрибут] { Описание правил стиля }Селектор[атрибут] { Описание правил стиля }

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

57

В примере показано изменение стиля тега <q>, в том случае, если к нему добавлен атрибут title.

Пример. Вид элемента в зависимости от его атрибута<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Селекторы атрибутов</title> <style type="text/css"> Q { font-style: italic; /* Курсивное начертание */ quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */ } Q[title] { color: maroon; /* Цвет текста */ } </style> </head> <body>

<p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.</p>

</body></html>

Результат примера показан на рис.

Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q.

Атрибут со значением

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

58

[атрибут="значение"] { Описание правил стиля } Селектор[атрибут="значение"] { Описание правил стиля }

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

В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример. Стиль для открытия ссылок в новом окне<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Селекторы атрибутов</title> <style type="text/css"> A[target="_blank"] { background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */ padding-left: 15px; /* Смещаем текст вправо */ } </style> </head> <body> <p><a href="1.html">Обычная ссылка</a> | <a href="link2" target="_blank">Ссылка в новом окне</a></p> </body></html>

Результат примера показан ниже

Изменение стиля элемента в зависимости от значения target

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

Значение атрибута начинается с определенного текста

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

[атрибут^="значение"] { Описание правил стиля } Селектор[атрибут^="значение"] { Описание правил стиля }

59

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

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не добавлять к тегу <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере

Пример. Изменение стиля внешней ссылки<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Селекторы атрибутов</title> <style type="text/css"> A[href^="http://"] { font-weight: bold /* Жирное начертание */ } </style> </head> <body> <p><a href="1.html">Обычная ссылка</a> | <a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p> </body></html>

Результат примера показан ниже

Изменение стиля для внешних ссылок

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

Значение атрибута оканчивается определенным текстом

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

60

[атрибут$="значение"] { Описание правил стиля } Селектор[атрибут$="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определенным селекторам.

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

Пример. Стиль для разных доменов<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Селекторы атрибутов</title> <style type="text/css"> A[href$=".ru"] { /* Если ссылка заканчивается на .ru */ background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ padding-left: 12px; /* Смещаем текст вправо */ } A[href$=".com"] { /* Если ссылка заканчивается на .com */ background: url(images/com.png) no-repeat 0 6px; padding-left: 12px; } </style> </head> <body> <p><a href="http://www.yandex.com">Yandex.Com</a> | <a href="http://www.yandex.ru">Yandex.Ru</a></p> </body></html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибутhref которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Добавление картинки к ссылкам

61

Значение атрибута содержит указанный текст

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

[атрибут*="значение"] { Описание правил стиля } Селектор[атрибут*="значение"] { Описание правил стиля }

В примере показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример Стиль для разных сайтов<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Селекторы атрибутов</title> <style type="text/css"> [href*="htmlbook"] { background: yellow; /* Желтый цвет фона */ } </style> </head> <body> <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | <a href="http://webimg.ru">Графика для Веб</a></p> </body></html>


Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

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

[атрибут~="значение"] { Описание правил стиля } Селектор[атрибут~="значение"] { Описание правил стиля }

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

62

Пример. Стиль в зависимости от имени класса<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Блок</title> <style type="text/css"> [class~="block"] h3 { color: green; } </style> </head> <body> <div class="block tag"> <h3>Заголовок</h3> </div> </body> </html>

В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

[атрибут|="значение"] { Описание правил стиля } Селектор[атрибут|="значение"] { Описание правил стиля }

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

Пример Дефисы в значениях<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Блок</title> <style type="text/css"> DIV[class|="block"] { background: #306589; /* Цвет фона */ color: #acdb4c; /* Цвет текста */ padding: 5px; /* Поля */ } DIV[class|="block"] A { color: #fff; /* Цвет ссылок */ } </style> </head> <body> <div class="block-menu-therm"> <h2>Термины</h2> <div class="content"> <ul class="menu"> <li><a href="t1.html">Буквица</a></li> <li><a href="t2.html">Выворотка</a></li> <li><a href="t3.html">Выключка</a></li>

63

<li><a href="t4.html">Интерлиньяж</a></li> <li><a href="t5.html">Капитель</a></li> <li><a href="t6.html">Начертание</a></li> <li><a href="t7.html">Отбивка</a></li> </ul> </div> </div> </body></html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля } Селектор[атрибут1="значение1"][атрибут2="значение2"] { Описание правил стиля }

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

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

Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

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

Пример. Использование универсального селектора<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Универсальный селектор</title> <style type="text/css"> * { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ font-size: 96%; /* Размер текста */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html>

64

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY

(class id)Идентификация и группирование элементов и

Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов.

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

classГруппирование элементов с помощью

Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:

<p>Виноград для белого вина:</p><ul><li><a href="ri.htm">Рислинг</a></li><li><a href="ch.htm">Шардонэ</a></li><li><a href="pb.htm">Пино Блан</a></li></ul>

<p>Виноград для красного вина:</p><ul><li><a href="cs.htm">Кабернэ Совиньон</a></li><li><a href="me.htm">Мерло</a></li><li><a href="pn.htm">Пино Нуар</a></li></ul>

Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.

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

Попробуем установить классы для предыдущего примера:

<p>Виноград для белого вина:</p><ul><li><a href="ri.htm" class="whitewine">Рислинг</a></li><li><a href="ch.htm" class="whitewine">Шардонэ</a></li><li><a href="pb.htm" class="whitewine">Пино Блан</a></li></ul>

<p>Виноград для красного вина:</p><ul><li><a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li><li><a href="me.htm" class="redwine">Мерло</a></li>

65

<li><a href="pn.htm" class="redwine">Пино Нуар</a></li></ul>

Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.

a {color: blue;}

a.whitewine {color: #FFBB00;}

a.redwine {color: #800000;}

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

idИдентификация элемента с помощью

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

Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:

<h1>Глава 1</h1>...<h2>Глава 1.1</h2>...<h2>Глава 1.2</h2>...<h1>Глава 2</h1>...<h2>Глава 2.1</h2>...<h3>Глава 2.1.2</h3>...

Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:

<h1 id="c1">Глава 1</h1>...<h2 id="c1-1">Глава 1.1</h2>...<h2 id="c1-2">Глава 1.2</h2>...<h1 id="c2">Глава 2</h1>...<h2 id="c2-1">Глава 2.1</h2>...<h3 id="c2-1-2">Глава 2.1.2</h3>

66

...

Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:

#c1-2 {color: red;}

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

Группирование элементов (span div)и

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.

В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

Группирование с помощью <span> Группирование с помощью <div>

<span>Группирование с помощью

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

Пример - цитата из Бенджамина Франклина:

<p>Кто рано ложится и рано встаёт, тот будет здоровым, богатым и умным</p>

Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью <span>. Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:

<p>Кто рано ложится и рано встаёт, тот будет <span class="benefit">здоровым</span>,<span class="benefit">богатым</span>и <span class="benefit">умным</span>.</p>

В CSS:

span.benefit {color:red;}

67

Разумеется, вы можете также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх <span>-элементов, как мы говорили в прошлом уроке.

<div>Группирование с помощью

В то время как <span> используется в элементах уровня блока, как в предыдущем примере, <div> применяется для группирования одного или более блок-элементов.

Кроме этого отличия, группирование с помощью <div> работает более или менее аналогично. Посмотрим на пример - два списка президентов США, сгруппированных по их политической принадлежности:

<div id="democrats"><ul><li>Франклин Д. Рузвелт</li><li>Гарри Трумэн</li><li>Джон Ф. Кеннеди</li><li>Линдон Б. Джонсон</li><li>Джимми Картер</li><li>Билл Клинтон</li></ul></div>

<div id="republicans"><ul><li>Дуайт Д. Эйзенхауэр</li><li>Ричард Никсон</li><li>Джэралд Форд</li><li>Роналд Рейган</li><li>Джордж Буш</li><li>Джордж У. Буш</li></ul></div>

В нашей таблице стилей мы можем использовать такое же группирование, как и раньше:

#democrats {background:blue;}

#republicans {background:red;}

В этих примерах мы использовали <div> и <span> для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.

Боксовая модель

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

68

Боксовая модель в CSS

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

<h1>Article 1:</h1>

<p>All human beings are born freeи equal in dignity и rights.They are endowed with reason и conscienceи should act towards one another in aspirit of brotherhood</p>

Добавив цвет и информацию шрифта этот пример можно представить так:

В этом примере - два элемента : <h1> и <p>. Боксовая модель этих элементов выглядит так:

69

Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом. Боксом, который можно настроить с помощью CSS.

Поля и заполнение

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

Установим поля элемента Установим заполнение элемента

Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа). См. также диаграмму в Уроке 9.

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <body>. На иллюстрации показано, какие поля нам нужны.

70




CSS-код для этого примера выглядит так:

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}

Или вы можете написать более элегантно:

body {margin: 100px 40px 10px 70px;}

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

body {margin: 100px 40px 10px 70px;}

p {margin: 5px 50px 5px 50px;}

Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {background: yellow;}

h2 {background: orange;}

Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

h1 {background: yellow;padding: 20px 20px 20px 80px;}

h2 {background: orange;padding-left:120px;

71

}

Рамки

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

border-width border-color border-style Примеры определения рамок border

[border-width]Толщина рамки

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

[border-color]Цвет рамки

Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .

[border-style]Типы рамок

Существуют различные типы рамок. Ниже показаны восемь типов рамки и их интерпретация в Internet Explorer 5.5. Все примеры показаны цветом "gold" и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.

Значения none или hidden могут использоваться, если вы не хотите отображать рамку.

72






Примеры определения рамок

Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки. Для иллюстрации взглянем на документ, где определены разные рамки для <h1>, <h2>, <ul> и <p>. Результат, может быть, не столь впечатляющ, но он демонстрирует некоторые возможности:

h1 {border-width: thick;border-style: dotted;border-color: gold;}

h2 {border-width: 20px;border-style: outset;border-color: red;}

p {border-width: 1px;border-style: dashed;border-color: blue;}

ul {border-width: thin;border-style: solid;border-color: orange;}

Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:

73

h1 {border-top-width: thick;border-top-style: solid;border-top-color: red;

border-bottom-width: thick;border-bottom-style: solid;border-bottom-color: blue;

border-right-width: thick;border-right-style: solid;border-right-color: green;

border-left-width: thick;border-left-style: solid;border-left-color: orange;}

[border]Сокращённая запись

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

p {border-width: 1px;border-style: solid;border-color: blue;}

можно объединить в:

p {border: 1px solid blue;}

height/ width/высота и ширина

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

width height

[width]Установка ширины

Свойством width вы можете определять ширину элемента.

В примере показан бокс для ввода текста:

div.box {

74



width: 200px;border: 1px solid black;background: orange;}

Установка высоты [height]

Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса. Высоту элемента можно определить свойством height. В качестве примера попытаемся создать бокс высотой 500px:

div.box {height: 500px;width: 200px;border: 1px solid black;background: orange;}

( )Всплывающие элементы поплавки

Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса) (см. в Уроке 9 описание боксовой модели). Принципы показаны на рисунке:

Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:

75


?Как это сделать

HTML-код для этого примера:

<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div>

<p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

Чтобы рисунок всплывал влево, а текст окружал его, вы должны определить ширину бокса, окружающего рисунок, и установить в свойстве float значение left:

#picture {float:left;width: 100px;}

: Ещё пример колонки

Поплавки/Floats можно использовать для вывода колонок в документе. Для этого вы должны просто определить необходимые колонки в HTML-коде тэгами <div> таким образом:

<div id="column1"><p>Haec disserens qua de re agaturet in quo causa consistat non videt...</p></div>

<div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p></div>

<div id="column3"><p>nam nihil esset in nostra potestate si res ita se haberet...</p></div>

76

Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве float:

#column1 {float:left;width: 33%;}



float может иметь значения left, right или none.

clearСвойство

Свойство clear управляет поведением последовательностью всплывающих элементов документа.

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

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

<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div>

<h1>Bill Gates</h1>

<p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>

Чтобы не дать тексту всплывать вверх перед рисунком, мы можем добавить такой код CSS:

#picture {float:left;width: 100px;}

.floatstop {clear:both;}

77

Подробно о свойстве float перевод взят с habrahabr

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

float?Что такое

Некоторые элементы в CSS являются блочными и поэтому начинаются с новой строки. Например, если расположить два абзаца с тегами P, то они будут находиться друг под другом. Другие же элементы являются «строчными», т.е. отображаются на странице в одну строку.Один из способов переназначить элементам тип обтекания — это использование свойства float. Классический пример — использование float для выравнивания картинки по левому или правому краю. Вот простой HTML-код картинки и абзаца:

<img src="http://lorempixum.com/200/200/" /><p> Lorem ipsum... </p>

Они отображаются с новой строки:

78

Добавляем немного CSS картинке:

img {

float: right;

margin: 20px;

}

Получается выравнивание по правому краю:

Если текста больше, то абзац будет обтекать картинку:

79

Допустим, нам нужно сделать отступ в 20 пикселей между картинкой и текстом. Вот такая конструкция работать не будет:

p {margin: 20px;}

Правильно вот так:

img {margin: 20px;}

Почему же не работает отступ для абзаца? Чтобы разобраться, добавим рамку:

p {

border: solid 1px black;

}

Результат может вас удивить:

80

Оказывается, картинка находится внутри абзаца! Поэтому и не работает свойство margin в первом случае. Чтобы исправить это, можно применить float:left к абзацу и указываем абсолютную ширину:

img {

float: right;

margin: 20px;

}

p {

float: left;

width: 220px;

margin: 20px;

}

floatСтранные правила

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

<ul>

81

<li><img src="http://placehold.it/100x100&text=1"/></li>







</ul>

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

li {

float: left;

margin: 4px;

}

Но что, если изображения разной высоты?

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

li {

display: inline;

}

82

А теперь выравниваем по вертикали:

img {

vertical-align: top;

}

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

83

Пример изменения очередности элементов — например, у нас есть список элементов по порядку:

<ul>







</ul>

Если мы хотим расположить их в обратном порядке, просто применяем float:right вместо float:left, и не придется менять порядок в HTML:

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

84

Текст под ним начинает обтекать весь блок:

Чтобы избежать этого, необходимо использовать свойство clear. Если применим его ко второму изображению:

ul li:nth-child(2) {

clear: left;

}

Получим вот, что:

В этом случае остальные изображения продолжают наследовать float:left. Соответсвенно текст будет отображаться коряво:

85

Нужно применить clear:both к абзацу:

p {

clear: both;

}

Наша проблема решена:

Теперь предположим, что нам необходимо установить фон для галереи из предыдущих примеров. Если бы элементы были не плавающими, то получилось бы вот, что:

ul {

background: gray;

}

86

Но если элементам списка применить float:left, фон совсем пропадает:

Если мы сначала устанавливаем высоту для UL:

ul {

height: 300px;

}

Это тоже не решает проблему, т.к. размеры фона заданы абсолютно. Нам поможет класс clearfix, который будет применен к div на том же уровне, что и элементы UL.

.clearfix {

clear: both;

}

87

Существует еще одно решение, с использованием overflow:

ul {

overflow: auto;

}

float- :Девять правил элементов1. Плавающие элементы не могут выходить за край своего контейнера-родителя.2. Каждый плавающий элемент будет отображаться справа или ниже от предыдущего при

float:left, либо слева и ниже, при float:right.3. Блок с float:left не может быть правее, чем блок с float:right.4. Плавающий элемент не может выходить за пределы верхней границы своего контейнера.5. Плавающий элемент не может располагаться выше, чем родительский блок или предыдущий

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

контейнера — происходит перенос на следующую строку.9. Блок с float:left должен быть расположен как можно левее, а с float:right — как можно правее.

88

Позиционирование элементов

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. Урок 13) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

Принципы CSS-позиционирования Абсолютное позиционирование Относительное позиционирование

CSS-Принципы позиционирования

Представим окно браузера как систему координат:

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

Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. Урок 9) заголовок выглядит так:

Если мы хотим расположить его на 100px от верхней границы документа и на 200px слева, мы должны ввести следующий код CSS:

h1 {position:absolute;top: 100px;left: 200px;}

Вот результат:89






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

Абсолютное позиционирование

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

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Вы можете использовать значения left, right, top иbottom для размещения бокса.

В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах документа:

#box1 {position:absolute;top: 50px;left: 50px;}

#box2 {position:absolute;top: 50px;right: 50px;}

#box3 {position:absolute;bottom: 50px;right: 50px;}

#box4 {position:absolute;bottom: 50px;left: 50px;}

90

Относительное позиционирование

Чтобы позиционировать элемент относительно, установите в свойстве position значение relative. Разница между относительным абсолютным позиционированием состоит в том, как обсчитывается позиционирование.

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

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

#dog1 {position:relative;left: 350px;bottom: 150px;}#dog2 {position:relative;left: 150px;bottom: 500px;}

#dog3 {position:relative;left: 50px;bottom: 700px;}

Резюме

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

z-index ( )Наслоение с помощью Слои

CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.

Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:

91

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

Вот код примера с картами:

#ten_of_diamonds {position: absolute;left: 100px;top: 100px;z-index: 1;}

#jack_of_diamonds {position: absolute;left: 115px;top: 115px;z-index: 2;}

#queen_of_diamonds {position: absolute;left: 130px;top: 130px;z-index: 3;}

#king_of_diamonds {position: absolute;left: 145px;top: 145px;z-index: 4;}

#ace_of_diamonds {position: absolute;left: 160px;top: 160px;z-index: 5;}

Это относительно простой метод, но в нём заложены большие возможности. Вы можете размещать текст над изображением, изображение над текстом и т. д.

Резюме

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

92

Псевдоклассы

Псевдокласс :invalidПрименяется к полям формы, содержимое которых не соответствует указанному типу.Псевдокласс :read-onlyПрименяется к полям формы, у которых задан атрибут readonly.Псевдокласс ::-moz-placeholderПсевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Firefox.Псевдокласс ::-webkit-input-placeholderПсевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Chrome.Псевдокласс :activeОпределяет стиль активной ссылки.Псевдокласс :checkedПрименяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено»Псевдокласс :defaultПрименяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.Псевдокласс :disabledПрименяет стиль к заблокированным элементам форм.Псевдокласс :emptyПредставляет пустые элементы, т.е. те, которые не содержат дочерних элементов, текста или пробелов.Псевдокласс :enabledИспользуется для применения стиля к доступным (не заблокированным) элементам форм.Псевдокласс :first-childПрименяет стилевое оформление к первому дочернему элементу своего родителя.Псевдокласс :first-of-typeЗадает правила стилей для первого элемента в списке дочерних элементов своего родителя.Псевдокласс :focusОпределяет стиль для элемента получающего фокус.Псевдокласс :hoverОпределяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован.Псевдокласс :indeterminateЗадает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии.Псевдокласс :langОпределяет язык, который используется в документе или его фрагменте.Псевдокласс :last-childЗадает стилевое оформление последнего элемента своего родителя.Псевдокласс :last-of-typeЗадает правила стилей для последнего элемента в списке дочерних элементов своего родителя.Псевдокласс :linkПрименяется к ссылкам, которые еще не посещались пользователем.Псевдокласс :notЗадает правила стилей для элементов, которые не содержат указанный селектор.Псевдокласс :nth-childИспользуется для добавления стиля к элементам на основе нумерации в дереве элементов.Псевдокласс :nth-last-childИспользуется для добавления стиля к элементам на основе нумерации в дереве элементов.Псевдокласс :nth-last-of-typeИспользуется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.Псевдокласс :nth-of-typeИспользуется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.Псевдокласс :only-childПрименяется к дочерним элементам, только если он единственный у родителя.Псевдокласс :only-of-typeПрименяется к дочерним элементам указанного типа, только если он единственный у родителя.Псевдокласс :optionalПрименяет стилевые правила к полю формы, у которого не задан атрибут required.Псевдокласс :read-writeПрименяется к полям формы, доступных для изменения.Псевдокласс :requiredПрименяет стилевые правила к тегу <input>, у которого установлен атрибут required.

93

http://htmlbook.ru/css/required

http://htmlbook.ru/css/read-write

http://htmlbook.ru/css/optional

http://htmlbook.ru/css/only-of-type

http://htmlbook.ru/css/only-child

http://htmlbook.ru/css/nth-of-type

http://htmlbook.ru/css/nth-last-of-type

http://htmlbook.ru/css/nth-last-child

http://htmlbook.ru/css/nth-child

http://htmlbook.ru/css/not

http://htmlbook.ru/css/link

http://htmlbook.ru/css/last-of-type

http://htmlbook.ru/css/last-child

http://htmlbook.ru/css/lang

http://htmlbook.ru/css/indeterminate

http://htmlbook.ru/css/hover

http://htmlbook.ru/css/focus

http://htmlbook.ru/css/first-of-type

http://htmlbook.ru/css/first-child

http://htmlbook.ru/css/enabled

http://htmlbook.ru/css/empty

http://htmlbook.ru/css/disabled

http://htmlbook.ru/css/default

http://htmlbook.ru/css/checked

http://htmlbook.ru/css/active

http://htmlbook.ru/css/-webkit-input-placeholder

http://htmlbook.ru/css/-moz-placeholder

http://htmlbook.ru/css/read-only

http://htmlbook.ru/css/invalid

Псевдокласс :rootОпределяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу <html>.Псевдокласс :targetПрименяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.Псевдокласс :validПрименяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу.Псевдокласс :visitedПрименяется к ссылкам, уже посещённым пользователем, и задает для них стилевое оформление.

ПсевдоэлементыПсевдоэлемент ::-moz-selectionПрименяется к выделенному пользователем фрагменту документа. Поддерживается только браузером Firefox.Псевдоэлемент ::-ms-browseПозволяет задать стиль кнопки «Обзор» при загрузке файлов через <input type="file"> в Internet Explorer.Псевдоэлемент ::-ms-checkЗадаёт стиль переключателей (input type="radio") и флажков (input type="checkbox").Псевдоэлемент ::-ms-clearЗадаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.Псевдоэлемент ::-ms-expandЗадаёт стиль кнопки раскрытия списка, созданного с помощью тега <select> в браузере Internet Explorer.Псевдоэлемент ::-ms-fillЗадаёт стиль индикатора элемента <progress> в браузере Internet Explorer. Само значение индикатора и его положение меняется динамически посредством скриптов.Псевдоэлемент ::-ms-revealЗадаёт стиль кнопки для просмотра пароля в поле input type="password". Кнопка исходно не видна и появляется при вводе пароля в правой части поля.Псевдоэлемент ::-ms-valueПозволяет изменять стиль элементов формы, сделанных с помощью тега <input> или <select>, в браузере Internet Explorer.Псевдоэлемент ::afterПсевдоэлемент CSS3, который используется для вывода желаемого контента после элемента, к которому он добавляется.Псевдоэлемент ::beforeПсевдоэлемент CSS3, применяется для отображения желаемого контента до элемента, к которому он добавляется.Псевдоэлемент ::first-letterПсевдоэлемент CSS3, определяет стиль первого символа в тексте элемента, к которому добавляется.Псевдоэлемент ::first-lineПсевдоэлемент CSS3, задает стиль первой строки форматированного текста.Псевдоэлемент ::selectionПрименяет стиль к выделенному пользователем фрагменту текста.Псевдоэлемент :afterИспользуется для вывода желаемого контента после элемента, к которому он добавляется.Псевдоэлемент :beforeПрименяется для отображения желаемого контента до элемента, к которому он добавляется.Псевдоэлемент :first-letterОпределяет стиль первого символа в тексте элемента, к которому добавляется.Псевдоэлемент :first-lineЗадает стиль первой строки форматированного текста.

94

http://htmlbook.ru/css/first-line

http://htmlbook.ru/css/first-letter

http://htmlbook.ru/css/before

http://htmlbook.ru/css/after

http://htmlbook.ru/css/selection

http://htmlbook.ru/css3/first-line

http://htmlbook.ru/css3/first-letter

http://htmlbook.ru/css3/before

http://htmlbook.ru/css3/after

http://htmlbook.ru/css/-ms-value

http://htmlbook.ru/css/-ms-reveal

http://htmlbook.ru/css/-ms-fill

http://htmlbook.ru/css/-ms-expand

http://htmlbook.ru/css/-ms-clear

http://htmlbook.ru/css/ms-check

http://htmlbook.ru/css/-ms-browse

http://htmlbook.ru/css/-moz-selection

http://htmlbook.ru/css/visited

http://htmlbook.ru/css/valid

http://htmlbook.ru/css/target

http://htmlbook.ru/css/root

CSSНаследование и каскадирование в

CSS: , каскад специфика и наследование

?Что такое каскадКаскад — это механизм, определяющий какие стили должны быть применены к данному элементу, основываясь на правилах, полученных из различных источников.Каскад учитывает такие правила как: значимость, происхождение, специфичность и очередность источников устанавливающих стиль. Данный механизм присваивает приоритет каждому правилу. Когда несколько правил применяются к данному элементу, то правило с наибольшей значимостью станет приоритетным. Результатом является четкое определение роли данного элемента или сочетания элементов.Браузеры применяют следующую логику при сортировке:Найти все декларации, применяющиеся к данному элементу или группе элементов, и относящиеся к определенному типу.Сортировать декларации в соответствии с их приоритетом (обычный или важный) и происхождением (автор, пользователь или пользовательский агент). По нисходящей приоритетности:пользовательская декларации типа !importantавторские декларация типа !importantобычные авторские декларацииобычные пользовательские декларациидекларации пользовательского агентаЕсли декларации обладают одинаковым приоритетом и источником, то следует сортировать их по специфичности селектора.Наконец, если декларации обладают одинаковым приоритетом, источником и специфичностью, то сортировать их следует по порядку положения в таблице стилей – последний элемент в списке имеет самый высокий приоритет.

?Что такое специфичностьСпецифичность — это метод разрешения конфликтов в пределах каскада.Специфичность рассчитывается своим собственным способом, базируясь на значимости 4 различных категорий. Например, в CCS2 для представления этих категорий использовались буквы a, b, c, и d, где каждая по умолчанию имела значимость равную 0.a равняется 1, если декларация указана в атрибуте стиля HTML ("инлайн-стили"), а не в селекторе, при помощи CSS-правила.b равен количеству атрибутов ID в селектореc равен количеству других атрибутов и псевдо-классов в селектореd равен количеству элементов и псевдо-элементов в селектореСпецифичность высчитывается путем сложения результатов всех 4 данных. Селекторы с более высоким показателем имеют приоритет.Например, селектор #id .class[href] element:hover содержит:1 ID (b равен 1)1 класс, 1 селектор атрибута, и 1 псевдо-класс (c равен 3)1 элемент (d равен 1)Таким образом, элемент имеет специфичность равную 0,1,3,1. Следует отметить, что селектор, содержащий один лишь ID (0,1,0,0) будет иметь больший приоритет, чем любой другой, пусть даже последний имеет большее количество других атрибутов или элементов (например: 0,0,10,20). Это одна из причин, почему многие современные архитектурные шаблоны CSS не используют ID для стилизации.

?Что такое наследованиеНаследование отличается от каскада и включает в себя дерево DOM.Наследование — это процесс, при котором элементы наследуют значения свойств от своих предков в дереве DOM. Некоторые свойства, например, color, автоматически наследуется дочерним элементом. Каждое свойство определяет, будет ли оно автоматически унаследовано.Значение inherit может быть задано для любого элемента, что заставит последний наследовать значение свойства родительского элемента, даже если свойство обычно не наследуется.О значении !important

95

http://www.w3.org/TR/CSS2/cascade.html#specificity

http://www.w3.org/TR/CSS2/cascade.html#cascade

http://css-live.ru/articles/css-kaskad-specifika-i-nasledovanie.html

Написанное выше должно сделать очевидным тот факт, что «!important» отдельное понятие применительно к специфичности, которое никак не влияет на специфичность селектора правила.Декларация !important имеет больший приоритет, чем обычные декларации (см. ранее описанную логику сортировки каскада), даже чем декларации, содержащиеся в атрибуте style.

-Адаптивный Веб дизайн

Википедия подсказывает, что Адаптивный (отзывчивый) веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых кинтернету. Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.

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

Основные принципы в отзывчивом дизайне

применение гибкого макета на основе сетки (англ. flexible, grid-based layout);использование гибких изображений (англ. flexible images);работа с медиазапросами (англ. media queries);в дополнение к этому в адаптивном дизайнеприменение постепенного улучшения;проектирование для мобильных устройств с самых ранних этапов [

Как сделать один сайт для всех устройств

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

Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):

96

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

http://yiibu.com/

http://ru.wikipedia.org/wiki/%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD#cite_note-10

http://ru.wikipedia.org/wiki/%D0%90%D0%BD%D0%B3%D0%BB%D0%B8%D0%B9%D1%81%D0%BA%D0%B8%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA



http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)

http://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D0%B5_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)

http://ru.wikipedia.org/wiki/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82

http://ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0

http://ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0


Все это называется «Responsive Web Design»

Responsive состоит из следующих техник:

(fluid grid)Резиновый макет на основе пропорций

Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:

.leftcolumn {width: 27%; /* 270px / 1000px = 0,27 */float: left;}

97

.rightcolumn {width: 73%; /* 730px / 1000px = 0,73 */float: right;}

Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:

.leftcolumn .some-div {width: 62,962963%; /* 170px / 270px = 0.62962963 */float: left;}

На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».

(fluid images)Резиновые изображения

Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.

Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.

Подробная оригинальная статья «Fluid Images».

Media queries

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

Например, так:

/* начало css */ Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :). @media only screen and (min-width: 480px) { Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее. } @media only screen and (min-width: 768px) {

98

http://www.alistapart.com/articles/fluid-images/

http://habrahabr.ru/blogs/webdev/58254/

Планшеты в режиме portrait. } @media only screen and (min-width: 992px) { Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп. } @media only screen and (min-width: 1382px) { Десктоп с большими разрешениями, телевизоры. } /* конец css */

media queries понимают все разумные браузеры. Для ie же есть Respond.js

Полезные ссылкиИсточник: habrahabr.ruПримеры адаптивного веб-дизайна: http://habrahabr.ru/post/140880/Инструменты для адаптивного веб-дизайна: http://habrahabr.ru/post/142120/

Типы носителей

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

Типы носителей и их описание

Тип Описание

all Все типы. Это значение используется по умолчанию.

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

brailleУстройства, основанные на системе Брайля, которые предназначены для слепых людей.

handheld Наладонные компьютеры и аналогичные им аппараты.

print Печатающие устройства вроде принтера.

99

http://habrahabr.ru/post/142120/

http://habrahabr.ru/post/140880/

https://github.com/scottjehl/Respond

http://caniuse.com/#search=media%20queries

projection Проектор.

screen Экран монитора.

tv Телевизор.

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

Ключевые слова @media и @import относятся к эт-правилам. Такое название произошло от наименования символа @ — «эт», с которого и начинаются эти ключевые слова. В рунете для обозначения символа @ применяется устоявшийся термин «собака». Только вот использовать выражение «собачье правило» язык не поворачивается.

При импортировании стиля через команду @import тип носителя указывается после адреса файла. При этом допускается задавать сразу несколько типов, упоминая их через запятую, как показано в примере 4.1.

Пример. Импорт стилевого файла<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Импорт стиля</title> <style type="text/css"> @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */ @import "/style/smart.css" print, handheld; /* Стиль для печати и смартфона */ </style> </head> <body> <p>...</p> </body></html>

В данном примере импортируется два файла — main.css предназначен для изменения вида документа при его просмотре на экране монитора, и smart.css — при печати страницы и отображении на смартфоне.

Браузер Internet Explorer до седьмой версии включительно не поддерживает типы носителей при импорте стилевого файла.

Команда @media позволяет указать тип носителя для глобальных или связанных стилей и в общем случае имеет следующий синтаксис.

@media тип носителя 1 { Описание стиля для типа носителя 1}@media тип носителя 2 { Описание стиля для типа носителя 2}

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

Пример. Стили для разных типов носителей100

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Типы носителей</title> <style type="text/css"> @media screen { /* Стиль для отображения в браузере */ BODY { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */ font-size: 90%; /* Размер шрифта */ color: #000080; /* Цвет текста */ } H1 { background: #faf0e6; /* Цвет фона */ border: 2px dashed maroon; /* Рамка вокруг заголовка */ color: #a0522d; /* Цвет текста */ padding: 7px; /* Поля вокруг текста */ } H2 { color: #556b2f; /* Цвет текста */ margin: 0; /* Убираем отступы */ } P { margin-top: 0.5em; /* Отступ сверху */ } } @media print { /* Стиль для печати */ BODY { font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */ } H1, H2, P { color: black; /* Черный цвет текста */ } } </style> </head> <body> <h1>Как поймать льва в пустыне</h1> <h2>Метод случайных чисел</h2> <p>Разделим пустыню на ряд элементарных прямоугольников, размер которых совпадает с размером клетки для льва. После чего перебираем полученные прямоугольники, каждый раз выбирая заданную область случайным образом. Если в данной области окажется лев, то мы поймаем его, накрыв клеткой.</p> </body></html>

В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 4.1 и рис. 4.2.

101

Страница для отображения в окне браузера

Страница, предназначенная для печати

Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу или воспользовавшись предварительным просмотром в браузере (Файл > Предварительный просмотр). Или пойти на хитрость и временно заменить print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 4.2.

Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере

102

необходимости. В подобном случае следует воспользоваться тегом <link> с параметром media, значением которого выступают все те же типы, перечисленные в табл. 4.1.

В примере 4.3 показано, как создавать ссылки на CSS-файлы, которые предназначены для разных типов носителей.

Пример. Подключение стилей для разных носителей<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Разные носители</title> <link media="print, handheld" rel="stylesheet" href="print.css" type="text/css"> <link media="screen" rel="stylesheet" href="main.css" type="text/css"> </head> <body> <p>...</p> </body></html>

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

Аналогично можно использовать и глобальные стили, добавляя параметр media к тегу <style> (пример 4.4).

Пример . Стиль для смартфона<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Разные носители</title> <style type="text/css" media="handheld"> BODY { width: 320px; /* Ширина страницы */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </body></html>

В данном примере ширина для устройств типа handheld ограничена размером 320 пикселов.

103

LESS

LESS — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширениемСSS.[1]

LESS — это продукт с открытым исходным кодом. Его первая версия была написана на Ruby, однако в последующих версиях было решено отказаться от использования этого языка программирования в пользу JavaScript. Less это вложенный метаязык: валидный CSS будет валидной less-программой с аналогичной семантикой.

LESS обеспечивает следующие расширения CSS: переменные, вложенные блоки, миксины, операторы и функции.[2]

LESS может работать на стороне клиента (Internet Explorer 6+, WebKit, Firefox) или на стороне сервера под управлением Node.jsили Rhino.[2]

ПеременныеLess позволяет использовать переменные. Имя переменной предваряется символом @. В качестве знака присваивания используется двоеточие (:).

При трансляции значение переменной подставляется в результирующий CSS документ.[2]

@color: #4D926F; #header { color: @color;}h2 { color: @color;}

Данный LESS-код будет скомпилирован в следующий CSS-файл:

#header { color: #4D926F;}h2 { color: #4D926F;}

ПримесиПримеси позволяют включать целый набор свойств из одного набора правил в другой путём включения имени класса в качестве одного из свойств другого класса. Такое поведение можно рассматривать как разновидность констант или переменных. Они также могут вести себя подобно функциям, принимая аргументы. В чистом CSS повторяющийся код должен быть повторён в нескольких местах — примеси делают код чище, понятней и упрощают его изменение. [2]

.rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;} #header { .rounded-corners;}

104

http://ru.wikipedia.org/wiki/LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)#cite_note-main-2

http://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D0%B0%D0%BD%D1%82%D0%B0_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)

http://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%81%D1%8C_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)


http://ru.wikipedia.org/wiki/%D0%94%D0%B2%D0%BE%D0%B5%D1%82%D0%BE%D1%87%D0%B8%D0%B5

http://ru.wikipedia.org/wiki/@


http://ru.wikipedia.org/wiki/Rhino

http://ru.wikipedia.org/wiki/Node.js

http://ru.wikipedia.org/wiki/Firefox

http://ru.wikipedia.org/wiki/WebKit

http://ru.wikipedia.org/wiki/Internet_Explorer_6


http://ru.wikipedia.org/wiki/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)

http://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)

http://ru.wikipedia.org/wiki/%D0%9C%D0%B8%D0%BA%D1%81%D0%B8%D0%BD

http://ru.wikipedia.org/wiki/%D0%9F%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)

http://ru.wikipedia.org/wiki/%D0%A1%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D0%BA%D0%B0_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)

http://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D1%82%D0%B0%D1%8F%D0%B7%D1%8B%D0%BA

http://ru.wikipedia.org/wiki/JavaScript

http://ru.wikipedia.org/wiki/Ruby

http://ru.wikipedia.org/wiki/%D0%9E%D1%82%D0%BA%D1%80%D1%8B%D1%82%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5

http://ru.wikipedia.org/wiki/LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)#cite_note-compare-1

http://ru.wikipedia.org/wiki/Cascading_Style_Sheets

http://ru.wikipedia.org/wiki/Sass

#footer { .rounded-corners(10px);}


#header { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}#footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

Вложенные правилаLESS дает возможность вкладывать определения, вместо либо вместе с каскадированием. Пусть, например, у нас есть такой CSS: CSS поддерживает логическое каскадирование, но один блок кода в другой вложен быть не может. Less позволяет вложить один селектор в другой. Это делает наследование более ясным и укорачивает таблицы стилей. [2]

#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}


#header h1 { font-size: 26px; font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;}

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

@the-border: 1px;@base-color: #111;

105


@red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2;}#footer { color: @base-color + #003300; border-color: desaturate(@red, 10%);}


#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}

CSSСравнение с другими препроцессорамиИ Sass, и LESS — это препроцессоры CSS, позволяющие писать ясный CSS с использованием программных конструкций вместо статических правил.[3]

LESS вдохновлен Sass.[4] Sass был спроектирован с целью как упростить, так и расширить CSS, в первых версиях фигурные скобки были исключены из синтаксиса (этот синтаксис называется sass). LESS разработан с целью быть как можно ближе к CSS, поэтому у них идентичный синтаксис. В результате существующие CSS можно использовать в качестве LESS кода. Новые версии Sass также включают CSS-подобный синтаксис, который называется SCSS (Sassy CSS).[1]

Подробное сравнение синтаксиса см. «Sass/Less Comparison»[5]

ZUSS (ZK User-interface Style Sheet)[6] это язык стилей, основаный на идеях LESS. Он имеет аналогичный синтаксис, за исключением того, что предназначен для использования на стороне сервера вместе с языком программирования Java. Он не использует интерпретатор JavaScript (Rhino), но позволяет напрямую вызывать Java методы.

ИспользованиеLESS можно использовать на сайте различными способами. Один из вариантов — подключение к веб-странице JavaScript-файла less.js для преобразования кода в CSS «на лету», средствами браузера.

Это делается, например, с помощью следующего html-кода:

<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

Если вы используете серверный JavaScript: Rhino или node.js, вы можете преобразовывать .less файлы в .css на стороне сервера.

Наконец существуют сторонние реализации языка: к примеру SimpLESS open source компилятор для Windows, Linux и Mac OS X [7] , .less{} — реализация для .NET framework [8] или lessphp[9], позволяющий компилировать less-стили на стороне сервера для PHP-сайтов.

106

http://ru.wikipedia.org/wiki/PHP

http://ru.wikipedia.org/wiki/LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)#cite_note-9


http://ru.wikipedia.org/wiki/.NET_framework


http://ru.wikipedia.org/wiki/Mac_OS_X

http://ru.wikipedia.org/wiki/Mac_OS_X

http://ru.wikipedia.org/wiki/Linux

http://ru.wikipedia.org/wiki/Windows

http://ru.wikipedia.org/wiki/%D0%9E%D1%82%D0%BA%D1%80%D1%8B%D1%82%D0%BE%D0%B5_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5

http://ru.wikipedia.org/wiki/Node.js


http://ru.wikipedia.org/wiki/JavaScript


http://ru.wikipedia.org/wiki/Java



http://ru.wikipedia.org/wiki/LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)#cite_note-compare-1

http://ru.wikipedia.org/wiki/LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)#cite_note-about-4

http://ru.wikipedia.org/wiki/LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)#cite_note-whats-wrong-with-css-3

http://ru.wikipedia.org/wiki/Sass

Web- стандарты и проверка кода

W3C это World Wide Web Consortium, независимая организация по разработке стандартов кодов Internet (например, HTML, CSS, XML и др.). Microsoft, The Mozilla Foundation и многие другие являются членами W3C и работают по соглашению о перспективах развития этих стандартов.

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

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

CSS validator/проверщик

Для облегчения проверки на соответствие CSS-стандарту, W3C создал так называемый validator, который читает ваши таблицы стилей/stylesheet и возвращает список предупреждений о нарушениях и ошибок, если ваш CSS их содержит.

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

Если validator не найдёт ошибок; будет показано изображение, которое вы можете разместить на вашем сайте для иллюстрации того, что вы проверяете код:

Этот validator можно также найти о этой ссылке: http://jigsaw.w3.org/css-validator/

107

http://w w w .html.net/s

Click to check stylesheet

http://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/

http://www.w3.org/TR/REC-CSS2/

http://www.w3.org/

, Полезные ресурсы обязательные для рассмотрения

. О кроссбраузерности Тестирование вебсайта в разных браузерахhttp://goldbusinessnet.com/optimizatsiya-i-raskrutka-saita/krossbrauzernost-prosmotr-sajta-v-raznyx-brauzerax/http://habrahabr.ru/post/111748/http://topobzor.com/13-servisov-dlya-testirovaniya-sajta-v-raznyx-brauzerax/.html

CSS Frameworkshttp://topcoat.io/http://www.yaml.de/http://twittstrap.com/twittstrap/http://imperavi.com/kube/http://purecss.io/http://habrahabr.ru/post/156747/

HTML5 Base Templatehttp://html5boilerplate.com/http://www.initializr.com/

Responsive Web CSS Toolhttp://www.responsivewebcss.com/

Validatorhttp://validator.w3.org/

108

it.onat.edu.uait.onat.edu.ua/docs/html_css_rus.docx · web viewНапример, если вы...

Documents