Введение в CSS, встраивание в HTML. Внедрение CSS в HTML документ

Варианты вставки и использования CSS в HTML-документ.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей ) — технология описания внешнего вида документа, написанного языком разметки.

Произвести вставку (include) CSS в HTML можно несколькими способами.

Указание CSS-свойств через атрибут style

Атрибут style (с англ. стиль ) — определяет стилевую информацию для соответствующего элемента. Атрибут style применим почти ко всем элементам документа. Например:

example of using style

Результатом использования стиля color:red станет строка красного цвета. Смысл использования такого варианта заключается в возможность определить CSS-свойства для отдельно взятого элемента документа.

Вставка CSS-правил в контейнер style

Тег style (с англ. стиль ) — используется для определения стилей элементов web-страницы. Следует отметить, что тег style следует размещать внутри контейнера head . Например:

p { color:red; }

Атрибут type — сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили. В нашем случае это text/css .

Смысл использования такого варианта заключается в возможность определить CSS-правил для ряда селекторов. В приведённом примере, для селектора p определено CSS-свойство color как red .

Вставка CSS-файла при помощи тега link

Тег link устанавливает связь с внешним документом, в нашем случае CSS-фалом. Следует отметить, что тег link всегда размещается внутри контейнера head . Например:

В данном случае, атрибут rel определяет отношения между текущим документом, и файлом style.css , как stylesheet (с англ. таблица стилей ). Значением атрибута type является MIME-тип данных подключаемого файла, т.е. text/css . Последний атрибут href содержит путь к подключаемому CSS-файлу.

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

Импорт CSS-правил

Команда @import (с англ. импорт ) — аналогична тегу link , за исключением того, что вставке CSS-файла производится в текущую таблицу стилей. Например:

@import url("/style/header.css"); p { color:red; }

Каскадные таблицы стилей бывают трёх видов и, соответственно, включаются в html-код тремя способами.

Внутренние таблицы стилей . Задаются внутри элементов при помощи атрибута stile , например:

Заголовок синего цвета

Результатом всего этого будет:

Заголовок синего цвета

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

Встроенные таблицы стилей . Этим способом таблица стилей задаётся для целого html-документа между тегами ... . Например, если мы хотим сделать все заголовки веб-страницы синего цвета, нам надо будет между тегами ... написать следующее:

h2{
color:blue;
}

Если написать такой код между тегами ... , то все заголовки первого уровня будут синими. При этом способе стили задаются при помощи тегов ... . Также тегу необходимо задать обязательный атрибут type , который в случае с CSS всегда указывает тип таблицы стилей text/css . Используя этот способ задания, дизайн веб-страницы можно поменять, изменив содержимое между тегами ... , но не сайта в целом.

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

Заголовки в html-документе.



Заголовок первого уровня
Заголовок третьего уровня, расположенный по центру html-документа
Заголовок шестого уровня, выравненный по правому краю веб-страницы

После этого создаём новый файл такого содержания:

H1 {color:blue;}
H3 {color:red;}
H6 {color:green;}

И сохраняем его как style с расширением *css . Результат смотри . Это наш html-файл с заголовками. Разберём теперь как работает эта конструкция. В html-документе с заголовками мы между тегами ... написали такую строчку:

Здесь при помощи тега мы подключаем таблицы стилей к html-документу. Атрибут href ссылается на место, где размещён файл со стилями, это обязательный атрибут. Атрибут type мы уже знаем, он указывает тип таблицы стилей. Атрибут rel указывает отношение подключаемого файла к данному html-документу. В нашем случае значение атрибута rel="stylesheet" обозначает, что мы добавили основную таблицу стилей. Плюс такого метода задания таблиц стилей заключается в том, что ели захочется поменять дизайн сайта в целом, достаточно изменить только один файл с таблицами стилей.

Стили можно добавить тремя способами.

Внутренние стили

Внутренний стиль - это своего рода расширение html-тега. Такой стиль создается в случае необходимости задать какие-либо свойства для конкретного объекта, а не группы объектов. Эти свойства называютcя атрибутами стиля.

Для создания такого стиля используется параметр style , который есть у всех тегов. Параметру style присваиваются перечисленные через "точку с запятой" атрибуты с заданными значениями. Значения атрибутам присваиваются не знаком "равно" , как обычно, а знаком "двоеточие" .

Например, Вы хотите, какой-то конкретный заголовок написать оранжевым цветом и размером 22 пиксела. Для этого напишите следующее:

Урок 1 Урок 1

Разберем этот пример. Фраза "Урок 1" выделена тегом заголовка . У тега создается стиль с помощью параметра style . У стиля задаются 2 атрибута color (цвет) и font-size (размер шрифта), разделенные "точкой с запятой" . Атрибуту color присваивается значение #CD6600 , атрибуту font-size присваивается значение 22px .

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

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

Глобальные стили добавляются в документ следующим образом:

Внутри тега вставляется парный тег с параметром type="text/css";

Внутри тега располагаются все стили для данного документа. Стили разделяются просто переносом строки.

Стиль описывается так: пишется название стиля и ставятся "фигурные скобки" { } .

Между "фигурными скобками" пишутся все атрибуты стиля с присвоенными значениями, разделенные "точкой с запятой" . Значения атрибутам присваиваются "двоеточием" , а не знаком "равно" . После значения последнего атрибута "точку с запятой" ставить необязательно.

стиль1 {
атрибут1: значение;
атрибут2: значение;
...
}
стиль2 {
атрибут1: значение;
атрибут2: значение;
...
}
...

красного цвета и размером 20 пикселов:

h1 {
color: #CD6600; .

В нем нужно указать минимум 2 параметра: rel , который описывает связь между рабочим файлом и документом, путь к которому указан в href, и href – путь к документу.

Как правило, стилевые параметры сохраняют в документе с расширением.css.

Для наглядности я привел пример такого подключения стилей. Хочу отметить важный момент: для подключения css-файла в атрибуте rel всегда пишется «stylesheet».

Для начала создадим структуру веб-ресурса.

Внешний Яркий заголовок

Сенсационное содержание

Теперь оживим созданную страницу, подключив к ней документ со списком стилей. Вот строка, которая за это отвечает:

Создаем в блокноте файл с нужным расширением и называем его 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; }

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.

Такой способ конечно же уступает в гибкости описанному выше, но с другой стороны разработчик может видеть весь текст программы, что в некоторые моменты очень кстати.

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

Глобальный h2{ color: #FF0000; text-shadow: 7px -3px 5px; border-bottom: 4px double #FF0000; } p { font-size: 19px; font-family: Calibri; margin-left: 35px; } Яркий заголовок

Сенсационное содержание

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

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

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

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

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

Встроенный Яркий заголовок

Сенсационное содержание

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

Способ 4. Еще один вариант подключения стилевого документа

В спецификации каскадных стилевых таблиц предусмотрен импорт файлов с css-свойствами. Это не популярный способ подключения правил оформления в силу своих недостатков:

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

За функционирование такого варианта подключения css отвечает команда @import . Для импорта используется синтаксис:

@import url («путь»); или @import «путь»;

Перейдем к примеру.

Внешний @import url("style.css"); Яркий заголовок

Сенсационное содержание

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

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

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

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

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

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

С уважением, Роман Чуешов

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

На этом уроке мы рассмотрим различные способы добавление стилей CSS на веб-страницу.

Добавление стилей непосредственно к элементу HTML

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

Lorem ipsum dolor sit amet. Porro quisquam est

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Добавление стилей в HTML документ

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

.blue-20 {color: blue; font-size: 20px; } .bg-yellow { background: yellow; } ")); }); ... .blue-20 { color: blue; font-size: 20px; } .bg-yellow { background: yellow; } ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est , qui dolorem ipsum, quia voluptas.

Добавление стилей с помощью внешних файлов CSS

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

... ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Данный способ подключения файлов стилей является предпочтительным, т.к. он обеспечивает загрузку файлов в том порядке, в каком они указаны в HTML-документе (в отличие от @import). Также данный способ увеличивает скорость загрузки веб-страницы, т.к. файлы CSS загружаются одновременно. Реализация сайта с помощью внешних файлов CSS облегчает редактирование стилей и изменения дизайна сайта. В завершение, можно прокомментировать пожелание компании Google, которая рекомендует размещать все стили в одном внешнем файле, что приведёт к ещё более быстрой загрузки сайта.

Добавление стилей с помощью @import

Добавить файлы CSS можно также с помощью конструкции @import , которую необходимо поместить в самом верху блока стилей HTML-документа. Данный способ не рекомендуется использовать, т.к. он не гарантирует последовательную загрузку файлов CSS. Также его использование, можно приводить к ошибкам при работе веб-страницы (Например: загрузка скрипта может выполниться раньше, чем загрузка стилей, от которых он зависит).

... @import url("путь к файлу в виде url"); @import "путь к файлу"; ... ...

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Динамическое подключение файлов CSS

Иногда бывают ситуации, когда необходимо динамически подключить файл CSS к веб-странице. Данный способ можно реализовать с помощью метода append библиотеки jQuery.

$(document).ready(function(){ $("head").append($("")); });

Примечание: при использовании данного способа не забудьте подключить библиотеку jQuery к вашей веб-странице:

Динамическое добавление стилей в HTML документ $(document).ready(function(){ $("head").append($(".blue-20 {color: blue; font-size: 20px; } .bg-yellow { background: yellow; }")); }); Приоритет стилей и минимизация CSS

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

Содержимое внешнего файла samples.css --- .red { color: red; } --- Содержимое HTML документа --- .blue { color: blue; } ... ...

Lorem ipsum dolor sit amet. Sunt, explicabo quia non recusandae eaque ipsa, quae ab illo inventore.

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

Минимизация CSS

Минимизирование (сокращение кода) файлов CSS предназначено для уменьшения их объема, что приводит к увеличению скорости загрузки сайта и его производительности. Для примера рассмотрим процесс уменьшения объема файла CSS с помощью оптимизатора CSSTidy .

Запускаем программу " cmd (Командная строка)", в которой набираем название программы csstidy.exe ,а в качестве параметров указываем исходный файл CSS и имя минимизированного файла.

Результат минимизации показан на рисунке, где показаны входящий размер, размер минимизированного файла и процент сжатия.