О спецификации CSS 2.1 Богданов Марат Робертович Современные веб-технологии. Подробный курс
advertisement
О спецификации CSS 2.1
Богданов Марат Робертович
Современные веб-технологии. Подробный курс
Каскадные таблицы стилей позволяют разделять код и
представление web-страниц.
Стили можно размещать не только в самой web-странице, но
и в отдельном файле.
Параметры стиля можно применять не только к
определенным тэгам HTML, но и к конкретному тэгу.
Для одного и того же элемента можно назначить несколько
разнообразных стилей, называемых классами.
Одна и та же таблица стилей может применяться к
нескольким документам, и, наоборот, к одному и тому же
документу может быть применено несколько таблиц стилей.
2
Термин «каскадные таблицы стилей» был предложен Хокон
Виум Ли в 1994 году. Совместно с Бертом Босом он стал
развивать CSS .
В отличие от многих существовавших на тот момент языков
стиля, CSS использует наследование от родителя к потомку,
поэтому разработчик может определить разные стили,
основываясь на уже определенных ранее стилях.
3
С помощью CSS для любого элемента можно задать размеры
и координаты расположения, а также другие параметры
визуализации.
Так что, применяя CSS, можно обойтись без тегов таблиц и
фреймов, широко использующихся в качестве средства
компоновки Web-страниц .
4
Пример 1. Применение стиля к тэгу h2
<!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>
5
Пример 2. Одинаковые стилевые параметры для разных тэгов
<title>Одинаковые стилевые параметры для разных тэгов</title>
<style type="text/css">
h2, h3 {font-family:Calibri; color:Teal;}
</style>
</head>
<body>
<h2>Обручальное кольцо есть первое звено в супружеской жизни</h2>
<h3>Лучше скажи мало, но хорошо</h3>
</body>
6
Пример 3. Каскадное задание стилевых параметров
<title>Каскадное задание стилевых параметров </title>
<style type="text/css">
h2, h3 {font-size: 36pt; color: Fuchsia}
h1 {font-family: Arial CYR}
h2 {font-family: Century Gothic}
</style>
</head>
<body>
<h1>Наука обостряет ум; ученье вострит память</h1>
<h2>Никто не обнимет необъятного</h2>
<h3>Гений подобен холму, возвышающемуся на равнине</h3>
</body>
7
Пример 4. Задание стилей по атрибутам id
<title>Задание стилей по атрибутам id</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>
8
Пример 5. Использование классов
<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>
9
Размещение каскадных таблиц стилей
mystyle.css
body {background-color: Aqua;}
h1{font-family:Verdana;color:Navy;font-size:36pt}
<title>Размещение CSS во внешнем файле</title>
<style type="text/css">
@import url("MyStyle.css");
</style>
</head>
<body>
<h1>Не всякому человеку даже гусарский мундир к лицу.</h1>
</body>
10
