Webzone Публикации HTML & CSS CSS - Подключение

CSS - Подключение

10:49 , 16 Август 2019
CSS - Подключение

Существует три способа подключения CSS к документу HTML:

  1. Внутренние
  2. Встроенные
  3. Внешние



Внутренние

При внутриэлементном или строчном подключении стиля, он определяется непосредственно внутри тега HTML при помощи атрибута style.


Пример:


<p style="color: red">текст</p>


Данное определение сделает параграф красного цвета.

Однако, как вы, наверное, помните, лучший подход – это когда HTML документ полностью свободен от элементов и атрибутов визуального представления, поэтому внутриэлементный способ определения стилей следует стараться избегать.



Встроенные

Встроенные или внутридокументые стили используются для определения стилей элементов целой веб-страницы. В теге <head> определяется тег <style>, в котором задаются все стили для веб-страницы.


Пример:


<!DOCTYPE html>
<html>
<head>
   <title>Пример CSS</title>
   <style type="text/css">
      p {
         color: red;
      }
      a {
         color: blue;
      }
   </style>
...


Следующее определение сделает все параграфы страницы красными, а все ссылки синими.

Помня о разделении файлов HTML и CSS, внутриэлементные стили также нужно стараться избегать.



Внешние

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


style.css


p {
   color: red;
}

a {
   color: blue;
}


Если имя этого файла будет "web.css", то его подключают к HTML документу следующим образом при помощи тега <link>:


index.html


<!DOCTYPE html>
<html>
<head>
   <title>Пример CSS</title>
   <link rel="stylesheet" type="text/css" href='web.css' />
...


Чтобы максимально плодотворно изучить материал данного учебника, код, приведенный в нем, следует испытать на практике, поэтому в текстовом редакторе создайте новый файл и сохраните его под именем "web.css" в той же директории что и HTML файл.


Вот и все)) Не так то уж сложно :)



Вопросы / Комментарии / Отзывы