Подключение CSS к HTML документу
Подключение 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 ();, с указанием пути к подключаемому файлу. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html> <head> <meta charset=\"utf-8\" > <link rel=\"stylesheet\" href=\"css/main.css\" > <style> @import url(); </style> </head> <body> </body> </html> |
Подключение CSS в html документе
Задавать слили html документу, можно прям в нем. Для этого достаточно прописать в любом месте html документа тег <style></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\" > </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 свойства. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE HTML> <html> <head> <meta charset=\"utf-8\" > </head> <body> <h1 style=\"color: red; font-size: 30px; text-transform: uppercase;\">Как подключить таблицу стилей</h1> </body> </html> |
Мы рассмотрели 4 способа подключения каскадных таблиц стилей к html документу. Я надеюсь, эта информация будет для вас полезной, а освоив ее, переходите к изучению основных CSS селекторов, с помощью которых осуществляется выборка элементов html страницы и назначение им различных css свойств. На этом я с вами прощаюсь, до встречи в следующих статьях, на страницах блога.