Использование каскадных таблиц стилей

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют указать, как будет выглядеть каждый элемент содержимого на экране: какой используется шрифт, выделен ли он жирным или курсивом, насколько он отступает от края страницы и т. д. Язык CSS позволяет задавать любые атрибуты в виде наборов параметров – так называемых стилей форматирования, а затем одним действием применить сразу всю группу атрибутов форматирования к различным элементам документа. В результате существенно уменьшается размер файла документа и время его загрузки из сети. Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры этого стиля и вид текста поменяется автоматически.

Описание стилей можно расположить внутри тега, в заголовке HTML-страницы или во внешнем файле. Самая простая форма их определения возможна для отдельного тега с использованием параметра style.

<html>

<head>

<title> Стили </title>

</head>

<body>

<p style="font-size: 24pt; font-style: italic; color: blue;">

Абзац с форматированием

</p>

</body>

</html>


Атрибуты CSS можно расположить в заголовке страницы в специальном блоке описания стилей <STYLE>…</STYLE>. В этом случае они будут действовать на любые теги. В одном HTML-документе могут быть несколько таких блоков.

Пример:

<html>

<head>

<style type="text/css">

BODY { background: #F0F0F0; } /* Светло-серый цвет фона */

H2 {color: blue; font-size: 24pt; text-align: center; }

P {

text-indent: 30; color: green; font-size: 16pt;

font-weight: bold;

}

</style>

</head>

<body>

<h2> Заголовок с форматированием </h2>

<p> Абзац с форматированием </p>

</body>

</html>


Атрибуты можно расположить в отдельном css файле, который можно подключить в разделе <head> тегом <link rel="stylesheet" href="имя файла.css"> .

Упражнения

  • оформить стихотворение по представленному ниже шаблону;

  • переименовать файл index.html, созданный на прошлом уроке в Spring.html. Применить для этой странички полученный стиль.

Материалы для странички: