Главная css Связь HTML-документа с таблицей CSS

Связь HTML-документа с таблицей CSS

CSS (Cascading Style Sheets - Каскадные таблицы стилей) содержит наборы стилевых параметров (правил форматирования) для документа HTML (страницы сайта).
Каскадные таблицы стилей (CSS) связываются с HTML-документом
следующими способами:

Вставка непосредственно в HTML-документ.
Таблица стилей заключается в контейнерный тег <style>, который помещается в контейнер <head>.
```
1

<head>
 <style>
   h1 {color:blue; font-size: 12pt}
   p {font-style: italic}
 </style>
</head>
```
Вставка в элемент.
Набор параметров стиля присваивается элементу с помощью атрибута style.
```
2

<body>                
  <span style="color:blue; font-size: 12pt">текст<span>
</body>  
```
Импорт.
Вставка таблицы стилей из внешнего файла с помощью команды:
@import url(URL-адрес файла таблицы стилей)
Оператор @import используется перед другими правилами таблицы стилей в контейнере <style>
```
3

<style>
  @import url(http://myserver.ru/mystile.css);
  body {color: black;}
</style>
```
Связывание с таблицей стилей, которая расположена в отдельном файле.
Используется ссылка на внешний файл таблицы стилей с помощью тега <link>, который помещен в контейнер <head>.
<link rel=stylesheet type=text/css href="URL-адрес файла таблицы стилей">
```
4

<head>
 <link rel=stylesheet type=text/css href="http://myserver.ru/mystile.css">
</head>
```

Связь CSS и HTML

<html>
 <head>
  <meta charset="UTF-8">
  <title>Связь HTML-документа с таблицей CSS</title>
  <style>
   h2 {font-family:Courier New; color:green;}
   p {font-size:14pt;}
  </style>
 </head>
 
 <body>
   <h1>Заголовок 1</h1>
   <h1 style="font-family:Arial; color:red">Заголовок 2</h1>
   <h2>Заголовок 3</h2>
   <p>Текст...Текст...</p>
 </body>
</html>