Сушществует несколько способов подключения CSS стилей на страницу. Давайте более подробно рассмотрим каждый из них.
При таком подходе css стили хранятся в отдельном файле или нескольких файлах. Каждый такой файл подключается при помощи тега <link>.
Как правило, тег/теги link размещаются между открывающим и закрывающим тегом <head>, хотя и может распологаться в любой части HTML документа.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://your-site.example/style.css">
<link rel="stylesheet" href="http://your-site.example/main.css">
</head>
<body>
.....
</body>
</html>
Этот тег имеет два обязательных аттрибута:
Язык HTML позволяет хранить css стили прямо внутри HTML документа.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Подключение стиля</title>
<!--- Первое подключение стилей -->
<style>
h1 {
font-size: 36px;
color:red;
}
</style>
</head>
<body>
<!--- Второе подключение стилей -->
<style>
h1 {
font-family: Times, serif;
}
</style>
<h1>Заголовок 1</h1>
</body>
</html>
В прошлой статье мы уже рассмотрели этот подход. Рассмотрим его еще раз.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Подключение стиля</title>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1>
</body>
</html>
Внутри тега style мы можем указать одно или несколько правил, которые будут относиться только к текущему элементу.
Все эти подходы могут могут применяться одновременно.
