Введение
Каскадные таблицы стилей/Cascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших сайтов.
Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне сайтов. CSS совершенно
необходим каждому, работающему с web-дизайном.
Этот учебник поможет вам начать работать с CSS всего через несколько часов. Он разъясняет всё очень доходчиво и научит
вас сложной этой технологии.
Изучение CSS увлекает. Читая этот учебник, выделяйте достаточное количество времени для экспериментов с изученным в
каждом уроке материалом.
Использование CSS требует знания основ HTML или xHTML.
Если вы не знаете HTML, то советуем разобраться хотябы с базовыми понятиями, прежде чем перейти к CSS.
Урок 1: Что такое CSS?
Возможно, вы уже слышали о CSS, но не знаете, что это такое? В этом уроке вы узнаете, что такое CSS и что он может
сделать для вас.
CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.
Что можно делать с помощью CSS?
CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями,
строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Потерпите,
и увидите!
HTML может (неправильно) использоваться для оформления сайтов. Но CSS предоставляет большие возможности и более
точен и проработан. CSS, на сегодняшний день, уже поддерживается многими браузерами мобильных телефонов и Opera Mini.
Прочитав лишь несколько уроков этого учебника, вы сможете создавать собственные таблицы стилей и использовать CSS для
придания вашему сайту великолепного вида.
В чём разница между CSS и HTML?
HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого
структурированного содержимого.
Согласен, это звучит как-то заумно. Но, пожалуйста, читайте дальше. Вскоре всё начнёт проясняться.
Давным-давно, когда Мадонна была девой, а парень по имени Tim Berners Lee изобрёл World Wide Web, язык HTML
использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок"
или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.
По мере развития дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить
возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги,
такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид,
а не структуру.
Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше
применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>,
поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал
частым явлением на сайтах.
CSS был создан для исправления этой ситуации путём предоставления дизайнерам возможностей точного дизайна,
поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что
значительно упростило работу.
Какие преимущества даст мне CSS?
Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:
управление отображением множества документов с помощью одной таблицы стилей;
более точный контроль над внешним видом страниц;
различные представления для разных носителей информации (экран, печать, и т. д.);
сложная и проработанная техника дизайна.
В следующем уроке мы поближе познакомимся с тем, как реально работает CSS и как вам начать работу.
Урок 2: Как работает CSS?
В этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том,
какие коды необходимо использовать для CSS в HTML-документе.
Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы
используете HTML для дизайна страниц, вы, наверняка узнаете многие коды. Посмотрим на конкретном примере.
Базовый синтаксис CSS
Скажем, нам нужен красный цвет фона страницы:
В HTML это можно сделать так:
<body bgcolor="#FF0000">
С помощью CSS того же самого результата можно добиться так:
body {background-color: #FF0000;}
Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную
модель CSS:
selector {propery: value;}
selector(селектор) - к какому HTML-тегу(тегам) применяется свойство (например body)
property(свойство) - свойство, которое, к примеру может быть цветом фона (background-color)
value(значение) - значением свойства background-color может быть, например red (#FF0000)
Но где размещать 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>
</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. Вы можете создать таблицу стилей прямо на
вашем сайте.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style.
Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (index.html) на таблицу стилей (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-документов. То есть изменения в одном файле
внешней таблицы стилей влияют на все HTML-документы, на которыех она подключена.
Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона сайта из 100 страниц,
таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения
можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать. Попытайтесь сделать это сами.
Cоздайте файл style.css и при помощи построчного редактора впишите в него следующее:
body {
background-color: #FF0000;
}
Откройте блочный редактор, выбрав "Редактировать" в wExplorer на файле index.html (если таковой не существует его
необходимо создать). Затем выберите редактирование заголовка и в поле "URL файла с CSS-стилями" впишите "style.css";
В редакторе по строкам файл index.html будет иметь примерно следующий вид:
<html>
<head>
<title>index.html</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<b>Моя первая таблица стилей</b>
</body>
</html>
Оба файла (index.html и style.css) в нашем случае должны находиться в одной папке.
Выберите "Просмотр" в редакторе или наберите полный адрес вашей страницы с именем сайта в вашем браузере и вы увидите,
что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!
Переходите в следующий урок, где мы рассмотрим некоторые из свойств CSS.
Урок 3: Цвет и фон
В этом уроке вы научитесь, как использовать цвета и фон на ваших сайтах. Мы рассмотрим также продвинутые методы
позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства:
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 используется для вставки фонового изображения.
Вы можете использовать в качестве фонового изображения любую картинку уже находящуюся на вашем сайте или же прямо с
другого сайта, для этого нужно будет указывать к ней полный путь с http:// вначале.
Для вставки рисунка в качестве фонового изображения страницы просто примените свойство background-image в тэге
<body> и укажите местоположение рисунка.
body {
background-color: #FFCC66;
background-image: url("image.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Обратите внимание, что мы специфицируем место, где находится файл как url("image.gif"). Это означает, что он находится
в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках,
используя, например, url("/images/image.gif"), или даже на файлы в Internet, указывая полный адрес файла:
url("http://wen.ru/i/logo.gif").
Повторение/мультипликация фонового изображения [background-repeat]
Вы заметили в предыдущем примере, что изображение повторяется по умолчанию по горизонтали и вертикали,
заполняя весь экран. Свойство background-repeat управляет этим.
Ниже указаны четыре значения background-repeat.
Background-repeat: repeat-x (Рисунок повторяется по горизонтали)
background-repeat: repeat-y (Рисунок повторяется по вертикали)
background-repeat: repeat (Рисунок повторяется по горизонтали и вертикали)
background-repeat: no-repeat (Рисунок не повторяется)
Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:
body {
background-color: #FFCC66;
background-image: url("image.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Блокировка фонового изображения [background-attachment]
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе
с содержимым страницы.
Ниже указаны два значения background-attachment.
Background-attachment: scroll (Изображение прокручивается вместе со страницей - разблокировано)
Background-attachment: fixed (Изображение блокировано)
Например, следующий код фиксирует изображение.
body {
background-color: #FFCC66;
background-image: url("image.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Расположение фонового рисунка [background-position]
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет
изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение 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("image.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Сокращённая запись [background]
Свойство background входит в состав всех свойств, перечисленных в этом уроке.
С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает
чтение таблиц.
Например, посмотрите на эти строки:
background-color: #FFCC66;
background-image: url("image.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Используя background, того же результата можно достичь одной строкой кода:
background: #FFCC66 url("image.gif") no-repeat fixed right bottom;
Порядок свойств этого элемента таков:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment
и background-position нет в данном примере:
background: #FFCC66 url("image.gif") no-repeat;
то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.
Урок 4: Шрифты
В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт,
выбранный для сайта, может отображаться только в том случае, если этот шрифт имеется в браузере/системе, с которого
выполняется доступ к этому сайту. Дано описание следующих CSS-свойств:
font-family
font-style
font-variant
font-weight
font-size
font
Семейство шрифта [font-family]
Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или
страницы. Если первый шрифт списка не найден в браузер/системе, то ищется следующий шрифт списка, пока не будет найден
подходящий.
Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое
семейство/generic family. Эти два термина объясняются далее.
Family-name
Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman"
или "Tahoma".
Generic family
Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif,
набор шрифтов без "засечек/feet".
При указании шрифтов для вашего сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете
альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена
шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.
Список шрифтов может выглядеть так:
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) вместо букв нижнего регистра.
Непонятно? Смотрите пример:
ABCABC
Если 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;}
Размер шрифта [font-size]
Размер шрифта устанавливается свойством font-size.
Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике
мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Есть одно отличие в указанных единицах измерения: 'px' и 'pt' дают абсолютное значение размера шрифта,
а '%' и 'em' - относительные. Многие пользователи не могут читать мелкий текст, по разным причинам.
Чтобы сделать ваш сайт доступным для всех, вы должны использовать относительные значения, такие как '%' или 'em'.
Тогда во многих браузерах пользователь сможет сам настроить размер шрифта, который будет ему удобен для чтения.
Сокращённая запись [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
Урок 5: Текст
Форматирование и установка стиля текста - ключевая проблема для любого дизайнера. В этом уроке вы увидите впечатляющие
возможности 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.
В примере текст заголовочных ячеек таблицы <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:
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;
}
Урок 6: Ссылки
Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание
и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже
ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить на интересные эффекты на
ваш сайт. Для этого используются так называемые псевдоклассы.
Что такое псевдокласс?
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использовать
a в качестве селектора:
a {
color: blue;
}
Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать
псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.
a:link {
color: blue;
}
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;
}
Пример 1: Эффект при нахождении указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных
примеров для псевдокласса :hover.
Пример 1a: Расстояние между буквами
Как вы помните из Урока 5, расстояние между символами можно установить свойством letter-spacing. Это можно
применить для ссылки:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Пример 1b: UPPERCASE и lowercase
В Уроке 5 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр.
Это также можно использовать для создания эффектов на ссылке:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои
собственные эффекты - попробуйте!
Пример 2: Удаление подчёркивания ссылок
Обычный вопрос - как удалить подчёркивание ссылок?
Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование
вашего сайта. Люди привыкли видеть на страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя
мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и
они не получат доступа ко всему содержимому вашего сайта.
Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство
text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто
установите в text-decoration значение none.
a {
text-decoration:none;
}
Альтернативно можно также установить 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;
}
Урок 7: Идентификация и группирование элементов (class и id)
Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов.
В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств
выбранных элементов.
Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем сайте? Как группировать ссылки по
категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.
Группирование элементов с помощью 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>
<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>
...
Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:
#c1-2 {
color: red;
}
Как показано в предыдущем примере, вы можете определять свойства конкретного элемента с помощью #id в таблице
стилей документа.
Урок 8: Группирование элементов (span и div)
Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.
В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют
важнейшее значение в CSS.
Группирование с помощью <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;
}
Разумеется, вы можете также использовать 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> для определения очень простых вещей - цвета текста и фона.
Но оба элемента несут в себе потенциал для намного более сложных операций.
Урок 9: Боксовая модель
Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции
для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена
боксовая модель:
Боксовая модель в 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 a
spirit of brotherhood</p>
Добавив цвет и информацию шрифта этот пример можно представить так:
В этом примере - два элемента : <h1> и <p>. Боксовая модель этих элементов выглядит так:
Хотя это может показаться немного сложным, тем не менее, видно, что каждый HTML-элемент окружён боксом.
Боксом, который можно настроить с помощью CSS.
Урок 10: Поля и заполнение
В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов
свойствами margin и padding.
Установим поля элемента
У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой
стороны с до соседних элементов (или краёв документа). См. также диаграмму в Уроке 9.
В качестве первого примера мы разберёмся, как определить поля самого документа, т. е. элемента <body>.
На иллюстрации показано, какие поля нам нужны.
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;
}
Урок 11: Рамки
Рамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов.
CSS предоставляет бесчисленное множество вариантов использования рамок.
Толщина рамки [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 могут использоваться, если вы не хотите отображать рамку.
Примеры определения рамок
Три рассмотренных выше свойства можно объединить в каждом элементе и, соответственно, устанавливать разные рамки.
Для иллюстрации взглянем на документ, где определены разные рамки для <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;
}
Можно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. Вот как это делается:
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;
}
Урок 12: height/высота и width/ширина
До сих пор мы особо не заботились о размерах элементов, с которыми работали.
В этом уроке мы посмотрим, как легко можно определять высоту и ширину элемента.
Установка ширины [width]
Свойством width вы можете определять ширину элемента.
В примере показан бокс для ввода текста:
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Установка высоты [height]
Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса.
Высоту элемента можно определить свойством height. В качестве примера попытаемся создать бокс высотой 500px:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Резюме
Уроки 9, 10, 11 и 12 дали введение в боксовую модель CSS. Как вы, вероятно, заметили, боксовая модель предоставляет
много новых возможностей. Ранее вы уже могли использовать таблицы в HTML для дизайна страниц, но с помощью CSS и
боксовой модели вы сможете создавать элегантный дизайн более точно и в соответствии с рекомендациями W3C.
Урок 13: Всплывающие элементы (поплавки)
Элемент может "всплывать" вправо или влево с помощью свойства float.
То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса)
(см. в Уроке 9 описание боксовой модели). Принципы показаны на рисунке:
Если мы, например, хотим, чтобы текст окружал рисунок, то результат должен быть таким:
Как это сделать?
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 agatur
et 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>
Теперь необходимую ширину колонок установим, например, 33%, а затем установим всплывание каждой влево в свойстве float:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
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;
}
Урок 14: Позиционирование элементов
При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы.
Вместе с поплавками (см. Урок 13) позиционирование даёт вам большие возможности для создания точного
и навороченного дизайна.
Представим окно браузера как систему координат:
Принципы CSS-позиционирования - в том, что вы можете расположить бокс в системе координат где угодно.
Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см. Урок 9) заголовок выглядит так:
Если мы хотим расположить его на 100px от верхней границы документа и на 50px слева, мы должны ввести следующий код CSS:
h1 {
position:absolute;
top: 100px;
left: 50px;
}
Вот результат:
Как видите, Позици
http://top.test1.ru