HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

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

Создаем обычную html-страницу, с таким кодом:

 

<html>
  <head>
    <title>Подключение CSS к HTML</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    Здесь просто текст
    <h2>Заголовок второго уровня</h2>
    Здесь просто текст
  </body>
</html>

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

 1

Это наша страница стилей. Давайте подключим стили (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.

 

Скачать бесплатно HTML шаблоны сайта с нами легко!

В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.

Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.

Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.

HTML шаблоны