4 436 
Оставить комментарий
Сохранить статью:
Как? Существуют разные способы подключения CSS-файла для добавления стилей на HTML-странице. Можно использовать тег style, написать отдельный файл или использовать JavaScript.
На что обратить внимание? От способа подключения зависит быстродействие страницы и еще ряд параметров. Отдельно стоит отметить, что при подключении нескольких стилей возможен конфликт приоритизации, поэтому важно сделать все правильно.
В статье рассказывается:
- Задачи подключения файла CSS
- Добавление CSS файла через теги
- Подключение CSS-файла через внешние таблицы
- Приоритеты стилей CSS
- Другие способы подключения CSS-файла
-
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.Бесплатно от Geekbrains
Задачи подключения файла CSS
HTML используется для разработки общего вида веб-страницы, а язык программирования каскадных стилей CSS определяет, как будут вести себя те или иные элементы. Сценарий CSS может быть размещен в виде отдельного файла или включен непосредственно в HTML.
Выбранный вариант размещения CSS влияет на скорость загрузки страницы, при этом существуют особенности для случаев использования нескольких решений. В частности, применение одновременно внешнего и инлайн-стиля, в которых указаны разные параметры, приведет к отображению свойств, прописанных в последнем. Он имеет более высокий приоритет, поэтому указание других значений тех же параметров во внешнем варианте сделает его неработоспособным.
Добавление CSS файла через теги
Подключение CSS при помощи внешнего файла стилей через тег link
Оптимальным вариантом формирования общего стиля страницы является указание параметров во внешнем сценарии CSS через тег <link>. Для этого необходимо указать в разделе head страницы следующие значения:
<link href=»URL_адрес_CSS_файла» rel=»stylesheet» type=»text/css»>
В параметре href следует прописать URL адрес файла, в котором хранятся параметры CSS. Значения rel=»stylesheet» и type=»text/css» говорят о том, что соответствующий файл содержит таблицу стиля в виде CSS.
В принципе, для одной страницы можно задать несколько сценариев, хранящихся в разных файлах. Однако в этом случае возрастает как общий размер данных, который пользователю необходимо загрузить с сервера для отображения страницы, так и время для этого действия.
Подключение CSS через тег style
Такой алгоритм используется в случае, когда определённый стиль должен быть применён к отдельным частям страницы, и он не нужен для других разделов сайта.
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Скачивайте и используйте уже сегодня:
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
В произвольной области блока <head> и <body> HTML нужно включить тег <style>, и уже в нем непосредственно прописываются необходимые параметры:
<style type=»text/css»>
/* CSS код */
</style>
CSS стили для отдельного тега со значением style
Значение style применяется в том случае, когда требуется указать параметры стиля для отдельного элемента страницы. Инструкция выглядит следующим образом:
<p style=»CSS_код»>текст</p>
Такие варианты иначе еще именуют inline-стилями. В общем случае они получают более высокий приоритет в сравнении с параметрами, указанными в отдельном CSS через тег <style>, однако есть частные случаи.
Применение Inline-стилей характерно и для тех случаев, когда содержание страницы корректируется при помощи визуальных редакторов WYSIWYG.
Стили CSS при помощи JavaScript
Сценарии, созданные на основе языка программирования JavaScript, можно встретить на всех современных сайтах. С помощью этого языка на основе библиотеки jQuery можно задать множество параметров, позволяющих подключить CSS-файл к HTML-элементам. Так, параметр .css() оправляет CSS-стиль для отдельного объекта, .hide() указывает на CSS-свойство display: none; (то есть скрытие объекта) и т. д.
При указании функции таким способом установки сценария указываются в style-атрибуте тега.
Внимательнее ознакомьтесь с примечаниями к коду, в которых объясняется, в связи с чем для каждого частного случая используется тот, а не иной способ подключения.
<!DOCTYPE html>
<html>
<head>
<title>Присоединение сценария CSS к странице HTML различными вариантами </title>
<!—присоединение сценария CSS. В нем содержатся основной стиль страницы —>
<!— (шрифт, общие разделы, объекты вёрстки и т. п.) —>
<!—Дает возможность без труда видоизменять стиль сайта, поскольку —>
<!— при модификации параметров объекта в файле также меняется его стиль на каждой странице сайта —>
<link href=»https://example.com/css/style.css» rel=»stylesheet» type=»text/css»>
</head>
<body>
<p>Сценарий для ряда моделей телефонов от Samsung.</p>
<!—Интеграция сценария CSS при помощи тега style. Таблицы с разделом model_table приобретают свой собственный стиль —>
<!— и отображаются в пределах отдельно взятой страницы. Здесь можно применить тег style —>
<style type=»text/css»>
.model_table {
margin: 10px;
width: 100%;
}
.model_table tr:nth-child(even) {
background-color: #efefef;
}
.model_table tr:hover {
background-color: #cfcfcf;
}
</style>
<!—Стили при помощи JavaScript. Сценарий применяется, поскольку для указания стиля таблице —>
<!—требуется совершение пользователем какого-то действия (в частности, клика по объекту). —>
<!—Нажатие кнопки приведет к активизации сценария, в котором для таблицы указан параметр display: none; —>
<button id=»model_table_hide_btn»>Свернуть модели апреля</button>
<table id=»model_table_winter» class=»model_table»>
<tr>
<th colspan=»2″>Модели апреля</th>
</tr>
<tr>
<td>Samsung Galaxy A10</td>
<td>2019, апрель</td>
</tr>
<tr>
<td>Samsung Galaxy A30</td>
<td>2019, апрель</td>
</tr>
<tr>
<td>Samsung Galaxy A50</td>
<td>2019, апрель</td>
</tr>
</table>
<table class=»model_table»>
<tr>
<th colspan=»2″>Модели мая</th>
</tr>
<tr>
<td>Samsung Galaxy A20</td>
<td>2019, май</td>
</tr>
<tr>
<td>Samsung Galaxy A40</td>
<td>2019, май</td>
</tr>
</table>
<!— Inline стили. Поскольку требуется задать собственный стиль для отдельного объекта страницы, —>
<!— указываем стили при помощи style значение тега —>
<p style=»text-align: right; font-size: 12px;»>*В таблице написаны исходные сведения.</p>
<!—Сценарий щелчка по кнопке свертывания таблицы —>
<script type=»text/javascript»>
document.getElementById(‘model_table_hide_btn’).addEventListener(«click», function () {
document.getElementById(‘model_table_winter’).style.display = ‘none’;
});
</script>
</body>
</html>
Скачать файлПодключение CSS-файла через внешние таблицы
Внешние сценарии стилей указываются в файле с расширением .css. Их можно написать даже в стандартном Notepad. Для подключения файла стилей CSS нужно лишь указать корректное расширение. Инструкции, указанные в нем, аналогичны тем, которые заданы для инлайн-стиля и содержатся в разделе между открывающим тегом <style> и закрывающим </style>:
p {
color: red;
font-size: 3em;
}
Таким образом, в файле CSS можно указывать инструкции, заданные в инлайн-стиле. Аналогичным образом параметры, написанные для приукрашивания, дублируются в файле сценария CSS. Стили, указанные в отдельном файле, при этом могут использоваться для указания параметров, предназначенных для нескольких страниц или даже для всего сайта.
В HTML-файле необходимо указать вместо тегов <style> путь, по которому размещается внешний файл CSS. Он пишется сразу после тега (<title>), где в предыдущем случае указывались внутренние параметры стиля.
<link href=»styles.css» rel=»stylesheet»>
Инструкция будет иметь следующий вид:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>Стили Skillbox</title>
<link href=»styles.css» rel=»stylesheet»>
</head>
<body>
<p>Добрый день!</p>
</body>
</html>
на обучение «Инженер-программист» до 12 мая
В описываемом случае отсутствует путь к сценарию styles.css, так как последний размещен в одной директории с HTML. В других случаях нужно обязательно указывать полный либо относительный path к файлу стилей в другой директории или на ином сервере. В нашем примере можно ограничиться путём, в котором прописывается лишь название папки со сценарием.
Чтобы применить параметры стороннего файла стиля к своей странице, напишите в ней абсолютный путь к соответствующему сценарию:
<link href=»https://site.туе/styles.css» rel=»stylesheet»>
Несмотря на все удобства, очевидно, что при таком способе пользователь оказывается зависим от автора указанного в HTML сценария. Если скрипт будет изменен или удален, ссылка на таблицу окажется неработоспособной. Рекомендуется копировать файл .css на собственный сервер, тогда дизайн страницы не будет зависеть от действий сторонних пользователей.
Приоритеты стилей CSS
Вопрос о приоритетах актуален постольку, поскольку разные значения одной и той же функции могут быть указаны в сценарии на стороннем либо на собственном сервере, в блоке <style> в head страницы, в стиле style в самом документе. Чтобы понять, какое из значений будет использовано, рассмотрим условный вес каждого параметра. Если стиль указан:
- непосредственно в теге (inline-способ): 1 000 условных единиц.
- в <style> или в стороннем файле, обращение по id: 100 у. е.
- в <style> или в стороннем файле, запрос по class: 10 условных единиц.
- в <style> или в стороннем файле, запрос по наименованию тэга (p, h1 и так далее): 1 у. е.
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
В случае, когда селектор имеет несколько указаний (допустим, класс + тег), то условные веса суммируются, в нашем случае – 10 + 1 = 11. Когда браузер получает инструкции от нескольких сценариев, то применяется тот, который имеет больший условный вес. При равенстве показателей используется тот, который описан позднее других.
Таким образом, при использовании двух сценариев:
<link href=»ссылка на сторонний ресурс» rel=»stylesheet>
<link href=»ссылка на сценарий на собственном ресурсе» rel=»stylesheet>
Если в каждом содержится запрашиваемый браузером параметр, будет использовано значение в файле на собственном ресурсе. А когда в одном сценарии есть два равнозначных значения, применится то, которое указано ниже.
Изменить значения приоритетов поможет приложение !important. Можно принять вносимые им изменения за + 10 000 условных единиц к весу. Однако здесь есть важный нюанс. При использовании нескольких стилей с !important, их приоритет может выглядеть как 10 001 и 10 010, то есть сформируется собственная их система, помимо уже установленной.
Соответственно, нужно очень осторожно делать эти манипуляции, если требуется исправить только одну ошибку. Если же возникает необходимость в использовании !important для более чем одного бага, можно с уверенностью заключить, что какие-то исходные параметры заданы неверно.
Другие способы подключения CSS-файла
Существуют фреймворки, которые используют CSS без применения CSS-сценариев в их традиционном формате. Одним из примеров таких стилей является TailwindCSS. По завершении инсталляции он сразу может использоваться в приложении на глобальном уровне. Пользователю нужно лишь указать добавленные классы в произвольной области приложения, отдельного подключения сценария не требуется.
Как видите, нельзя однозначно сказать, как лучше подключить CSS-файл к сайту. В одних случаях целесообразней использование инлайн-стиля, в других – ссылки на внешний файл. В любом случае для работоспособности кода следите за тем, чтобы все инструкции указывались правильно, а наилучший инструмент для себя вы выберете сами по мере накопления опыта.
Разберем 11 самых важных жизненных вопросов
Только до 
Эксклюзивные лекции по основам программирования
