Применение CSS
Существует три способа добавления стилей CSS в HTML-документ.
- Инлайн-стиль — задание атрибута
styleдля HTML-элементов - Внутренний стиль — использование элемента
<style>в секции<head> - Внешний стиль — создание внешнего CSS-файла
Инлайн-стиль
Для определения правил стиля вы можете использовать атрибут style любого HTML-элемента. Эти правила можно применить только к данному элементу. Атрибут style может содержать любое свойство CSS.
Пример создания инлайн-стиля для HTML-документа:
Пример инлайн-стиля CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Результат
Теперь разберём приведённый выше пример, в котором использован инлайн-стиль. Внутри тега <h2> мы указали style="color: #1c87c9", что означает: наш заголовок должен иметь цвет #1c87c9.
То же самое мы сделали с тегом <p>. Внутри тега мы указали color: #8ebf42; font-size: 15px, что означает: текст между открытым тегом <p> и закрытым </p> будет иметь цвет #8ebf42, а размер шрифта — 15px.
Внутренний стиль
При использовании внутреннего стиля каждый HTML-файл содержит CSS-код, необходимый для оформления страницы. Вы просто размещаете CSS-код внутри тегов <head> и </head> каждого HTML-файла, который хотите стилизовать. Пример ниже иллюстрирует это.
Вносимые изменения повлияют только на одну страницу. Если вам нужно стилизовать несколько страниц, изменения придётся вносить в каждую из них по отдельности.
В примере ниже показано, что абзац будет белым, а фон страницы — #1c87c9.
Пример создания внутреннего стиля для HTML-документа:
Пример внутреннего стиля CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Внешний стиль
Внешний стиль широко используется для применения общих стилей ко всему сайту. Он подразумевает создание внешнего CSS-файла, содержащего всю информацию о стилях. Создать такой файл можно с помощью любого текстового или HTML-редактора, например «Блокнот» или «Sublime Text».
CSS-файл содержит только CSS-код, и вам нужно просто сохранить его с расширением .css. Чтобы подключить внешнюю таблицу стилей к веб-странице, используйте тег <link> внутри секции <head> HTML-документа. Каждая веб-страница должна быть связана с таблицей стилей.
При использовании внешней таблицы стилей все HTML-файлы связаны с одним CSS-файлом, что обеспечивает единообразие внешнего вида. Если вы хотите изменить стиль веб-страниц, вам нужно внести соответствующие изменения только в один .css-файл.
Пример создания внешнего стиля для HTML-документа:
Пример внешнего стиля CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Практика
Какие существуют способы подключения CSS в HTML?