| Россия, Санкт Петербург |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 05.08.2010 | Уровень: для всех | Доступ: платный
Лекция 4:
О спецификации CSS 2.1
< Лекция 3 || Лекция 4 || Лекция 5 >
Аннотация: Современные web-страницы содержат сложное оформление, при этом желательно сохранять преемственность выбранного дизайнерского решения. CSS избавляют программиста от необходимости задавать внешний вид каждого элемента, позволяют разделить содержимое документа и его внешний вид.
Ключевые слова: каскадная таблица стилей (CSS), W3C-консорциум, Web, Интернет, язык гипертекстовой разметки (HTML), XHTML, браузер, наследование, таблица стилей, координаты, шрифт, список, размер шрифта, фигурные скобки, представление, значение, имя класса, класс, контейнер, файл, стиль оформления
Презентацию к данной лекции Вы можете скачать здесь.
CSS - одна из технологий, одобренных W3C-консорциумом в качестве "стандартов Web"[1]. В 90-х годах появилась необходимость стандартизировать Интернет, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, а также стандарт CSS.
В начале 90-х годов различные браузеры имели свои стили для отображения web-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS [1].
В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определенных ранее стилях.
Параметры внешнего вида документа можно задать с помощью каскадных таблиц стилей (Cascading Style Sheets, CSS). Таблица стилей, подобно шаблону форматирования текстов, может быть разработана отдельно от конкретного (Х)HTML-документа, а затем применена к нему. Модификация содержимого таблицы стилей меняет внешний вид (Х)HTML-документов, не затрагивая их структуры и информационного содержания. Одна и та же таблица стилей может применяться к нескольким документам, и, наоборот, к одному и тому же документу может быть применено несколько таблиц стилей. В последнем случае браузер учитывает приоритеты таблиц и по определенным правилам разрешает возникающие конфликты, в результате чего таблицы выстраиваются неким каскадом (отсюда и название- каскадные таблицы стилей).
С помощью CSS для любого элемента можно задать размеры и координаты расположения, а также другие параметры визуализации. Так что, применяя CSS, можно обойтись без тегов таблиц и фреймов, широко использующихся в качестве средства компоновки Web-страниц [2].
CSS содержит наборы стилевых параметров или правила форматирования. Например, если требуется определить для всех заголовков второго уровня шрифт "Comic Sans MS", 36 пунктов, пурпурного цвета, то соответствующее правило можно записать так:
{font-family: Comic Sans MS; font-size: 36pt; color:Purple}.Код web-странички, содержащей афоризм Козьмы Пруткова, будет выглядеть таким образом [3] :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Применение каскадной таблицы стилей</title>
<style type="text/css">
h2 {font-family: Comic Sans MS; font-size: 36pt; color:Purple}
</style>
</head>
<body>
<h2>Глядя на Мир, не перестаешь удивляться...</h2>
</body>
</html>В фигурных скобках заключен список таких параметров, как начертание, цвет шрифта и размер шрифта.
Одно и то же правило можно применить к различным элементам, и, наоборот, для одного и того же элемента может быть задано несколько правил. Следующее правило определяет одинаковые стилевые параметры одновременно для заголовков второго и третьего уровней [3]:
h2, h3 {font-family:Calibri; color:Teal;}.Здесь шрифт Calibri и цвет Teal применяются как для тэгов h2, так и для тэгов h3.
Приведем пример каскадного задания стилевых параметров [3]:
h2, h3 {font-size: 36pt; color: Fuchsia} h1 {font-family: Arial CYR} h2 {font-family: Century Gothic}Здесь сначала задаются размер и цвет шрифта для обоих заголовков, а затем для каждого из них определяется своя гарнитура шрифта (имя шрифта).
Стилевые параметры, заключенные в фигурные скобки, можно назначить не только именам тегов, но и тегам по значениям их атрибута id (идентификатора элемента). Так можно изменить представление не всех, например, абзацев (тегов <p> ), а только тех, которые имеют указанное значение атрибута id.
В предлагаемом ниже примере показаны стили для двух абзацев [3]. Причем в одном случае стиль можно применять только к конкретному тэгу, имеющему id="t1", во втором случае стиль можно применять для всех тэгов <p> .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
#t1 {color:Purple; font-size:20pt; font-family:Comic Sans MS}
p{color:Blue;font-family:Calibri;font-size:16pt}
</style>
</head>
<body>
<p id="t1">Бердыш в руках воина то же, что меткое слово в руках писателя</p>
<p align="center">Если бы тени предметов зависели не от величины сих последних, а имели бы свой произвольный рост,
то, может быть, вскоре не осталось бы на всём земном шаре ни одного светлого места</p>
</body>
</html>Для одного и того же элемента можно назначить несколько разнообразных стилей, называемых классами. При этом селектор можно сформировать как имя тэга, за которым через разделительную точку следует имя класса, или же как просто имя класса, перед которым указывается точка. В первом случае класс применяется только с указанными в селекторах элементами. Во втором случае создается класс без предварительных указаний на то, к каким элементам он должен быть применен. Класс применяется к тем элементам, у которых значением атрибута class является имя этого класса.
В предлагаемом примере создаются два класса ( red и blue ) для заголовка второго уровня .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
h2.red {color:Red}
h2.blue {color:Blue}
</style>
</head>
<body>
<h2>Черный</h2>
<h2 class="red">Красный</h2>
<h2 class="blue">Голубой</h2>
</body>
</html>Размещение каскадных таблиц стилей
Каскадные таблицы стилей можно размещать или непосредственно в самом (X)HTML-документе, или во внешнем файле. В первом случае код CSS заключается в контейнерный тэг <style type="text/css"> …</style>. В наших предыдущих примерах мы использовали как раз такой подход. Во втором случае CSS располагается во внешнем файле, а в вызывающем файле в разделе <head> размещают тэг <link href="URL css-файла"/> или в контейнер <style> - вставляют директиву @import url ("url css-файла").
Создадим файл mystyle.css. Добавим в него следующий код:
body {background-color: Aqua;}
h1{font-family:Verdana;color:Navy;font-size:36pt}Затем создадим web-страничку со следующим содержимым [3] :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
@import url("mystyle.css");
</style>
</head>
<body>
<h1>Не всякому человеку даже гусарский мундир к лицу.</h1>
</body>
</html>Краткие итоги
Каскадные таблицы стилей позволяют разделять код и представление web-страниц, что очень важно при работе над крупными проектами. Стили можно размещать не только в самой web-странице, но и в отдельном файле. В этом случае дизайнер может разработать единый стиль оформления сайта, который будет автоматически применяться на всех web-страницах. Параметры стиля можно применять не только к определенным тэгам HTML, но и к конкретному тэгу. Для одного и того же элемента можно назначить несколько разнообразных стилей, называемых классами. Одна и та же таблица стилей может применяться к нескольким документам, и, наоборот, к одному и тому же документу может быть применено несколько таблиц стилей.
Набор для практики
Вопросы:
- Чем CSS 2.1 отличается от более ранних версий?
- Почему таблицы стилей называют каскадными?
- Как можно применить стиль к конкретному тэгу?
- Как можно для одного и того же тэга назначить несколько стилей?
Упражнения:
- Разработайте web-сайт, состоящий из пяти страниц. Создайте для него единое оформление, сохранив его в отдельном файле. Примените это оформление сразу на всех страничках. Попробуйте изменить оформление.
- Примените стиль по отношению к одному отдельно взятому тэгу.
- Разработайте несколько стилей к одному тэгу.
< Лекция 3 || Лекция 4 || Лекция 5 >
