Подключение CSS к HTML документу

Подключение CSS к HTML документу

Опубликовано в Все для сайта - Автор VARIATECHnik В Суббота, июля 28, 2018 Нет комментариев

Подключение CSS к HTML документу

В прошлом уроке мы разобрались с понятием CSS, а в данной статье будут рассмотрены способы подключения CSS (каскадных таблиц стилей) к html документу. Правила CSS можно прописывать непосредственно в самом html документе или в отдельном файле, можно подключать несколько таблиц стилей одновременно, или задавать стили, прям в структурных элементах html страницы. Давайте по порядку рассмотрим все способы подключения CSS.

 

4 способа подключения CSS к HTML

Подключение CSS c помощью тега <link>

Если таблица стилей находится в отдельном документе, то ее необходимо подключать с помощью тега <link>. Данный тег должен располагаться в области <head></head> html документа и у него есть два обязательных атрибута:

 

-rel=\»stylesheet\» — тип присоединяемого документа;

 

-href=\»main.css\» – путь к файлу или документу.

 

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

Предположим, что в папке с нашим сайтом, находится папка css, в которой мы создадим каскадную таблицу стилей с именем – main.css, тогда, чтобы подключить нашу CSS таблицу, необходимо прописать тег <link> с атрибутами:

<link rel=\»stylesheet\» href=\»css/main.css\» >

 

Теперь правила оформления веб – страницы, которые мы пропишем в файле main.css будут применяться для всего html документа.

 

Подключение CSS с помощью директивы @import

В случае если таблица стилей находится в отдельном файле, ее можно подключить посредством директивы @import, как в уже имеющуюся таблицу стилей, так и в html документ.

 

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

 

К примеру, пусть в папке CSS нашего сайта расположена таблица стилей с именем typography.css, тогда для ее подключения достаточно прописать директиву @import в CSS таблицу main.css.

 

@import url();

 

Используя данную директиву можно подключать таблицы стилей непосредственно в структуре html документа. Для этого необходимо в области <head></head>, расположить тег <style></style>, внутри которого поместить директиву @import url ();, с указанием пути к подключаемому файлу. Например:

 

Подключение CSS в html документе

Задавать слили html документу, можно прям в нем. Для этого достаточно прописать в любом месте html документа тег <style></style>, внутри которого указывать необходимые CSS правила. Например:

 

Подключение CSS в тегах HTML документа

Правила оформления внешнего вида можно задавать для отдельных элементов html документа. Для этого используется атрибут style=\» свойство 1; свойство 2; \»; , внутри которого указываются, требуемы CSS свойства. Например:

Мы рассмотрели 4 способа подключения каскадных таблиц стилей к html документу. Я надеюсь, эта информация будет для вас полезной, а освоив ее, переходите к изучению основных CSS селекторов, с помощью которых осуществляется выборка элементов html страницы и назначение им различных css свойств. На этом я с вами прощаюсь, до встречи в следующих статьях, на страницах блога.

Об - Всем привет! На данном ТехноСайте мы постараемся выкладывать только полезные и занимательные статьи, с пошаговыми иллюстрациями и видео уроками. По всем вопросам пишите в комментариях. Обещаем будет интересно!

Оставить комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

в