Доброго времени суток, читатели данной публикации и мои дорогие подписчики. Сегодня я хочу рассказать вам о базовом механизме, без которого не обойдется ни одно веб-приложение. Мы разберем с вами как вставить css в html-код. Это основы основ, знать которые нужно обязательно.
Однако я должен также заметить, что материал сам по себе не сложный и должен быстро отложиться в памяти. В публикации я расскажу, какие существуют способы добавления стилевых таблиц в гипертекстовую разметку и как они могут взаимодействовать друг с другом. Ну что ж, приступим!
Способ 1. Строгое структурирование
Первым я опишу внешние или, как их еще принято называть, связные стили. Этот способ используется разработчиками наиболее часто. Он предполагает под собой четкое разделение стилевых правил и кода на языке html.
Под словами «четкое разделение» я подразумеваю разделение названных частей на два отдельных файла. Вследствие такой реализации девелоперам легче отлавливать баги и комфортнее работать. К тому же отдельный документ с прописанными стилями можно подключать к разным веб-сервисам.
В этом варианте подключения css-правил происходит через специальный тег <link>. Этот элемент может быть объявлен только в контейнере <head>.
В нем нужно указать минимум 2 параметра: rel, который описывает связь между рабочим файлом и документом, путь к которому указан в href, и href – путь к документу.
Как правило, стилевые параметры сохраняют в документе с расширением .css.
Для наглядности я привел пример такого подключения стилей. Хочу отметить важный момент: для подключения css-файла в атрибуте rel всегда пишется «stylesheet».
Для начала создадим структуру веб-ресурса.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Внешний</title> <link rel="stylesheet" href="style.css"> </head> <body> <article> <h2>Яркий заголовок</h2> <p>Сенсационное содержание</p> </article> </body> </html> |
Теперь оживим созданную страницу, подключив к ней документ со списком стилей. Вот строка, которая за это отвечает:
<link rel="stylesheet" href="style.css">
Создаем в блокноте файл с нужным расширением и называем его style.css. Заметьте, что имя должно быть идентичным с наименованием, указанным в теге <link>.
Скопируйте в созданный документ ниже прикрепленный программный код и сохраните первый рядом с файлом веб-странички.
1 2 3 4 5 6 7 8 9 10 | h2{
color: #FF0000;
text-shadow: 7px -3px 5px;
border-bottom: 4px double #FF0000;
}
p {
font-size: 19px;
font-family: Calibri;
margin-left: 35px;
} |
Способ 2. Хватит и одного файла
Теперь я перейду к стилям, которые называются глобальными.
В этом случае как html-код, так и css-оформление находятся в одном документе. Чтобы реализовать такой вид объявления стилей, нужно в хедере страницы прописать парный тег <style>. После этого внутри него возможно использовать привычный нам программный код на css.
Такой способ конечно же уступает в гибкости описанному выше, но с другой стороны разработчик может видеть весь текст программы, что в некоторые моменты очень кстати.
Лично моя рекомендация: текущий способ используйте при написании небольших веб-приложений, но при разработке объемных сервисов не ленитесь пользоваться связными стилями.
В качестве примера я взял предыдущий код, но оформил его по правилам глобальных стилей.
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 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Глобальный</title>
<style>
h2{
color: #FF0000;
text-shadow: 7px -3px 5px;
border-bottom: 4px double #FF0000;
}
p {
font-size: 19px;
font-family: Calibri;
margin-left: 35px;
}
</style>
</head>
<body>
<article>
<h2>Яркий заголовок</h2>
<p>Сенсационное содержание</p>
</article>
</body>
</html> |
Способ 3. Каша-малаша
Вот мы и подошли к третьему и самому базовому описанию стилевых таблиц. Такой вариант изучают новички в самом начале своего тернистого пути в мир сайтостроения.
Встроенные стили подходят только для реализации самых простых и маленьких программ.
Если веб-приложение предполагает под собой описание множества стилевых характеристик для тегов или по размеру на равне или больше представленных в этой статье примеров, то я советовал бы вообще отказаться от внутренних стилей.
Посмотрите, как выглядит пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!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> |
Думаю, вы сами убедились, что хоть приложение и становится компактнее, разбор текста усложняется.
Способ 4. Еще один вариант подключения стилевого документа
В спецификации каскадных стилевых таблиц предусмотрен импорт файлов с css-свойствами. Это не популярный способ подключения правил оформления в силу своих недостатков:
- Импортируемые документы не всегда загружаются в том порядке, в котором указал разработчик;
- Нет параллельной загрузки файлов;
- Иногда теряется быстродействие работы браузера.
За функционирование такого варианта подключения css отвечает команда @import. Для импорта используется синтаксис:
@import url («путь»); или @import «путь»;
В некоторых случаях после ссылки на документ указывается и вид носителей.
Перейдем к примеру.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Внешний</title>
@import url("style.css");
</head>
<body>
<article>
<h2>Яркий заголовок</h2>
<p>Сенсационное содержание</p>
</article>
</body>
</html> |
Набор стилевых характеристик я не прописываю повторно, так как использую уже готовый документ с выше презентованным кодом.
Взаимодействие подключений
В спецификации css прописана определенная иерархия для перечисленных способов подключения стилей. Так, разберем вначале первые 3.
Если структурировать по приоритетам, то выше стоят встроенные стили, а далее глобальные и внешние. При этом их можно миксовать, т.е. в одном веб-сервисе использовать одновременно несколько вариантов стилевого описания.
Что касается импорта, то он функционирует только с внешним и глобальным подключением стилевых таблиц.
Надеюсь, вам была полезной эта публикация. Делитесь впечатлениями о моем блоге с друзьями и подписывайтесь на обновления. Пока-пока!
С уважением, Роман Чуешов
