Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Теперь давайте рассмотрим как можно сделать подключение таблицы стилей к html документу.

Как мы знаем из прошлого урока, для этого служит специальный тег:

<link rel="stylesheet" type="text/css" hrеf="style.css">

который вставляется в раздел <head> html-файла и указывает на расположение файла таблицы стилей.

Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
<link rel="stylesheet" type="text/css" hrеf="style.css">
</head>
<body>
<h2>Приветствую Вас на сайте о дорогих автомобилях</h2>
<p>В этих автомобилях сочетаются<br>
последние достижения высоких технологий<br>
и лучшие решения в инженерии</p>
</body>
</html> 

Так же существуют ещё два способа подключения стилей.

Это

  1. встроенные таблицы стилей
  2. внутренние стили для элементов

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

Могут быть включены прямо в html-документ в раздел <head>
При этом стили должны быть обёрнуты тегом

<style type="text/css">
.....
</style>

Это делается для того чтобы браузер понял что это таблицы стилей.
Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
<style type="text/css">
h2
{color:#F34B10;
font-size:32px; }
</style>

</head>
<body>
<h2>Приветствую Вас на сайте о дорогих автомобилях</h2>
<p>В этих автомобилях сочетаются<br>
последние достижения высоких технологий<br>
и лучшие решения в инженерии</p>
</body>
</html>

Такой подход применяется редко, так как правильнее будет выносить стили в отдельный файл, но всё же иногда может быть полезен.

Внутренние стили для html элементов

Такое подключение мы уже затрагивали в одном из уроков по HTML.
Это когда для какого то тега сразу указывается стиль.
Пример:

<html>
<head>
<title>Сайт о шикарных автомобилях</title>
</head>
<body>
<h2>Приветствую Вас на сайте о дорогих автомобилях</h2>
<p style="color:#ccc; font-size:15px;">
В этих автомобилях сочетаются<br>
последние достижения высоких технологий<br>
и лучшие решения в инженерии</p>
</body>
</html>

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

Каждый способ подключения применяется индивидуально к каждому html документу.

В основном таблицы стилей выносятся в отдельный файл.

Встроенные таблицы могут использоваться если стилей немного и выносить их в отдельный файл не имеет смысла.

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

Может быть пока это ещё не совсем понятно, но уверен через некоторое время вы всё поймёте.
Главное делайте больше практических примеров.

Далее: цвет фона и текста в CSS

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!