CSS (Cascading Style Sheets) Каскадные стили таблиц – это язык стилей позволяющий определять отображения HTML документа. Так как HTML используется для создания структуры документа, то CSS используется для форматирования содержимого структуры HTML. Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML.
CSS стили поддерживаются всеми браузерами. С помощью CSS можно форматировать: вид, цвет, поля, строки, высоту, ширину, изображения, шрифты и многое другое.
Cинтаксис CSS
Скажем, нам нужен синий цвет фона web-страницы:
В HTML это можно сделать так: <body bgcolor=»#0033FF»>
С помощью CSS того же самого результата можно добиться так:
body {background-color: #0033FF;}
Три способа использовать CSS в HTML
Способ первый с помощью атрибута style:
Установим синий цвет для фона
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #0033FF;">
<p>Фон страницы синий</p>
</body>
</html>
Второй способ с помощью внутренней вставки между тегами head:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #0033FF;}
</style>
</head>
<body>
<p>Фон страницы синий </p>
</body>
</html>
Третий способ позволяет делать ссылку на отдельно лежащий CSS файл.
Это самый распространённый и правильный способ, так как для форматирования, например заголовка на сайте, где допустим 10 страниц. Нам не надо будет открывать все 10 страниц и менять там код, нам достаточно открыть CSS файл и изменить там параметры.
Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:
Для того что бы в HTML документе работал наш CSS файл, нам необходимо создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:
<link rel="stylesheet" type="text/css" href="/style/style.css" />
Ссылка вставляется в HTML Документе между тегами <head> и </head>
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" />
</head>
<body>
Контент страницы
</body>
</html>
Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
В CSS файле пишем body { background-color: #0033FF; }
Задание
В редакторе создайте HTML документ и попробуйте тремя способами сделать красный фон.
