Правила CSS Правила CSS пишутся на формальном языке CSS . Правила могут располагаться как в самом Web – документе, внешний вид которого они описывают , так и во внешних файлах , имеющих формат CSS . Формат CSS — это текстовый файл , в котором содержится перечень правил CSS и комментариев к ним .
Стили CSS могут быть подключены или внедрены в описываемый ими Web – документ четырьмя способами :
Вынесение таблицы стилей в отдельный файл
Таблицу стилей вынести в отдельный файл . Файл с таблицей стилей обычно имеет расширение css и может редактироваться любым текстовым редактором .
Создадим файл в текстовом редакторе style.css и подключим его к основному документу index.html .
Содержимое файла style.css
@charset "utf-8" /* Кодировка файла */ /* Так можно вставить комментарий */
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height auto;
}
}
body { /* Стиль для всего документа */ font-size: 16pt;
color: black;
font-family: "Verdana";
}
p { /* Стиль для всех абзацев */ font-size: 12pt;
color: black;
font-family: "Arial";
}
txt { /* Стиль для элемента с txt */ color: green;
}
.text { /* Стиль для класса text */ color: red;
}
Содержимое файла index.html
<!doctype html><html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключения стилей CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Текст 1</p> <!-- Цвет по умолчанию --><p id="txt">Текст 2</p> <!-- Зеленый текст 12pt --><p class="text">Текст 3</p> <!-- Красный текст 12pt --><div class="text">Текст 4</div> <!-- Красный текст 16pt -->
</body>
</html>
Все определения стилей можно собрать в одном месте. В этом случае стили указываются между тегами <style> и </style>. Сам тег <style> должен быть расположен в разделе HEAD между тегами <head> и </head>.
Подключения стилей CSS в раздел HEAD
<!doctype html><html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключения стилей CSS в раздел HEAD</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height auto;
}
}
body { /* Стиль для всего документа */ font-size: 16pt;
color: black;
font-family: "Verdana";
}
p { /* Стиль для всех абзацев */ font-size: 12pt;
color: black;
font-family: "Arial";
}
txt { /* Стиль для элемента с txt */ color: green;
}
.text { /* Стиль для класса text */ color: red;
</style>
</head>
<body>
<p>Текст 1</p><p id="txt">Текст 2</p><p class="text">Текст 3</p><div class="text">Текст 4</div>
</body>
</html>
Правила CSS Правила CSS пишутся на формальном языке CSS . Правила могут располагаться как в самом Web – документе, внешний вид которого они описывают , так и во внешних файлах , имеющих формат CSS . Формат CSS — это текстовый файл , в котором содержится перечень правил CSS и комментариев к ним .
Стили CSS могут быть подключены или внедрены в описываемый ими Web – документ четырьмя способами :
Вынесение таблицы стилей в отдельный файл
Таблицу стилей вынести в отдельный файл . Файл с таблицей стилей обычно имеет расширение css и может редактироваться любым текстовым редактором .
Создадим файл в текстовом редакторе style.css и подключим его к основному документу index.html .
Содержимое файла style.css
@charset "utf-8" /* Кодировка файла */ /* Так можно вставить комментарий */
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height auto;
}
}
body { /* Стиль для всего документа */ font-size: 16pt;
color: black;
font-family: "Verdana";
}
p { /* Стиль для всех абзацев */ font-size: 12pt;
color: black;
font-family: "Arial";
}
txt { /* Стиль для элемента с txt */ color: green;
}
.text { /* Стиль для класса text */ color: red;
}
Содержимое файла index.html
<!doctype html><html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключения стилей CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Текст 1</p> <!-- Цвет по умолчанию --><p id="txt">Текст 2</p> <!-- Зеленый текст 12pt --><p class="text">Текст 3</p> <!-- Красный текст 12pt --><div class="text">Текст 4</div> <!-- Красный текст 16pt -->
</body>
</html>
Все определения стилей можно собрать в одном месте. В этом случае стили указываются между тегами <style> и </style>. Сам тег <style> должен быть расположен в разделе HEAD между тегами <head> и </head>.
Подключения стилей CSS в раздел HEAD
<!doctype html><html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Подключения стилей CSS в раздел HEAD</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height auto;
}
}
body { /* Стиль для всего документа */ font-size: 16pt;
color: black;
font-family: "Verdana";
}
p { /* Стиль для всех абзацев */ font-size: 12pt;
color: black;
font-family: "Arial";
}
txt { /* Стиль для элемента с txt */ color: green;
}
.text { /* Стиль для класса text */ color: red;
</style>
</head>
<body>
<p>Текст 1</p><p id="txt">Текст 2</p><p class="text">Текст 3</p><div class="text">Текст 4</div>
</body>
</html>
