Введение в CSS, встраивание в HTML. Добавление CSS

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

Таблицы связанных стилей

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

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

Стили Hello, world!

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

Достоинства данного способа

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

Можно изменять таблицу стилей без модификации веб-страниц.

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

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

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

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом (пример 2).

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

Стили H1 { font-size: 120%; /* Размер шрифта */ font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */ color: #336; /* Цвет текста */ } Hello, world!

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

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

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

Стили Hello, world!

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

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

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

Стили H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } Hello, world! Hello, world!

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

На этом уроке мы рассмотрим различные способы добавление стилей 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 и имя минимизированного файла.

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

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

Глобальный CSS помещается в контейнер конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы – вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами . Вот пример глобальной таблицы стилей:

p {color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} #button-go, #button-back {border: solid 1px black;}

Преимущества глобальных CSS :

• Таблица стилей влияет только на одну страницу.
• В глобальной CSS могут быть использованы классы и идентификаторы (ID).
• Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

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

Как произвести подключение CSS к HTML странице

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

Найдите открывающий тег и добавьте после него следующий код:

Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:

body { background-color: blue; } h1 { color: red; padding: 60px; }

Как только вы закончите добавление CSS правил, добавьте закрывающий тег:

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

body { background-color: blue ; } h1 { color: red ; padding: 60px ; } Руководство Hostinger

Это наш текст.

Вариант 2 - Внешний CSS

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

Тогда как, сами таблицы стилей располагаются в файле style.css . К примеру:

Xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; }

Преимущества внешних CSS :

• Меньший размер страницы HTML и более чистая структура файла.
• Быстрая скорость загрузки.
• Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

• Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 - Внутренний CSS

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

Руководство Hostinger

Здесь что-нибудь полезное.

Преимущества внутреннего CSS :

• Полезен для проверки и предпросмотра изменений.
• Полезен для быстрых исправлений.
• Меньше HTTP запросов.

Недостатки внутреннего CSS:

• Внутренние CSS должны быть применены для каждого элемента в отдельности.

Заключение

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

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

Для тех, кто любит смотреть в формате видео.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца

Красным цветом.

Документ без названия

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента

Документ без названия

Абзац

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

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type="text/css". Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

p {color:red;} Документ без названия

3 вариант. Подключение внешнего файла стилей.

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

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

Документ без названия

Файл style.css содержит следующих код:

P {color:red;}

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Варианты вставки и использования 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; }