Введение в CSS
advertisement
Введение в CSS
Базовый синтаксис CSS
селектор {
свойство1: значение;
свойство2: значение;
}
селектор — некоторое имя стиля, для которого
добавляются параметры форматирования
Пример использования стилей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Заголовки</title>
<style type="text/css">
h1 { color: #a6780a; font-weight: normal; }
h2 { color: olive; border-bottom: 2px solid black; }
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
Способы добавления стилей
на страницу
1. Внутристрочная стилевая
информация.
2. Использование элемента STYLE в
разделе HEAD HTML–документа.
3. Определение внешних стилевых
таблиц.
Внутристрочная стилевая
информация. Атрибут style
<P style="color: green; font-weight:
bold; font-family: Arial;">
Этот текст имеет зеленый цвет и выводится жирным.
Шрифт Arial.
</P>
________________________________
Этот текст имеет зеленый цвет и выводится
жирным. Шрифт Arial.
Использование тэга style в
разделе HEAD HTML–документа.
<html><head><title>…<title>
<style type="text/css">
p {color: green; font-weight: bold; font-family: Arial;}
</style>
</head>
<body>
<p>Этот текст имеет зеленый цвет и выводится жирным.
Шрифт Arial. </p>
</body></html>
_____________________________________________
Этот текст имеет зеленый цвет и выводится жирным. Шрифт Arial.
Определение внешних стилевых
таблиц. Тэг link
<html>
<head><title>…<title>
<link href="mystyle.css"
rel="stylesheet" type="text/css">
</head>
</body>
<h1>Заголовок</h1>
<p>Текст документа…</p>
</body>
</html>
Определение внешних стилевых
таблиц. Стилевой файл
H1 { color: #000080;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P { padding-left: 20px; }
Преимущества стилей
Разграничение кода и оформления
Разное оформление для разных
устройств
Расширенные по сравнению с HTML
способы оформления элементов
Ускорение загрузки сайта
Единое стилевое оформление
множества документов
Централизованное хранение
