Глобальные стили

При использовании глобальных стилей свойства CSS
описываются в самом документе и располагаются в заголовке
веб-страницы. По своей гибкости и возможностям этот способ добавления
стиля уступает предыдущему, но также позволяет хранить стили в одном месте,
в данном случае прямо на той же странице с помощью
контейнера <style>,
как показано в примере 3.3.

Пример 3.3. Использование глобального стиля

HTML5CSS 2.1IECrOpSaFx

В данном примере задан стиль тега <h1>,
который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).

Рис. 3.1. Вид заголовка, оформленного с помощью стилей

Встроенные стили

Встроенные стили используются для применения уникальных правил стиля к элементу путем помещения правил CSS непосредственно в начальный тег. Его можно прикрепить к элементу с помощью атрибута style.

Атрибут style включает ряд пар свойств и значений CSS. Каждая пара «свойство: значение» разделяется точкой с запятой (;), так же, как вы пишете во встроенную или внешнюю таблицу стилей. Но все это должно быть в одной строке, то есть после строки с точкой с запятой не должно быть разрыва:

<h1 style="color:red; font-size:30px;">Это заголовок</h1>
<p style="color:green; font-size:22px;">Это параграф текста</p>

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

Способ 3. Каша-малаша

Вот мы и подошли к третьему и самому базовому описанию стилевых таблиц. Такой вариант изучают новички в самом начале своего тернистого пути в мир сайтостроения.

Встроенные стили подходят только для реализации самых простых и маленьких программ.

Если веб-приложение предполагает под собой описание множества стилевых характеристик для тегов или по размеру на равне или больше представленных в этой статье примеров, то я советовал бы вообще отказаться от внутренних стилей.

Посмотрите, как выглядит пример:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Встроенный</title>
 </head>
 <body>
   <article>
<h2 style=" color: #FF0000; text-shadow: 7px -3px 5px; border-bottom: 4px double #FF0000;">Яркий заголовок</h2>
<p style="font-size: 19px; font-family: Calibri; margin-left: 35px;" >Сенсационное содержание</p>
</article>
 </body>
</html>

Думаю, вы сами убедились, что хоть приложение и становится компактнее, разбор текста усложняется.

CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

body {background-color: #c5ffa0}a {color:#000060; font-weight: bold;}a:hover {color:#ff0000; font-weight: bold; text-decoration:none}h1 {color: #0000ff; font-size:18px}h2 {color: #ff00ff; font-size:16px}p {color: #600000; font-size:14px}

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

Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).

Делается это с помощью тега <link> (связь). Тег <link> многоцелевой и служит для «связывания» HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег <link> является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как <link> несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами <head></head> и не выводится браузерами на экран.

Тег <link> имеет атрибуты:

hrefrel

shortcut icon — Определяет, что подключаемый файл является иконкой.
stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
application/rss+xml — Файл в формате XML для описания ленты новостей.

type

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

<link rel=»stylesheet» href=»mystyle.css» type=»text/css»>

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type=»text/css»

Пример:

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

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с внешней или внутренней таблицей стилей, но никак не со встроенными стилями. Общий синтаксис следующий.

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.

Пример 6. Импорт CSS

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Импорт</title>
<style>
@import url(‘https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic’);
h1 {
font-family: ‘Lobster’, cursive;
color: green;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>

В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент <link> (пример 7).

Пример 7. Импорт в файле style.css

Импорт обычно применяется в тех случаях, когда доступ есть только к стилевому файлу и нет возможности отредактировать HTML-документ.

Определение таблицы стилей CSS

Для того, чтобы правила CSS могли быть применены к требуемым элементам
html-документа, сперва необходимо связать их с этим документом и, в частности, с самим элементом. В процессе
изучения языка HTML мы уже касались этого вопроса при изучении элементов
«style» и «link», а также
атрибутов style,
class и
id. Теперь же повторим все еще раз и в одном месте, но сперва рассмотрим
подробнее понятие таблицы стилей.

Таблица стилей CSS – это свод правил CSS,
собранных в одном месте. Если таблица стилей находится в отдельном файле, который обычно имеет расширение .css, то
этот файл называют внешней таблицей стилей, а в случае нахождения таблицы внутри элемента
«style», ее называют внутренней таблицей стилей. Имеется
возможность указывать свойства CSS в качестве значения атрибута style конкретного элемента разметки, в
этом случае говорят о встроенном стиле CSS.

Исходный пример.

Вот разметка простейшей HTML-страницы:

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Основы CSS</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<h1>Основы CSS</h1>
<p>CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки
(чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.</p>
<img src=»https://progtips.ru/wp-content/uploads/2020/10/img-1-1.jpg» />
<h2>Способы подключения CSS к документу</h2>
<p>Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:</p>
<ul>
<li>Когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента
<link>, включённого в элемент <head>.</li>
<li>Когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу
инструкцией @import в элементе<style>.</li>
<li>Когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в
элемент <head>.</li>
<li>Когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента.</li>
</ul>
<footer>(c) <a href=»https://ru.wikipedia.org/wiki/CSS» target=»_blank»>Википедия</a></footer>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>

<head>

<title>Основы CSS</title>

</head>
<body>

<h1>Основы CSS</h1>

<p>CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки

(чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.</p>

<h2>Способы подключения CSS к документу</h2>

<p>Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:</p>

<ul>

<li>Когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента

<li>Когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу

инструкцией @import в элементе<style>.</li>

<li>Когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в

элемент <head>.</li>

<li>Когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента.</li>

</ul>

<footer>(c) <a href=»https://ru.wikipedia.org/wiki/CSS»target=»_blank»>Википедия</a></footer>

</body>
</html>

Вот как такая страница выглядит в браузере:

В разных браузерах, страница может отображаться немного по-разному, но в целом она будет такой, как на картинке выше.

Как-то изменить внешний вид страницы, средствами HTML мы не можем, а ведь хочется? Согласитесь, обычно сайты выглядят более презентабельно. И вот тут в дело вступает CSS.

Изменения в файле index.html

Разберемся, что изменилось в index.html. В <head> появилась строка <link rel=»stylesheet» href=»style.css»>. Таким образом подключаются файлы стилей, здесь мы подключили файл style.css.

В теге <body> изменилось все. Появился новый тег <header>, он говорит о том, что здесь будет содержаться вся верхняя часть сайта, так называемая «шапка» сайта. А в теге <header> есть тег <h1>, в который пишется главный заголовок отображаемый на странице. h1 — это очень важный тег для поисковых систем (таких как Яндекс и Google).

h1 должен быть только один на всей странице сайта. Также, есть h2, h3, h4, h5, h6, их может быть сколько угодно на странице, но они должны отображать логику страницы: h2 — это второй заголовок, h3 — третий заголовок и т.д.

У тега header есть id — это идентификатор тега. У тега h1 есть class. Для чего нужны id и class Вы увидите сейчас в style.css. Здесь только сразу скажу, что конкретный id должен быть только один на странице. То есть id=»header» указывать уже нигде нельзя, можно будет указать, например, id=»header-2″.

Значения атрибутов class могут быть одинаковыми у сколь угодно элементов (тегов).

Обратите внимание на полностью бесплатный курс HTML, на котором Вы быстро сможете стать экспертом верстки

Внутренняя таблица стилей

Стили пишутся в самом HTML-документе внутри элемента <style>, который в свою очередь располагается внутри <head>. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной веб-странице (пример 3).

Пример 3. Использование <style>

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Стили</title>
<link rel=»stylesheet» href=»https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic»>
<style>
h1 {
font-family: ‘Lobster’, cursive;
color: green;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

В данном примере задан стиль элемента

, который затем можно повсеместно использовать на данной веб-странице (рис. 1)Обратите внимание, что мы можем спокойно комбинировать со

Рис. 1. Вид заголовка, оформленного с помощью стилей

Связанные стили

При использовании связанных стилей описание
селекторов и их значений располагается в отдельном файле, как правило, с
расширением css, а для связывания документа с этим файлом применяется
тег <link>.
Данный тег помещается в контейнер <head>,
как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5CSS 2.1IECrOpSaFx

Значение атрибута тега <link> — rel остаётся
неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно.
Заметьте, что таким образом можно подключать таблицу стилей, которая находится
на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в
примере 3.2.

Пример 3.2. Файл со стилем

Как видно из данного примера, файл со стилем не хранит никаких
данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит
только ссылку на файл со стилем, т. е. таким способом в полной мере
реализуется принцип разделения кода и оформления сайта. Поэтому
использование связанных стилей является наиболее универсальным
и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном
файле, а в HTML-документах указывается только ссылка на него.

Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом
документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и
возможностям этот способ добавления стиля уступает предыдущему, но также
позволяет размещать все стили в одном месте. В данном случае, прямо в теле
документа, с помощью контейнера <STYLE>, как
показано в примере 2.3.

Пример 2.3. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»
«http://www.w3.org/TR/html4/strict.dtd»><html><head><meta
http-equiv=»Content-Type» content=»text/html;
charset=utf-8″><title>Глобальные
стили</title><style type=»text/css»>H1 {
font-size: 120%; font-family: Verdana, Arial, Helvetica,
sans-serif; color: #336
}</style></head><body><h1>Hello,
world!</h1></body></html>

В данном примере определен стиль тега <H1>,
который затем можно повсеместно использовать на данной веб-странице.

Замечание

Таблица глобальных стилей может размещаться не только внутри
контейнера <HEAD>, но также в любом месте кода
HTML-документа.

Разбор файла style.css

body обращается к <body> в index.html, и задает ему серый задний фон (background-color: gray;). Здесь background-color называется CSS-свойством, а gray — это значение CSS-свойства.

Аналогично #header обращается к id=»header», а .h1 обращается к class=»h1″. То есть через # обращаемся к id, а через точку обращаемся к class.

Здесь body, #header и .h1 называются CSS-селекторами.

Вообще, в id и class можно задавать любые произвольные значения, хоть id=»abcdefg». Но желательно, чтобы их значения отображали целевое назначение html-элемента (тега).

Свойства CSS пишутся на английском: font-size — размер шрифта, color — цвет, text-align — выровнять текст и т.д.

Подключение стилей через тег «Style»

Стили можно подключать непосредственно на странице web-сайта. Между тегами head, добавьте тег style. Внутри этого тега, можно применить стили к именно той странице, на которой они выводятся.

Практически это выглядит следующим образом:

<style>
p {
   line-height:2em;
}
</style>

То есть, все параграфы, должны иметь межстрочный интервал 2em. И это будет действовать на всех страница, на которых будут выводиться данные строчки.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Как подключить таблицу стилей на странице</title>
<style>
p { line-height:2em; }
</style>
</head>

<body>
....
</body>
</html>

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

Существует 3 способа подключения CSS к HTML. Рассмотрим каждый способ по порядку.

Способ №1 — Создаем CSS-файл и подключаем его к HTML-файлу

Вы уже знаете, что все HTML-файлы имеют расширение .html. Например:

index.html
contacts.html
page-2.html

Точно также для CSS-стилей мы можем создать отдельный файл, только с расширением .css. Например, style.css.

На картинке ниже показан пример, как можно подключить файл style.css к файлу index.html.

Как видите, в теге <head> нам необходимо написать следующее:

<link> — это специальный тег, который используется для подключения CSS-стилей.
rel = «stylesheet» — это аттрибут rel со значением «stylesheet», что значит таблица стилей. То есть таким образом мы говорим браузеру, что мы хотим подлючить таблицу стилей.
href = «style.css» — в аттрибуте href мы прописали путь к файлу style.css.

Как бы и все 🙂 Файл style.css будет подключен к файлу index.html.

Теперь сделайте это на практике — всего 3 шага:

Шаг 1: Создадим 2 файла: index.html и style.css.

Структура файла index.html

Структура файла style.css

Шаг 2: Подключаем файл style.css к файлу index.html.

Для этого в файле index.html добавьте тег <link> c необходимыми аттрибутами:

Шаг 3: Открываем файл index.html в браузере. В браузере Вы увидите 2 текста параграфов, написанные:

шрифтом: Georgia
размером шрифта: 18px
цветом: зеленым

Поздравляем! Вы уже умеете подключать CSS к HTML.

Следующие 2 способа подключения CSS мы опишем в следующей статье.

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.

Внутренняя таблица стилей

Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег <style> позволяет записывать внутри себя код в формате CSS:

Пример: Внутренняя таблица стилей

Результат
HTML-код
Попробуй сам »

В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h1>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.

Атрибут style.

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

Пишется так:

<p style=»»> это параграф с индивидуальным стилем </p>

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента <p>

Ну например:

<p style=»color: #ff0000; font-size:12px»> это параграф с индивидуальным стилем</p>

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

По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.

Пример:

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

Что это такое?

CSS (от англ. Cascading Style Sheets) – формальный язык настройки внешнего вида страницы, написанной на языке разметки. Существует 3 способа, как подключить CSS файл к HTML. Каких-то особенных знаний для этого не нужно, как и нельзя четко выделить, какой из методов подключения CSS к HTML наиболее приемлем – просто следуйте инструкции и используйте удобный для вас.

Общая структура кода с использованием селекторов в учебниках представлена следующим образом:

селектор {

свойство: значение;

… и т.п.

}

Реализация каждого способа особенная. Разбирать будем на примере такого кода:

Задача подключаемых стилей – изменить цвет тега на красный.

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

Таблицы стилей делятся на внешние и внутренние.

Внешние таблицы располагаются в отдельных файлах с расширением .css (например style.css)

1. CSS-файл может быть подключен на страницу при помощи тега
<link> , который должен находиться в секции
<head> HTML-страницы – это самый часто используемый способ подключения CSS:

2. Другой путь, это использование правила
@import . Чтобы это правило работало оно должно находиться в таблице стилей (внутренней или внешней), в самом начале, перед остальными правилами.

Обычно @import используется внутри CSS-файлов. Также эта директива используется для подключения шрифтов.

3. Внутренние таблицы стилей встраиваются в HTML-страницу, в секцию
<head> , и находятся они внутри тегов
<style>

4. И последний способ подключения CSS – это встроенные стили. Они пишутся непосредственно внутри HTML-тегов в атрибуте style. Такие стили, действуют только на тот тег, в котором написаны.

Привязка CSS к HTML — внешние стили

Внешние стили – это один из самых распространенных способов подключения стилей CSS.

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

Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом <link> с указанием атрибутов href и rel=»stylesheet»:

<!DOCTYPE html>
<html>
    <head>
        <title>Пример</title>
        <link rel="stylesheet" href="/css/tutorial/example.css">
    </head>
    <body>
        <h1>Встроенная стилизация</h1>
        <p id="intro">Позволяет вам определять стили сразу для всей страницы.</p>
        <p class="colorful">Этот абзац оформлен при помощи класса.</p>
    </body>
</html>

Теперь в HTML-файле нет никакой информации относительно стилизации элементов. Подключение CSS файла позволяет не загромождать стилями исходный код веб-страницы.

Посмотреть демо

Способы подключения CSS

Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами <style>. Или хранить в отдельном файле .css — и применять для многих страниц. Это внутренние и внешние таблицы стилей. Их еще называют глобальными и связанными.

Но кроме этих двух обычных способов, существует «нестандартный» метод, позволяющий прописывать стили непосредственно отдельным элементам. Выглядит примерно так:

Это так называемый встроенный стиль. В данном случае атрибут style относится к HTML, а код CSS прописывается внутри скобок. Но нет особого смысла прописывать стили именно таким образом. Просто технически такая возможность существует, ее лучше знать, вдруг когда-нибудь понадобится. Если же мы хотим грамотно применить стиль только к определенному элементу (например, только к одному абзацу на отдельной странице), то в таблице стилей следует создать особый тип стиля, который называется селектором класса — он форматирует только те элементы, к которым мы применим этот класс.

Например, в случае данного абзаца (p) в таблице стилей создается селектор класса, например, skill:

А затем тег этого абзаца трансформируется из

Так можно грамотно подключать стили к документу вместо того, чтобы прописывать встроенные стили. У этого метода ряд очевидных преимуществ: гораздо удобнее хранить стили изолированно и отдельно от документа: так их легче редактировать и применять к разным документам (вдруг вы захотите использовать тот же класс skill для еще одного абзаца?). Но главное — так соблюдается концептуальное разделение контента (HTML) и оформления (CSS).

Внутренние таблицы стилей

Возьмем тот же простой стиль, который определяет размер шрифта (font-size) и цвет (color) для абзацев (p) на странице.

Этот код можно внедрить непосредственно в конкретную HTML-страницу, обрамив тегами <style>…</style>. Все это вставляется в код страницы сразу после заголовка (тег <title>).

Таким образом, наша страница будет теперь выглядеть следующим образом:

…и так далее.

Полный код такой страницы:

Обратите внимание на оформление кода CSS. На самом деле не обязательно начинать каждое объявление с новой строки или оставлять отдельные строки для фигурных скобок

Просто принято оформлять код именно так для лучшей читаемости, при этом перед объявлениями ставится табуляция или несколько пробелов.

Сейчас мы создали внутреннюю таблицу стилей, которую в будущем сможем редактировать по своему желанию: добавлять новые правила, то есть селекторы и объявления для любых элементов на странице. Более того, можно даже вынести ее в отдельный файл .css — и применить сразу для многих HTML-страниц. Это уже будут внешние таблицы стилей.

Внешние таблицы стилей

Внешние таблицы стилей хранятся в отдельном файле с расширением .css. Вы можете создать этот файл хоть в Блокноте, главное — сохранить под правильным расширением. Содержание этого файла не отличается от кода, который мы написали для внутренних стилей и поместили между открывающим тегом <style> и закрывающим </style>:

То есть в файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов <style> можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.

Теперь вместо тегов <style> в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка (<title>), где мы раньше размещали встроенные стили:

Он будет выглядеть так:

В данном примере не указан путь до файла styles.css, потому что он лежит в той же папке, что и документ HTML. Если же файл находится в другой папке или вообще на другом сервере, то следует указать полный абсолютный или относительный путь к нему. В случае нашего сервера достаточно относительного пути с указанием только папки, где лежит файл. В случае другого сервера потребуется полный абсолютный путь с указанием доменного имени.

Прелесть внешних стилей в том, что на один и тот же стиль могут ссылаться сколько угодно страниц HTML с любого количества доменов. То есть чтобы поменять шрифт или другим образом изменить внешний вид сотен или тысяч страниц на сотнях или тысячах сайтов, мы просто меняем одну строчку в файле .css.

Взаимодействие подключений

В спецификации css прописана определенная иерархия для перечисленных способов подключения стилей. Так, разберем вначале первые 3.

Если структурировать по приоритетам, то выше стоят встроенные стили, а далее глобальные и внешние. При этом их можно миксовать, т.е. в одном веб-сервисе использовать одновременно несколько вариантов стилевого описания.

Что касается импорта, то он функционирует только с внешним и глобальным подключением стилевых таблиц.

Надеюсь, вам была полезной эта публикация. Делитесь впечатлениями о моем блоге с друзьями и подписывайтесь на обновления. Пока-пока!

Прочитано: 1142 раз