КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Атрибут style
|
|
|
|
С помощью атрибута style можно задать стиль любого элемента XHTML:
<p style="align: right">Мы рождены, чтоб сказку сделать былью…</p>
Для задания нескольких свойств одновременно их необходимо разделять точкой с запятой:
<p style="align: right; font-style: italic; background: yellow"> …</p>
Элемент <style>
Атрибут style используется для задания свойств отдельных элементов, расположенных в конкретном месте страницы. Для создания единообразного документа используется элемент style. Именно с его помощью в страницу включается таблица стилей. Элемент style должен размещаться в секции <head>:
<head>
<style type="text/css">
элемент {свойство: значение}
</style>
</head>
Пример:
<head>
<style type="text/css">
p {font-style: italic}
</style>
</head>
Описанный элемент (в данном примере – абзац) называется селектором; все, что располагается в фигурных скобках – определением. Все вместе называется правилом.
Элемент <style> может содержать несколько правил. Каждое из них заканчивается закрывающей скобкой.
Пример:
<head>
<style type=”text/css”>
p {font-style: italic}
h1 {color: blue}
ul {list-type: disc}
</style>
</head>
Каждое определение может содержать несколько свойств:
<style type="text/css">
p {font-style: italic;
background: yeloow;
align: center
}
</style>
Одно и то же определение можно применить сразу к нескольким элементам. Для этого надо написать несколько селекторов подряд, разделяя их запятыми.
Пример:
<style type="text/css">
p, h1, h2, h3 {font-style: italic}
</style>
Отметим еще один момент. Таблицы стилей обладают свойством, напоминающим наследование. Например, если какой-либо стиль присвоен элементу <table>, то входящие в него элементы (строки и ячейки) будут иметь этот стиль. То же самое правило касается элемента <body> и вообще всех элементов, внутри которых есть другие элементы. Действие стиля распространяется на них без ограничений до тех пор, пока не встретится другой стиль.
|
|
|
Пример:
<style type=”text/css”>
body {font-family: Arial; font-size: 12pt}
ul {font-family: Times New Roman}
</style>
В этом примере шрифт Arial будет использован для всех элементов тела страницы, кроме неупорядоченных (маркированных) списков.
Создание специальных классов
Таблицы стилей позволяют не только задавать свойства отдельных элементов, но и создавать целые классы. Классы дают возможность варьировать характеристики элементов.
Пример:
<head>
<style>
h1.krasota {color: red}
</style>
</head>
<h1> Обычный заголовок </h1>
<h1 class="krasota"> Красивый заголовок</h1>
Указанный стиль будет применяться к заголовку, если будет указан атрибут class.
Соответственно, можно определять разные классы одного и того же элемента.
<style>
p.body {font-family: Arial; font-size: 14pt}
p.fontnote {font-family: Times New Roman; font-size: 15pt}
</style>
Можно создать универсальный класс. Его можно привязать в теле страницы к любому элементу.
Пример
<style>
.small {font-family: Arial; font-size: 8pt}
</style>
Теперь можно для любого элемента задать этот стиль:
<p class=”small”>…</p>
Пример. Текст страницы с таблицей стилей, содержащей описание классов (на рис. 1 показана эта страница в браузере).
<!DOCTYPE html
PUBLIC "\/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {color: black}
h2 {color: red}
p.kr {color: blue}
.my {color: green}
</style>
</head>
<body>
<h1> Обычный заголовок </h1>
<h2> Красивый заголовок</h2>
<p class="kr"> Прекрасный текст</p>
<p class=”my”> Прекраснейший текст</p>
</body>
</html>
Элемент <span>
Элемент <span> − это контейнер, в котором определяется стиль для любых элементов и который действует вплоть до закрывающего тега.
<span style=”font-size: 12pt”>
Привет!
|
|
|
</span>
Можно задать стиль для элемента <span>:
<style>
span { font-family: Arial; font-size: 8pt}
</style>
Теперь <span> можно использовать в качестве специфического элемента:
<p> <span> Привет! </span> </p>
На основе элемента <span> можно создать класс:
<style>
span.dropcap {font-family: Times New Roman; font-size: 24 pt}
span.smallcaps {font-famliy: Arial; font-size: 8 pt}
</style>
Теперь можно использовать элемент <span> с атрибутом class:
<p> <span class="dropcap"> Э </span> <span class="smallcaps"> то случилось темным вечером. </span> </p>
Элемент <span> также можно использовать с заранее определенными универсальными классами (см. пример ниже и рис. 2).
Рис. 1
Элемент <div>
Элемент <div> используется для разделения всего веб-документа на секции. Данный элемент является контейнером и может содержать практически любые элементы. Браузер вокруг данного элемента оставляет на странице пустое пространство.
Для элемента <div> могут быть определены правила таблицы стилей, он может иметь атрибут class.
Пример. Страница с элементами <span> и <div> (рис. 2).
<!DOCTYPE html
PUBLIC "\/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<style>
span {font-family: Times New Roman;
font-size: 14pt}
span.dropcap {font-family: Times New Roman; font-size: 28pt; float}
span.smallcaps {font-famliy: Arial; font-size: 12pt}
</style>
</head>
<body>
<p> <span> Cтрашная история </span> </p> </br>
<div style="background-color: yellow"
<p> <span class="dropcap">Э</span>
<span class="smallcaps">то случилось темным дождливым вечером. </span>
</p>
</div>
</body>
</html>
Рис. 2
Связывание и внедрение таблиц стилей
Напоминаем, что существует два различных метода определения таблиц стилей. Первый: внедрение контейнера <style> в заголовок документа. Этот метод используется, когда таблица стилей распространяет свое действие на ту страницу, в которую она включена.
Второй метод: оформить таблицу стилей в виде отдельного файла и связать его с нужными веб-документами. Файл с таблицей должен сохраняться с расширением.css.
Пример. Файл с таблицей стилей (сохранен с именем mystyle.css в том же каталоге, что и главная страница сайта).
<!-- Описание правил -->
h1 {
font-family: Arial;
font-size: 24 pt;
word-spacing: 2 pt;
}
Для подключения файла к документу используется элемент <link/>, который помещается в заголовок.
|
|
|
<head>
<title> Главная страница </title>
<link rel="stylesheet" href="mystyle.css"/>
</head>
Следующий пример представляет собой страницу, показанную на рис. 1, с использованием файла с таблицей стилей.
Пример. Файл с таблицей стилей и веб-страница, использующая таблицу.
<!-- файл tabl1.css (сохранен с именем tabl1.css в одной папке с главной страницей) -->
h1 {color:black}
h2 {color: red}
p.kr {color:blue}
.my {color:green}
<!-- веб-страница -->
<!DOCTYPE html
PUBLIC "\/W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="tabl1.css"/>
</head>
<body>
<h1> Обычный заголовок </h1>
<h2> Красивый заголовок</h2>
<p class="kr"> Прекрасный текст</p>
<p class="my"> Прекраснейший текст</p>
</body>
</html>
|
|
|
|
|
Дата добавления: 2015-05-26; Просмотров: 654; Нарушение авторских прав?; Мы поможем в написании вашей работы!