Css - урок 2. подключение css к html

MODERN

Опытный
Создайте обыкновенную html-страницу, примерно с таким кодом:
<html>
<head>
<title>Подключение CSS к HTML</title>
</head
<body>
<h1>Это заголовок первого уровня</h1>
Здесь просто текст
<h2>Это заголовок второго уровня</h2>
Здесь просто текст
</body>
</html>

Теперь создайте в блокноте страницу (пока пустую) и сохраните ее как style.css в ту же папку, где лежит html-страница:
css1.gif

Это и будет наша страница стилей. Теперь нам надо подключить страницу style.css к html-странице. Для этого в html существует тег <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-страницам, как самым удобным. Но существуют и другие способы, давайте их рассмотрим.

Внутренние таблицы стилей

Так называют таблицу стилей, заданную внутри элемента 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>

В этом случае и применяется принцип каскадирования, который разрешит конфликт: в данном случае внутренняя таблица имеет высший приоритет, поэтому заголовок и станет синим.

Недостаток этого способа также очевиден: таблицу стилей придется создавать для каждой страницы. Это является одной из причин по которой мы будем пользоваться внешней таблицей стилей.
 
Сверху