Вернуться ко всем урокам
css
Способы добавления стилей
CSS
Обновлено
13.09.2023
Просмотров
446
Время прочтения
15 мин.
Сложность
Прежде чем говорить о способах добавления стилей в ваш html документ, стоит коснуться трёх важнейших правил в работе CSS, которые вы должны обязательно знать и соблюдать. О первом из них вы уже знаете, потому что мы несколько раз упоминали о нём, изучая HTML.
Разделение разметки и стилей
HTML должен быть свободен от правил описания внешнего вида тегов. Напомним, что в HTML стили для тегов описываются при помощи атрибута style. Также следует избегать размещения правил CSS в теге <style>, хотя есть здесь одно исключение, о котором поговорим в разделе продвинутого обучения. Пока что вы должны запомнить: HTML это данные, которые будут отображаться, т.е. текст, картинки, атрибуты, которые важны для работы сайта, а CSS это то, как эти данные будут выглядеть.
Обращение к тегам через классы
Данное правило появилось вследствие развития веба и усложнения разрабатываемых сайтов. Подход, при котором мы в CSS обращались напрямую к тегам по именам, влёк за собой множество проблем, и в итоге от него отказались вовсе. После стали появляться различные методологии, согласно которым разработчик должен писать классы для тегов по определённым правилам, а в CSS по этим классам описывать стили. Это может быть не совсем понятно сейчас, однако позже вы разберётесь в вопросе. Пока что просто запомните, что напрямую обращаться к тегам и описывать для них правила CSS не следует.
Централизованное хранение
Если разрабатывая свой личный маленький сайт вы можете хранить все ваши файлы как попало, скажем, в одной папке, смешивая изображения, HTML и CSS, то при работе даже на маленьком коммерческом проекте такой подход недопустим. Во-первых, изначально небольшой сайт может за год разрастись до приличных размеров, и тогда вы будете вынуждены искать нужные вам изображения, иконки и другие ресурсы в той большой «куче» файлов, которую сами соорудили. Во-вторых, профессионализм разработчика заключается в простоте и понятности создаваемого им проекта, написанного им кода. Если многие смотрят на проект, который вы делали, и понимают логику его организации — это показывает вас с хорошей стороны. Стремитесь к лучшему. В-третьих, подход централизованного хранения элементарно экономит время. Вы, и не только вы, будете всегда знать, что где искать. Так, общепринятым правилом является разделение необходимых компонентов сайта по директориям согласно назначению. Более подробно мы поговорим об этом позже, а пока что достаточно будет запомнить, что стили следует хранить в отдельной директории. Такую директорию чаще всего называют /css.
Способы добавления CSS в документ
Для добавления стилей в документ существует три способа, и мы поговорим обо всех них. Однако уже сейчас стоит запомнить, что единственным правильным является лишь один — добавление стилей через тег <link>. Другие способы могут использоваться для каких-либо учебных работ, когда организация структуры проекта вовсе не важна, а нужно просто быстро применить стиль к элементу.
Связанные (внешние) стили
Это тот самый единственный правильный способ подключения стилей. Весь код CSS помещается в отдельном файле, а связывание его с HTML происходит при помощи тега <link> и его атрибутов. Такое подключение обычно выполняется внутри тега <head>, однако плагины могут подключать свои стили там, где они вызываются, т.е. в любом месте <body>. Размещение <link> в <head> нужно для того, чтобы стили применились прежде, чем начнётся загрузка разметки. Иначе пользователь увидит сначала контент страницы с дефолтным отображением, а затем, когда файл стилей загрузится, веб-страница резко изменит свой внешний вид. Это происходит из-за того, что браузер интерпретирует код HTML по порядку сверху вниз. Соответственно, он загружает <body> и тут же его отображает. Если стилей в тот момент ещё нет (они подключены внизу), то мы видим «голый» <body>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные
тексты. За, имени всемогущая точках коварных он, запятых выйти буквенных то.</p>
</body>
</html>
В примере выше показан способ подключения стилей. Атрибут rel со значением stylesheet сообщает HTML-документу, что находящийся по адресу href файл является таблицей стилей и его следует обрабатывать именно таким образом. Путь к файлу стилей, разумеется, может быть как абсолютным, так и относительным. В случае с нашим примером он относительный, т.е. ориентирование начинается из директории вызывающего файла. Стоит отметить, что порядок подключения файлов CSS имеет значение. В ходе урока про инструменты разработчика вы могли догадаться, что нижние правила CSS «затирают» верхние, т.е. если мы два раза подряд укажем font-size, то применится именно нижняя строка. Поскольку файлы CSS будут скачаны и применены последовательно, стили из файла style.css окажутся ниже. В случае совпадения правил для тегов в bootstrap.css и в style.css, актуальными будут style.css . В этом, по сути, и заключается принцип каскадности в CSS. Поэтому внимательно следите за тем, что и когда вы подключаете. Разумеется, сначала мы должны подключать сторонние библиотеки с их стилями, а в последнюю очередь наши собственные стили, чтобы они в случае необходимости перезаписали все прежние правила.
Глобальные стили
Так называются стили, размещённые в теге <style> в html документе. Такая организация кода (за одним исключением) некорректна и ведёт к серьёзному увеличению html документа, что предельно неудобно для веб-разработки.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text{
font-size: 18px;
}
.notice{
background-color: green;
}
</style>
</head>
<body>
<p class="notice">Прочтите текст ниже:</p>
<p class="text">Далеко-далеко за словесными горами в стране гласных и согласных живут
рыбные тексты. За, имени всемогущая точках коварных он, запятых выйти буквенных то.</p>
</body>
</html>
Стоит отметить, что правила здесь работают те же, что и для связанных стилей: те правила CSS, что расположены в теге <style> ниже по порядку, или в другом теге <style>, будут перезаписывать вышестоящие правила.
Внутренние (инлайновые\линейные) стили
Это стиль для тега, который прописан в его атрибуте style. Значение атрибута присваивается обычным написанием стилевых правил, разделённых точкой с запятой. Кроме того, что такой способ наводняет разметку не связанными с контентом атрибутами и затрудняет правку кода, он ещё и переписывает связанные и глобальные стили, поскольку инлайновые стили обладают самым большим весом. С понятием веса вы ещё не знакомы, однако можно сказать немного об этом уже сейчас: инлайновые стили самые «тяжёлые», поэтому даже если ниже по порядку будет подключен при помощи <link> внешний файл css, инлайновые стили всё равно перезапишут их.
<p class="notice" style="color: darkgreen;font-size: 17px;">Прочтите текст ниже:</p>
Не используйте инлайновые стили в своей работе! Их можно использовать только в целях обучения\тестирования чего-либо, а также в одном исключительном случае, о котором мы расскажем в дальнейших уроках.
Импорт стилей
Это нельзя назвать способом подключения CSS к документу html, поскольку такой импорт осуществляет сам CSS. Это как бы расширение текущего CSS-кода. Как если бы мы в текущий CSS файл добавляли ещё другой. Импорт осуществляется при помощи директивы @import. Пример, на котором файл style.css импортирует два других файла:
Напомним ещё раз, что единственным правильным способом организации кода и подключения файлов CSS является разделение HTML и CSS на отдельные файлы, помещение их в разные директории, затем подключение CSS к html документу при помощи тега <link>. Это связанные, или внешние стили.
Тест к уроку
css
Основы CSS
20
Начальный тест по языку CSS: основные принципы работы CSS в веб документе, типы стилей, способы подключения.
