logo
Проектирование инт-прил / лекции / Проектирование инет приложений

Каскадные таблицы стилей

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

selector { property : value; }

selector- к какому конкретно HTML тэгу (или тэгам) применяется новое свойство. Например, "body" применит ко всему "телу документа".

property- какое свойство будем менять. Например, это будет цвет фона, "background-color".

value- новое значение изменяемого нами свойства.

Таким образом, если в HTMLизменение фона страницы можно добиться, указав на странице:

<body bgcolor="#FF0000">

то средствами CSS то же самое выглядит следующим образом:

body { background-color: #FF0000; }

Существует три способа применить CSSк документу.

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

<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>

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

Наибольшее распространение имеет третий способ, потому что он позволяет отделить содержание документа от его оформления. Содержание может меняться, в том числе и динамически подгружаться на страницу. А стиль при этом остается неизменным. Кроме того, внешние стили позволяют написать один стиль и применить его ко всему сайту сразу (то есть к нескольким HTML-документам).

Очень широкое применение в CSS имеет понятие "класс". Класс - с точки зрения CSS - это именованный набор атрибутов, который целиком может быть применен к любому объекту на странице. Например:

.cite {

color: navy; /* Синий цвет текста */

font-style: italic; /* Курсивное начертание */

}

После такого объявления все элементы, имеющие установленный класс cite, будут иметь синий цвет и курсивный шрифт:

<p class="cite">Текст, который будет выведен синим курсивом</p>

<b class="cite">Объявление</b>

Последняя строка предписывает браузеру вывести слово "Объявление" жирным шрифтом. Однако, поскольку к ней дополнительно применен класс cite, наше "Объявление" будет выведено - синим, наклонным и жирным шрифтом одновременно.