CSS

Подключение 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 style="color:blue">Этот заголовок будет синего цвета</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.
Теги:
css
Похожие новости:
Добавлено: 18 Июня 2015 20:50:39 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...