ЛЕКЦИЯ
Тема: «Понятие о CSS»
План лекции
3.
Применение
CSS к HTML-документу
9.
Родительские,
дочерние и контекстные селекторы
10. Свойства списков
11. Изменение внешнего вида первой буквы
CSS - это акроним для Cascading Style Sheets/Каскадных
таблиц стилей.
CSS это язык стилей, определяющий отображение
HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками,
высотой, шириной, фоновыми изображениями, позиционированием элементов и многими
другими вещами.
HTML может (неправильно) использоваться для оформления
web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и
проработан. CSS, на сегодняшний день, поддерживается всеми браузерами.
В чём
разница между CSS и HTML?
HTML используется для структурирования содержимого
страницы. CSS используется для форматирования этого структурированного
содержимого.
Вначале своего существования язык HTML использовался
только для вывода структурированного текста. Автор мог только размечать текст:
"это - заголовок" или "это - параграф", используя HTML-тэги,
такие как <h1> и <p>.
По мере развития Web дизайнеры начали искать
возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим
требованиям потребителей, производители браузеров (тогда - Netscape и
Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые
отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не
структуру.
Это также привело к тому, что оригинальные тэги
структурирования, такие как <table>, стали всё больше применяться для
дизайна страниц вместо структурирования текста. Многие новые тэги дизайна,
поддерживались только одним браузером.
CSS был создан для исправления этой ситуации путём
предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых
всеми браузерами. Одновременно произошло разделение представления и содержимого
документа, что значительно упростило работу.
Какие
преимущества дает CSS?
Появление CSS стало революцией в мире web-дизайна.
Конкретные преимущества CSS:
· управление отображением множества документов с помощью
одной таблицы стилей;
· более точный контроль над внешним видом страниц;
· различные представления для разных носителей
информации (экран, печать, и т. д.);
· сложная и проработанная техника дизайна.
Например,
нам нужен красный цвет фона web-страницы:
В HTML это можно сделать так:
С помощью CSS того же самого результата можно добиться так:
Эти
коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует
фундаментальную модель CSS:
3. Применение CSS к HTML-документу
Есть три способа применить правила CSS к
HTML-документу.
Метод 1:
Инлайн/In-line (атрибут style)
Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет
фона можно установить так:
Метод 2:
Внутренний (тэг style)
Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:
Метод 3:
Внешний (ссылка на таблицу стилей)
Рекомендуемый метод - создание ссылки на так
называемую внешнюю таблицу стилей. Далее будем использовать именно этот метод во
всех примерах.
Внешняя таблица стилей это просто текстовый файл с
расширением .css. Вы можете
поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие
файлы.
Например, ваша таблица стилей называется style.css и находится
в папке style.
Для создания ссылки из HTML-документа (index.htm) на таблицу
стилей (style.css) используют одну
строчку HTML-кода:
Обратите внимание, путь к вашей таблице стилей указан
атрибутом href.
Эту строку кода нужно вставлять между тэгами <head> и </head>.
Например, так:
Эта ссылка указывает браузеру, что он должен использовать
правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов
могут ссылаться на одну таблицу стилей. Один CSS-файл можно использовать для
управления отображением множества HTML-документов.
Это поможет вам сэкономить время и силы. Если вы,
например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей
избавит вас от необходимости вручную изменять все сто HTML-документов.
Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив
один код в центральной таблице стилей.
Пример.
Откройте Notepad (или другой текстовый редактор) и
создайте два файла - HTML-файл и CSS-файл - такого содержания:
index.htm
style.css
Разместите эти файлы в одной папке. Не забудьте
сохранить файлы с правильными расширениями (".css" и ".htm")
Откройте index.htm в вашем браузере и вы увидите, что
страница имеет красный фон.
Рассмотрим следующие CSS-свойства:
Цвет текста: свойство color
Свойство color описывает цвет переднего плана элемента (текста).
Например, если хотим сделать все заголовки документа
тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В
нижеприведённом коде цвет элемента <h1> устанавливается красным.
Цвета можно указывать как шестнадцатеричные значения,
как в примере (#ff0000), либо можете использовать названия цветов ("red") или
rgb-значения (rgb(255,0,0)).
Свойство background-color
Свойство background-color описывает цвет фона элемента.
В элементе <body> размещается всё содержимое HTML-документа. Таким
образом, для изменения цвета фона всей страницы свойство background-color нужно
применить к элементу <body>.
Вы можете также применять это свойство к другим
элементам, в том числе - к заголовкам и тексту. В следующем примере различные
цвета фона применяются к элементам <body> и <h1>.
Фоновые изображения background-image
CSS-свойство background-image используется для вставки фонового изображения. Далее
используем в качестве фонового изображение бабочки.
Для вставки рисунка бабочки в качестве фонового
изображения web-страницы просто примените свойство background-image в тэге <body> и укажите
местоположение рисунка.
Замечание: специфицируем место, где находится файл как url("butterfly.gif"). Это означает, что он находится в той же папке, что и
таблица стилей. Разумеется, можете ссылаться и на файлы изображений в других
папках, используя, например, url("../images/butterfly.gif"), или даже на файлы в Internet, указывая полный адрес
файла: url("http://www.html.net/butterfly.gif").
Повторение/мультипликация фонового
изображения background-repeat
В предыдущем примере изображение бабочки повторяется
по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat
управляет этим.
В таблице указаны четыре значения background-repeat.
Например, для отмены повторения/мультипликации
фонового рисунка мы должны записать такой код:
Блокировка фонового изображения background-attachment
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или
прокручивается вместе с содержимым страницы.
В таблице указаны два значения background-attachment.
Например, следующий код фиксирует изображение.
Расположение фонового рисунка background-position
По умолчанию фоновый рисунок позиционируется в левом
верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и
фоновый рисунок может располагаться в любом месте экрана.
Есть много способов установить значение background-position.
Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает
фоновый рисунок на 100px слева и на 200px сверху в окне браузера.
Координаты можно указывать в процентах ширины экрана,
в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете
использовать слова top, bottom, center, left и right.
|
полное значение |
сокращенное
значение |
расположение
первого экземпляра |
|
left top |
в левом верхнем углу |
|
|
left center |
left |
с левой стороны по центру |
|
left bottom |
в левом нижнем углу |
|
|
center top |
top |
по центру сверху |
|
center center |
center |
по центру |
|
center bottom |
bottom |
по центру снизу |
|
right top |
в правом верхнем углу |
|
|
right center |
right |
справа по центру |
|
right bottom |
в правом нижнем углу |
Одно значение - это горизонтальные координаты (ось
"x"), второе - координаты по вертикали (ось "y").
В случае указания одного значения, предполагается, что
второе ключевое слово center.
Процентные
значения:
Процентные значения высчитываются
особым образом: относительно соответствующей точки области элемента и
точки исходного изображения.
Первое относится к горизонтальной оси, а второе к
вертикальной (ось-x, ось-y).
Например:
·
background-position:0% 0%;
·
Точка на области элемента 0% от левого края, 0% от
верхнего края. Совпадает с точкой 0% от левого края и 0% от верхнего края
самого изображения. То есть верхний левый угол области элемента совпадает с
верхним левым углом изображения.
·
·
background-position:50% 50%;
·
50% от левого края и 50% от верхнего края области
элемента (центр). Совпадает с точкой, расположенной 50% от левого края и 50% от
верхнего края изображения, то есть центра изображения.
·
background-position:100% 100%;
·
100% 100% соответствуют правой нижней точке области
элемента и правой нижней точке изображения.
background-position:20% 60%;
·
Одна из точек, расположенная на изображении (20% от левого края и
60% от верхнего), совпадает с точкой на области элемента (20% от левого края и 60% от верхнего).
Браузер высчитывает две точки – одну на области
элемента, вторую на области самого изображения. И смещает изображение до
полного совпадения этих точек.
Как и с ключевыми словами можно указывать
только одно значение, второе же присваивается автоматически – center, то
есть 50%.
Единственное различие. Браузер не может угадать, какое
направление вы определили – горизонтальную ось или вертикальную. И
автоматически подставляет отсутствующие значение 50% относительно вертикальной оси.
|
0% 0% |
left top |
в левом верхнем углу |
||
|
0% 50% |
0% |
left center |
left |
с левой стороны по центру |
|
0% 100% |
left bottom |
в левом нижнем углу |
||
|
50% 0% |
center top |
top |
по центру сверху |
|
|
50% 50% |
50% |
center center |
center |
по центру |
|
50% 100% |
center bottom |
bottom |
по центру снизу |
|
|
100% 0% |
right top |
в правом верхнем углу |
||
|
100% 50% |
100% |
right center |
right |
справа по центру |
|
100% 100% |
right bottom |
в правом нижнем углу |
Единицы
длины:
Измерение значений в единицах длины гораздо
проще всех остальных. Определяются они относительно верхнего левого угла изображения и
верхнего левого угла области элемента.
1-е в списке значение определяет отступ от левого
края, 2-е - от верхней границы.
Т.е. объявление типа 2em 30px будет означать, что левый верхний угол изображения
будет расположен на расстоянии 2em от левого края и 30px от верхнего
края.
* Возможно комбинирование значений – ключевого
слова, процентных значений, значений длины.
* Ко всему прочему, процентные значения и
значения длины могут быть отрицательными. Благодаря чему мы можем поместить
исходное изображение вне
области элемента.
Масштабирование фона background-SIZE
За управление размером фоновой картинки отвечает
свойство background-size, в качестве значения можно указывать ключевое слово cover, тогда размер
изображения будет такой, чтобы его ширина и высота поместились в заданную
область (например, окно веб-страницы); ключевое слово contain масштабирует
картинку так, чтобы хотя бы одна сторона картинки целиком поместилась в
заданную область. Кроме того, допустимо указывать явные размеры по горизонтали
или вертикали в процентах или других единицах CSS.
Если указано два значения размера через пробел, то
первое значение определяет ширину по горизонтали, а второе по вертикали. При
этом пропорции игнорируются. Вместо одного из размеров допустимо использовать
ключевое слово auto, тогда браузер вычисляет его автоматически исходя из
пропорций картинки.
Сокращённая запись background
Свойство background входит в состав всех свойств, перечисленных в этом
уроке.
С помощью background вы можете сжимать несколько свойств и записывать ваши
стили в сокращённом виде, что облегчает чтение таблиц.
Например, посмотрите на эти строки:
Используя background, того же результата можно достичь одной строкой кода:
Порядок свойств этого элемента таков:
[background-color] | [background-image] |
[background-repeat] | [background-attachment] | [background-position]
Если свойство отсутствует, оно автоматически получает
значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:
то этим двум свойствам будут присвоены значения по
умолчанию - scroll и top left.
Конкретный шрифт, выбранный для web-сайта, может
отображаться только в том случае, если этот шрифт установлен на PC, с которого
выполняется доступ к этому web-сайту.
Семейство
шрифта 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".
Разницу можно также проиллюстрировать так:
При указании шрифтов вы начинаете с предпочтительного
шрифта, а затем перечисляете альтернативные. Рекомендуется в конце списка указывать
родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же
семейства, если отсутствуют все специфицированные конкретные шрифты.
Список шрифтов может выглядеть так:
Заголовки <h1> будут отображаться шрифтом "Arial". Если он
не установлен на пользовательской машине, будет использоваться
"Verdana". Если недоступны оба шрифта, для показа заголовков будет
использован шрифт семейства sans-serif.
Обратите внимание, что имя шрифта "Times New
Roman" содержит пробелы, поэтому указано в двойных кавычках.
Стиль шрифта font-style
Свойство font-style определяет normal (обычный) или italic (курсив). В примере все заголовки <h2> будут
показаны курсивом italic.
Вариант шрифта font-variant
Свойство font-variant используется для выбора между вариантами normal (обычный) и small-caps (нижний регистр). Шрифт small-caps использует малые заглавные буквы (upper case) вместо
букв нижнего регистра. Примеры:
Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст
буквами верхнего регистра.
Вес шрифта font-weight
Свойство font-weight описывает, насколько толстым, или
"тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold (жирный). Некоторые
браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания
веса шрифта.
Размер шрифта font-size
Размер шрифта устанавливается свойством font-size.
Используются различные единицы измерения (например,
пикселы и проценты) для описания размера шрифта. Рассмотрим самые
распространённые и удобные единицы измерения. Примеры:
Сокращённая запись font
Используя сокращенную запись font, можно указывать
все свойства шрифта в одном стилевом правиле.
Например, вот четыре строки описания свойств шрифта
для <p>:
Используя сокращённую запись, код можно упростить:
Порядок свойств font таков:
font-style | font-variant | font-weight |
font-size | font-family
6. Свойства текста
Отступы text-indent
Свойство text-indent позволяет выделить абзац с помощью установки отступа
для его первой строки. В примере 30px применяется ко всем абзацам <p>:
Выравнивание текста text-align
Текст может быть выровнен left, right, center или justify.
В примере текст заголовочных ячеек таблицы <th>
выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, абзацы – justify (по ширине):
Декоративный вариант text-decoration
Свойство text-decoration позволяет добавлять различные "декоративные
эффекты". Например, можно подчеркнуть текст, провести линию по или над
текстом и т. д. В примере <h1> подчёркнуты,
<h2>
- имеют черту над текстом, а <h3> - перечёркнуты.
Интервал между буквами letter-spacing
Интервал между буквами текста можно специфицировать
свойством letter-spacing. Значение - нужная величина. Например, если вам
необходимо 3px между буквами в
параграфах <p> и 6px - в заголовках <h1>, то используется такой код:
Трансформация текста 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-коде.
Пример:
Всё изложенное на страницах выше можно применять и для
ссылок/links
(например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в
зависимости от того, посетили уже ссылку, активна ли она, находится ли
указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.
Что такое
псевдокласс?
Псевдокласс позволяет
учитывать различные условия или события при определении свойств HTML-тэга.
Рассмотрим пример. Знаем, что ссылки специфицируются в
HTML тэгом <a>. В CSS мы также можем использовать a в качестве селектора:
Ссылка может иметь разные состояния. Например, её уже
посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных
стилей посещённых и непосещённых ссылок.
Используйте a:link и a:visited для непосещённых и посещённых ссылок, соответственно.
Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Рассмотрим каждый иp этих четырёх псевдоклассов на примерах.
Псевдокласс:
link используется
для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые
ссылки - синие.
Псевдокласс:
visited используется
для ссылок на страницы, которые пользователь посетил. В примере кода посещённые
ссылки - фиолетовые.
Псевдокласс:
active используется
для активных ссылок.
В примере активные ссылки имеют жёлтый фон
Псевдокласс:
hover используется
для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных
эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и
курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
Примеры эффектов при нахождении
указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали
уже общим местом. Мы рассмотрим несколько дополнительных примеров для
псевдокласса :hover.
Пример 1:
Расстояние между буквами
Расстояние между символами можно установить свойством letter-spacing. Это можно
применить для ссылки:
Пример 2:
UPPERCASE и lowercase
Ранее было рассмотрено свойство text-transform, которое
может переключать символы с верхнего на нижний регистр. Это также можно
использовать для создания эффектов на ссылке:
Пример 3:
Удаление подчёркивания ссылок
Свойство text-decoration можно использовать для определения подчёркивания
текста. Для удаления подчёркивания просто установите в text-decoration значение
none.
Альтернативно можно также установить text-decoration, наряду с
другими свойствами, для всех четырёх псевдоклассов.
Создавая стили в CSS, часто встречается ситуация,
когда необходимо определить для нескольких различных элементов одинаковые
стили. Например, если хотим, чтобы заголовок второго и третьего уровней,
ненумерованный список и параграфы отображались одним цветом.
Можно воспользоваться записью в файле описания стилей
CSS следующего формата:
P {color: # FF3399;}
H1 {color: # FF3399;}
H2 {color: # FF3399;}
UL {color: # FF3399;}
Однако, это не совсем удобно, да и со временем код
этого файла становится громоздким и плохо читаемым.
Поэтому, чтобы применить одинаковые атрибуты к разным
тегам, в CSS можно использовать так называемые групповые селекторы. Их
необходимо перечислять через запятую:
P, H1, H2, UL {color: # FF3399;}
9. Родительские, дочерние и
контекстные селекторы
До этого пункта лекции рассматривали, как
устанавливать стили для элементов HTML независимо от того, где именно в
документе они расположены. Мы можем «прицеливаться» точнее и определять стили
для элементов в зависимости от контекста (англ. Contextual Selectors).
Например:
/*
все ссылки, находящиеся внутри списков, станут красными: */
li a {color: red;}
/*
все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */
table p a {color: green;}
Это самый распространённый метод создания
контекстуальных селекторов, который называется «селектором потомков».
Селекторы
потомков
«Потомками» элемента HTML называются любые вложенные в него элементы:
это его «дети» (то есть непосредственно вложенные), дети его детей, и так
далее, вглубь иерархии тегов.
Правильно используя селекторы, мы можем прицельно
применить CSS стили к нужным элементам, сославшись на их родительский элемент.
Для этого перед селектором искомого элемента надо вставить селекторы его
«предков», разделив их пробелом.
В приведённом примере мы вроде бы создали список
селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он
указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь
находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на
bold
(полужирный шрифт).
Здесь мы рассмотрели контекстный селектор CSS.
Для контекстного селектора может быть применен любой
уровень вложенности, все равно свойства элемента будут переданы от родителя.
При этом синтаксис такой:
Как видим, контекстный селектор состоит из простых
селекторов, разделенных пробелом. Для контекстных селекторов допускается
применять два и более вложенных друг в друга тега.
Селекторы
детей
«Детьми» или
«дочерними элементами» элемента HTML
называются непосредственно вложенные в него элементы, он для них является
«родительским» элементом. Элементы, находящиеся на 2-м и более глубоких уровнях
вложенности, «детьми» не являются – это дети детей, то есть «потомки».
Пример:
Рассмотрим дерево элементов, так называется структура
отношений тегов документа между собой.
На рисунке в удобном виде представлена вложенность
элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <div> выступает
тег <p>.
Вместе с тем тег <strong> не является дочерним для тега <div>, поскольку
он расположен в контейнере <p>.
CSS позволяет нам создать селектор для выбора дочерних
элементов любого элемента и изменить их свойства, применив CSS стили. Для этого
перед селектором искомого элемента надо вставить селекторы его «предков»,
разделив их знаком >.
Пример.
В приведённом примере мы находим все элементы B,
вложенные непосредственно в элементы I, и выключаем для них обычный шрифт. Все
остальные элементы B в документе останутся без изменений.
Вывод: Для того, чтобы CSS правило было бы применено,
дочерний селектор должен обязательно находиться непосредственно внутри
родительского элемента (первый уровень вложенности).
Селекторы смежных элементов
Иногда
нам надо выбрать элемент, расположенный в HTML-документе непосредственно за
другим элементом. Так, например, чтобы выбрать все заголовки H1, следующие за
параграфами P, и изменить их верхний отступ, мы напишем следующее правило CSS:
Важно: будет выбран только первый (!) заголовок H1, расположенный
непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один – то селектор не
сработает и правило не применится.
Важно: селекторы смежных элементов появились в CSS v2 и
поддерживаются не во всех браузерах. В Internet Explorer они появились только с
7-й версии, в Opera – с 5-й версии.
Свойства
списков описывают базовое визуальное форматирование списков.
Они позволяют таблицам стилей определять тип маркера (графический объект, глиф
или число) и позицию маркера относительно главного блока (за его пределами или
внутри него перед содержимым). Их использование уже не позволяет авторам
осуществлять более тонкую настройку стиля (цвета, шрифтов, выравнивания и т.д.)
маркеров списка или более точное местоположения маркера относительно главного
блока; они могут быть получены от основного блока.
Свойства списков:
list-style-type,
list-style-image,
list-style-position и list-style
list-style-type
Это свойство задает вид маркера элемента списка, если
для свойства 'list-style-image' устанавливается значение 'none' или изображение, на которое указывает URI,
недоступно. Значение 'none' говорит о том, что маркер не используется. В противном
случае можно использовать три типа маркеров: глифы, нумерованные и алфавитные.
Глифы определяются с помощью значений disk, circle
и square. Конкретное их представление зависит от пользователя.
Системы нумерации определяются с помощью:
decimal
Десятичные числа, начиная с 1.
decimal-leading-zero
Десятичные числа, дополненные начальными нулями (e.g.,
01, 02, 03, ..., 98, 99).
lower-roman
Римские числа строчными буквами (i, ii, iii, iv, v, и
т.д.).
upper-roman
Римские числа заглавными буквами (I, II, III, IV, V, и
т.д.).
georgian
Традиционная грузинская нумерация (an, ban, gan, ..., he, tan, in,
in-an, ...).
armenian
Традиционная армянская нумерация.
Алфавитные системы задаются с помощью:
lower-latin или lower-alpha
Строчные ascii-буквы (a, b, c, ... z).
upper-latin или upper-alpha
Заглавные ascii-буквы (A, B, C, ... Z).
lower-greek
Классические греческие строчные буквы альфа, бета,
гамма, ... (α, β, γ, ...)
В этой спецификации не определено поведение алфавитных
систем, когда в процессе нумерации исчерпываются все символы алфавита.
Например, после 26 элементов списков представление 'lower-latin' не определено.
Поэтому для больших списков рекомендуется использовать числа.
Например, в результате выполнения следующего кода HTML
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Нумерация с использованием латинских строчных
букв</TITLE>
<STYLE type="text/css">
ol { list-style-type: lower-roman
}
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> это первый элемент.
<LI> это второй элемент.
<LI> это третий элемент.
</OL>
</BODY>
</HTML>
будет представлен следующий список:
i это первый элемент. ii это второй элемент.iii это третий элемент.
list-style-image
Это свойство определяет графический объект,
используемый в качестве маркера элемента списка. Если графический объект
доступен, то он заменяет маркер, устанавливаемый свойством 'list-style-type'.
Пример.
В примере перед каждым элементом списка в качестве
маркера используется графический объект "ellipse.png".
ul { list-style-image: url("http://png.com/ellipse.png") }
list-style-position
Это свойство определяет положение блока маркера в
главном структурном блоке. Значения имеют следующий смысл:
outside
Блок маркера находится вне главного структурного
блока.
inside
Блок маркера находится в первом строковом блоке
главного структурного блока, следом за которым выводится содержимое элемента.
Например:
<HTML>
<HEAD>
<TITLE>Сравнение внутренней/внешней позиции</TITLE>
<STYLE
type="text/css">
ul
{ list-style: outside }
ul.compact { list-style: inside }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>первый элемент списка следует первым
<LI>второй элемент списка следует вторым
</UL>
<UL class="compact">
<LI>первый элемент списка следует первым
<LI>второй элемент списка следует вторым
</UL>
</BODY>
</HTML>
Вышеприведенный пример может быть отформатирован
следующим образом:
В тексте, вывод которого осуществляется справа налево,
маркеры располагались бы с правой стороны блока.
'list-style'
Свойство 'list-style' является
сокращенной формой задания трех свойств 'list-style-type', 'list-style-image' и 'list-style-position' в одном месте таблицы стилей.
Пример:
ul { list-style: upper-roman
inside } /* любой элемент "ul" */
ul > li > ul {
list-style: circle outside } /* любой дочерний элемент "ul" дочернего элемента "li" элемента "ul" */
Хотя авторы и могут задать информацию 'list-style' о
стиле списка непосредственно в элементах списка (например, в элементе "li" в HTML), тем не менее, следует пользоваться
таким способом с определенной осторожностью. Следующие два правила выглядят
похожими, хотя первое определяет селектор потомков, а второе (более
специфичное) - селектор дочерних элементов.
ol.alpha li { list-style: lower-alpha } /* любой потомок
"li" элемента "ol" */
ol.alpha > li { list-style: lower-alpha } /* любой дочерний
элемент "li" элемента "ol" */
Авторы, использующие только селекторы потомков, могут не достичь
ожидаемых результатов. Рассмотрим следующие правила:
<HTML>
<HEAD>
<TITLE>ПРЕДУПРЕЖДЕНИЕ: Непредвиденные результаты, полученные
вследствие применения каскада</TITLE>
<STYLE
type="text/css">
ol.alpha li { list-style: lower-alpha }
ul li { list-style: disc }
</STYLE>
</HEAD>
<BODY>
<OL class="alpha">
<LI>Уровень 1
<UL>
<LI>Уровень 2
</UL>
</OL>
</BODY>
</HTML>
Желаемым представлением было бы если элементы списка
уровня 1 были с маркерами 'lower-alpha', а уровня 2 – с маркерами 'disc'. Однако порядок каскадирования приведет к тому, что
первое правило стиля (включающее специфичную информацию о классе) будет
перекрывать второе. Следующие правила позволят решить эту проблему, применяя
вместо этого селектор дочерних элементов:
ol.alpha > li { list-style: lower-alpha }
ul li { list-style: disc }
Другим способом решения может стать задание информации
'list-style' о
стиле списка только в элементах типа списка:
ol.alpha { list-style: lower-alpha }
ul { list-style: disc }
Наследование передает значения свойства 'list-style'
элементов OL и UL свойствам элементов LI. Именно этот способ рекомендуется использовать для
определения информации о стиле списка.
Значение URI может комбинироваться с любым другим
значением, как это сделано в следующем примере:
ul { list-style:
url("http://png.com/ellipse.png") disc }
Если не удается получить доступ к графическому
объекту, то вместо него здесь будет использоваться маркер 'disc'.
Если для свойства 'list-style'
устанавливается значение 'none', то свойствам 'list-style-type' и 'list-style-image' также
присваивается значение 'none':
ul { list-style: none }
В результате маркер элемента списка не отображается.
11. Изменение
внешнего вида первой буквы
word-spacing:7px
– создает дополнительное расстояние между словами в пикселях
line-height: 21px или line-height:200%
- определяет расстояние между строками
img{opacity:0.25}
– определяет прозрачность изображения. Значения: от 0 до 1
text-shadow:#ff9933 1px
1px 1px
– тень для текста. Значение #ff9933 определяет цвет тени,
участок кода 1px 1px 1px определяет соответственно:
смещение тени вправо, смещение тени вниз и размытие тени
width: 300px
- определяет ширину элемента в пикселях или в процентах
height: 500px
- определяет высоту элемента в пикселях или в процентах
vertical-align
— определяет вертикальное выравнивание:
vertical-align: sub → преобразует текст в нижний индекс;
vertical-align: super → преобразует текст в верхний индекс;
vertical-align: top → выравнивает текст поверху ячейки таблицы;
vertical-align: middle → выравнивание текста по центру (по
вертикали) ячейки таблицы;
vertical-align: bottom → выравнивание текста
понизу ячейки таблицы.
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Что такое CSS?
2. Назовите преимущества CSS?
3. Что такое селектор и как он записывается в CSS?
4. Какие способы применения CSS к HTML-документам?
5. Перечислите свойства цвета и фона.
6. Перечислите свойства шрифта
7. Какие есть свойства у текста?
8. Что такое псевдокласс?
9. Какие есть псевдоклассы у ссылок?