Использование каскадных таблиц стилей
Использование каскадных таблиц стилей
Embedded Files
Каскадные таблицы стилей (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. Применить для этой странички полученный стиль.
Материалы для странички:
Файл web-странички snow_html.txt (данный файл переименовать в snow.html);
Google Sites
Report abuse