Подключение 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> с атрибутами:

Теперь правила оформления веб – страницы, которые мы пропишем в файле 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 ();, с указанием пути к подключаемому файлу. Например:

<!DOCTYPE HTML>
 <html>
   <head>

                               <meta charset=\"utf-8\" >

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

                               <style>
                                               @import url();
                               </style>
   </head>
                <body>
                </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

@import url();

</style>

</head>

<body>

</body>

</html>

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

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

<!DOCTYPE HTML>

<html>
   <head>
                               <meta charset=\"utf-8\" >

   </head>

                <body>

                               <h1>Как подключить таблицу стилей</h1>

                               <p>Любой текст</p>

                               <style>

                                               body {font-family: Arial, sans-serif;}

                                               h1 {font-size: 35px;}

                                               p {color: blue;}

                               </style>
                </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h1>Как подключить таблицу стилей</h1>

<p>Любой текст</p>

<style>

body {font-family: Arial, sans-serif;}

h1 {font-size: 35px;}

p {color: blue;}

</style>

</body>

</html>

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

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

<!DOCTYPE HTML>

<html>

   <head>

                               <meta charset=\"utf-8\" >

   </head>

                <body>

                               <h1 style=\"color: red; font-size: 30px; text-transform: uppercase;\">Как подключить таблицу стилей</h1>

                </body>

</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h1 style=\"color: red; font-size: 30px; text-transform: uppercase;\">Как подключить таблицу стилей</h1>

</body>

</html>

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