Как сделать сайт → Уроки CSS → Урок 2. Подключение CSS к HTML

CSS - Урок 2. Подключение CSS к HTML

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

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



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

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

Мы рассмотрели способы включения CSS в HTML, в следующий раз займемся синтаксисом CSS.

  • Блочная верстка сайта
  • Верстка резинового дизайна
  • Визуальные эффекты jquery
  • Заработок на своем сайте на бирже ссылок


    Предыдущий урок Вернуться в раздел Следующий урок 
    Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.