Внешние таблицы стилей
Создаем обычную html-страницу, с таким кодом:
<html>
<head>
<title>Подключение CSS к HTML</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
Здесь просто текст
<h2>Заголовок второго уровня</h2>
Здесь просто текст
</body>
</html>
Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:
Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег <link>, который отвечает за подключение внешних файлов. Добавляем <link> в html-страницу:
<html>
<head>
<title>Подключение CSS к HTML</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h1>Заголовок первого уровня</h1>
Здесь просто текст
<h2>Заголовок второго уровня</h2>
Здесь просто текст
</body>
</html>
Далее мы будем подключения css именно этим способом так, как он самый удобный. Есть и другие способы, сейчас давайте их рассмотрим.
Внутренние таблицы стилей
Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style. Вот пример:
<h1 style="color:red">Это заголовок красного цвета</h1>
Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.
Встроенные таблицы стилей
В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги <style></style>, с параметром type, он указывает, что подключается таблица стилей CSS. Вот пример:
<html>
<head>
<title>Подключение CSS к HTML</title>
<style type="text/css">
h1{
color:red
}
</style>
</head>
<body>
<h1>Этот заголовок будет красного цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
</body>
</html>
Все заголовки h1 у нас на странице красного цвета. При желании можно один из них перекрасить в синий цвет, для этого нужно воспользоваться внутренней таблицей стилей:
<html>
<head>
<title>Подключение CSS к HTML</title>
<style type="text/css">
h1{
color:red
}
</style>
</head>
<body>
<h1>Этот заголовок будет красного цвета</h1>
<h1 style="color:blue">Этот заголовок будет синего цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
</body>
</html>
В данной ситуации применяется принцип каскадирования, он разрешит конфликт. В нашем примере внутренняя таблица имеет выше приоритет и поэтому заголовок станет синим.
Минусы этого способа очевидны... Таблицу стилей нужно создавать для каждой HTML страницы, поэтому мы будем пользоваться внешней таблицей стилей.
Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.
