Основы работы с XHTML и CSS
         

Используемая по умолчанию горизонтальная


-------------------------------------------------------------------
Листинг 3.1. Используемая по умолчанию горизонтальная линейка
Закрыть окно


<tag style="property:value [; property:value] ...">
Листинг 3.2. Общая форма линейной таблицы стилей
Закрыть окно


<style type="text/css"> selector {property:value [; property:value] ...} ... </style>
Листинг 3.3. Общая форма встроенной таблицы стилей
Закрыть окно


<head> <title> Пример встроенной таблицы стилей</title>

<style type="text/css"> hr {height:10px; width:50%; color:red; text-align:center} </style>

</head>
Листинг 3.4. Применение встроенной таблицы стилей
Закрыть окно




<style type="text/css">

hr {height:10px; width:50%; color:red; text-align:center}

</style>
Листинг 3.5. Другая форма записи встроенной таблицы стилей
Закрыть окно


Stylesheet.css (документ)

hr {height:10px; width:50%; color:red; text-align:center}
Листинг 3.6. Документ внешней таблицы стилей
Закрыть окно


<link href="url" type="text/css" rel="stylesheet" />
Листинг 3.7. Общая форма тега <link>
Закрыть окно


<head> <title> Пример присоединяемой таблицы стилей</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
Листинг 3.8. Соединение страницы Web с внешней таблицей стилей
Закрыть окно


hr {height:1px; width:50%; color:red; text-align:center}
Листинг 3.9. Внешняя таблица стилей для горизонтальных линеек
Закрыть окно


<style type="text/css"> hr {color:blue} </style>
Листинг 3.10. Встроенная таблица стилей для горизонтальных линеек
Закрыть окно


<hr style="color:green; width:100%"/>
Листинг 3.11. Линейная таблица стилей для горизонтальной линейки
Закрыть окно


<body style="margin:25px">

<p> Эта страница Web выводит параграф текста с окружающими страницу полями величиной 25 пикселей. Эти поля создаются линейной таблицей стилей, заданной для тела документа. Строки текста лежат в этих границах и переносятся по словам. </p>

</body>
Листинг 3.12. Задание полей страницы Web с помощью линейной таблицы стилей
Закрыть окно


<head> <title>Поля страницы</title> <style type="text/css"> body {margin:25px} <style> </head>

<body>

<p> Эта страница Web выводит параграф текста с окружающими страницу полями величиной 25 пикселей. Эти поля создаются линейной таблицей стилей, заданной для тела документа. Строки текста лежат в этих границах и переносятся по словам.</p>

</body>
Листинг 3.13. Задание полей страницы Web с помощью вложенной таблицы стилей
Закрыть окно


Stylesheet.css

body {margin:25px}
Листинг 3.14. Внешняя таблица стилей (файл Stylesheet.css)
Закрыть окно


<head> <title>Любая страница</title> <link href="Stylesheet.css" type="text/css" rel="stylesheet"/> </head>
Листинг 3.15. Задание полей страницы Web с помощью внешней таблицы стилей
Закрыть окно


<style type="text/css"> body {margin-top:50px; margin-left:30px; margin-right:30px; margin-bottom:50px} </style>
Листинг 3.16. Задание индивидуальных полей страницы Web с помощью встроенной таблицы стилей
Закрыть окно


<p> Здесь три параграфа. Первый параграф форматирован с помощью стандартного тега параграфа с используемыми по умолчанию настройками стиля.</p>

<p style="margin-left:40px; margin-right:40px">Второй параграф форматирован с настройкой стиля "margin-left:40px; margin-right:40px" для задания левого и правого полей для смещения параграфа относительно окружающих параграфов. Это оформление создает параграф, похожий по результату на использование тега blockquote.</p>

<p>Третий параграф кодируется так же, как и первый. Он заключен в стандартный тег параграфа с используемым по умолчанию оформлением.</p>
Листинг 3.17. Задание полей параграфа с помощью линейной таблицы стилей
Закрыть окно


<p>Вот история о Мери и надоедливой маленькой овечке, которая повсюду ее преследовала.<p>

<p style="margin-left:40px; margin-right:40px; margin-top:50px; margin-bottom:50px"> Была у Мери овечка,<br/> Была ее шерсть снежно-белой;<br/> И куда бы ни шла Мери,<br/> Овечка бежала за нею. <br/> </p>

<p>У Мери ужасная жизнь. Очень трудно сходить на свидание, когда вокруг тебя все время скачет овечка.</p>
Листинг 3.18. Задание вертикальных полей с помощью линейной таблицы стилей
Закрыть окно


<p style="text-align:left"> Этот параграф форматируется с помощью задания стиля style="text-align:left". Каждая строка текста располагается у левого края страницы и переносится на новую строку у правого края страницы. Это используемый по умолчанию стиль выравнивания параграфа.</p>

<p style="text-align:center"> Этот параграф форматируется с помощью задания стиля style="text- align:center". Каждая строка текста с переносами выводится выровненной по центру между левым и правым полем страницы.</p>

<p style="text-align:right"> Этот параграф форматируется с помощью задания стиля style="text-align:right". Каждая строка текста с переносами выравнивается по правому полю страницы. </p>

<p style="text-align:justify"> Этот параграф форматируется с помощью задания стиля style="text- align:justify". Все строки текста с переносами, за исключением последней строки, выравниваются по ширине от левого до правого поля. Последняя строка, так как она недостаточно длинная для переноса, не выравнивается по ширине между полями страницы. </p>
Листинг 3.19. Задание выравнивания параграфов с помощью линейных таблиц стилей
Закрыть окно


<style type="text/css"> p {text-align:justify} </style>
Листинг 3.20. Задание выравнивания для всех параграфов с помощью встроенной таблицы стилей
Закрыть окно


<h2 style="text-align:center">Центрированный заголовок</h2>
Листинг 3.21. Задание выравнивания заголовка
Закрыть окно


<style type="text/css"> h1 {text-align:center; margin-top:20px} h2 {text-align:left; margin-top:20px} h3 {text-align:left; margin-top:20px} </style>
Листинг 3.22. Задание стилей выравнивания для всех заголовков на странице
Закрыть окно


<head> <title>Плавающее изображение</title> <style type="text/css"> body {margin:20px} p {text-align:justify} h2 {text-align:center} img {float:right; margin-left:25px} </style> </head>

<body>

<h2>Плавающие изображения</h2>

<p> <img src="Stonehenge.jpg" alt="Изображение Стоунхенджа"/> Альтернативой размещению изображения в отдельной строке является размещение изображения у левого или правого поля, позволяя тексту заполнять оставшееся свободное пространство. Сопровождающее изображение смещается вправо от текста на странице. </p>

<p>Помните, что важно помещать тег <img> в коде сразу перед текстом или другими элементами страницы, которые дополняют изображение. Изображение смещается точно в то место на странице, в котором кодируется тег <img/>. В данном случае тег помещается в начале первого параграфа; поэтому изображение смещается вправо от этого параграфа. </p>

</body>
Листинг 3.23. Код страницы со смещенным вправо изображением
Закрыть окно


<p style="text-indent:25px">Этот параграф форматируется с помощью style="text-indent:25px". Первая строка параграфа смещается на 25 пикселей от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю.</p>

<p style="text-indent:5%">Этот параграф форматируется с помощью style="text- indent:5%". Первая строка параграфа смещается на 5 процентов ширины страницы от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю. </p>
Листинг 3.24. Задание отступа первых строк параграфов
Закрыть окно


<style type="text/css"> hr {height:1px; width:50%; text-align:center} </style>
Листинг 3.25. Код стиля всех горизонтальных линеек на странице
Закрыть окно


<h1 style="color:blue">Синий заголовок</h1>
Листинг 3.26. Кодирование стиля цветного заголовка
Закрыть окно


<p style="color:red">...красный текст параграфа ...</p>
Листинг 3.27. Код для задания стиля цветного параграфа
Закрыть окно


<style type="text/css"> body {color:green} </style>
Листинг 3.28. Встроенная таблица стилей для задания цвета всего текста на странице
Закрыть окно


<style type="text/css"> body {color:green; background-color:yellow} </style>
Листинг 3.29. Встроенная таблица стилей для задания цвета фона страницы
Закрыть окно


<body style="color:blue; background-color:yellow">

<p> Синяя горизонтальная линейка высотой 10 пикселей, шириной 300 и смещенная к правому полю:</p>

<hr style="color:blue; height:10px; width:300px; text-align:right"/>

<p>Красная горизонтальная линейка высотой 2 пикселя, 75% от ширины страницы и расположенная по центру:</p>

<hr style="color:red; height:2px; width:75%; text-align:center"/>

<p>Зеленая горизонтальная линейка высотой 10 пикселей; 25% от ширины страницы и смещенная к левому полю:</p>

<hr style="color:green; height:10px; width:25%; text-align:left"/>

</body>
Листинг 3.30. Код задания стилей горизонтальных линеек
Закрыть окно


<p>Этот параграф содержит слово <span style="color:red">RED</span>, которое находится внутри тега <span>, чтобы определить цвет этого слова. В этом предложение для слова <span style="color:blue">BLUE</span> задан этот цвет.</p>
Листинг 3.31. Код оформления отдельных слов в параграфе
Закрыть окно


<div style="text-indent:25px; margin-left:30px; margin-right:30px; text-align:justify">

<p> Этот параграф имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между двумя полями.</p>

<p>Этот параграф также имеет отступ первой строки в 25 пикселей. Он имеет левое и правое поле по 30 пикселей и выровнен по ширине между полями. Оба параграфа оформлены с помощью охватывающего тега раздела div для применения этих стилей к обоим параграфам.</p>

</div>
Листинг 3.32. Код оформления двух параграфов с помощью охватывающего тега <div>
Закрыть окно


selector {property:value [; property:value] ... }
Листинг 3.33. Общий формат встроенной таблицы стилей для простого селектора
Закрыть окно


<style type="text/css"> body {margin:20px; color:black} h1 {color:blue; text-align:center} h2 {color:blue; text-align:left} p {text-align:justify; text-indent:25px} </style>
Листинг 3.34. Встроенная таблица стилей, использующая простые селекторы
Закрыть окно


<p id="Special"> Этот параграф требует специального оформления, отличающегося от обычных параграфов на странице. Он должен быть смещен на 25 пикселей от обоих полей и не должен иметь отступа в первой строке.</p>
Листинг 3.35. Идентификация параграфа для применения специального оформления
Закрыть окно


selector#id {property:value [; property:value] ...}
Листинг 3.36. Общий формат таблицы стилей для селектора ID
Закрыть окно


<style type="text/css"> body {margin:20px; color:black} h1 {color:blue; text-align:center} h2 {color:blue; text-align:left} p {text-align:justify; text-indent:25px} p#Special {text-indent:0px; margin-left:25px; margin-right:25px} </style>
Листинг 3.37. Задание стилей для селектора ID
Закрыть окно


<style type="text/css"> div {property:value} span {property:value} </style>
Листинг 3.38. Избегайте использования простых селекторов для тегов <div> и <span>
Закрыть окно


<style type="text/css"> div#Justify {text-align:justify} span#Red {color:red} span#Blue {color:blue} </style>

<div id="Justify"> <p> Этот параграф оформляется наследованием оформления своего контейнерного раздела, который форматируется с помощью <span id="Red">"Justify"</span> style.</p>

<p>Это параграф также оформляется наследованием оформления своего контейнерного раздела. Кроме того, к одному из его слов применяется оформление <span id="Blue">"Blue"</span></p> </div>
Листинг 3.39. Использование селекторов ID для оформления отдельных тегов <div> и <span>
Закрыть окно


.class {property:value [ ;property:value] ...}
Листинг 3.40. Общая форма таблицы стилей для селектора класса
Закрыть окно


<style type="text/css"> p {margin:20px} .Offset {margin-left:30px; margin-right:30px} </style>

<p class="Offset"> Этот параграф требует специального оформления, отличающегося от обычных параграфов на странице. Он имеет левое и правое поле шириной по 30 пикселей.</p>
Листинг 3.41. Объявление и применение класса стиля оформления
Закрыть окно


<head> <title>Стили классов</title>

<style type="text/css"> .Offset {margin-left:25px; margin-right:25px; text-align:justify} .Red {color:red} .Blue {color:blue} .Rule {height:2px; width:75%; text-align:center; color:green} </style>

</head> <body>

<hr class="Rule"/>

<div class="Offset">

<p> Этот параграф имеет форматирование, задаваемое охватывающим разделом. Внутри этого параграфа слово <span class="Red">RED</span> использует собственный класс стиля.</p>

<p>Этот параграф также оформляется охватывающим разделом. Внутри этого параграфа слово <span class="Blue">BLUE</span> использует собственный класс стиля.</p>

</div>

<hr class="Rule"/>

</body>
Листинг 3.42. Объявление и использование различных классов стилей
Закрыть окно

Содержание раздела