Как подключить CSS к тегу.
Первый способ, который мы разберем, это
прописывание стиля непосредственно в теге, что повлечет за собой
изменение отображения этого тега. Давайте, к примеру, возьмем тег H1.
Как известно тег H1 – это тег заголовка и отображается он большими
буквами. Давайте изменим его стиль и сделаем, к примеру, текст внутри
тега H1 красного цвета, курсивом и размером 14 пикселей. Для этого
внутри тега прописываем атрибут «style», в который впишем наши стили.
Готовая конструкция выглядит так :
<H1 style="color:red; font-style:italic; font-size:14px;">Как подключить CSS</H1> |
Как вы догадались, конструкция
color:red; сделала надпись красной, font-style:italic; – превратила
шрифт в курсив, font-size:14px – задала размер шрифта. Использование
такого метода прописывания стилей оправдывает себя лишь в том случае,
если нам нужно быстро прописать где-то стиль парочке тегов и не хочется
разбираться, как подключены CSS стили к странице. Но если таких
изменений много, то лучше всего тегам назначить классы и прописать стили
через классы. Данный метод мы рассмотрим дальше.
Как вынести CSS стили в отдельный блок в пределах HTML страницы.
Как я и писал выше, если мы прописываем
стили для большого количества тегов, то проще это сделать через классы.
Иначе, если в каждый тег вставлять атрибут «style», то код HTML страницы
превратится в кашу, в которой можно легко запутаться. Как же
прописываются стили через классы. К примеру, берем тот же тег H1, вместо
атрибута «style» пишем «class» и назначаем ему имя, а перед этим
используем тег «style», в котором описываем, какие правила CSS будут
применяться к данному классу. Выглядеть это будет так:
1 2 3 4 5 | <STYLE> .classname {color:red; font-style:italic; font-size:14px} </STYLE> <H1 class="classname">Как подключить CSS</H1> |
То есть что мы сделали? Вместо того,
чтобы писать длиннющий стиль внутри тега, мы вставили в него атрибут
class= «classname», который имеет имя «classname». Но перед этим в
специальном блоке, который у нас задается тегами «style», мы определили,
что для всех тегов, которые будут иметь атрибут class= «classname»,
будут применяться стили .classname {color:red; font-style:italic;
font-size:14px}. В блоке между тегами «style» мы можем прописывать стили
для того количества классов, которое нам нужно. Для этого с новой
строки ставим точку и придумываем имя класса, после чего в фигурных
скобках пишем ему стили. Имена созданных классов присваиваем классам
внутри тегов, которым предназначался данный стиль. Сложного в этом
ничего нет, мы как бы придумываем названия контейнеров, которые содержат
определенный стиль, а потом указываем, к какому тегу относятся эти
стили. Таким образом, HTML код у нас становится чистым, а описание CSS
стилей лежит в отдельном блоке. Этот метод целесообразно использовать в
том случае, когда нет возможности вынести стили в отдельный файл, на
практике он применяется редко, но о нем нужно знать.
Как подключить CSS стили из внешнего файла.
И теперь третий способ, который является
самым распространенным, это подключение CSS стилей, которые находятся в
отдельном файле. Для этого между тегами HEAD мы прописываем строку:
<link href="путь_к_файлу/file.css" rel="stylesheet" media="screen">
|
где
href= «путь_к_файлу/file.css» — указывает, где лежит файл со стилями,
rel= «stylesheet» — указывает, что открывается именно таблица стилей,
media= «screen» — указывает, что стили, прописанные в файле, предназначены для отображения на мониторе компьютера.
Содержимое файла стилей будет состоять
из CSS правил. То есть то, что во втором примере мы помещали между
тегами «style», выносим в отдельный файл. Если нам нужно подключить к
странице несколько файлов стилей, то просто указываем несколько тегов
«link», в которых указываем соответственные пути и имена файлов. Вот и
все, чем отличается данный способ от предыдущего.
На этом все, я думаю, вы поняли, как
подключить CSS к HTML странице. Всего три простых способа, но я
рекомендую использовать именно третий способ, который является самым
правильным. Спасибо за внимание, до скорых встреч.
0 Комментарии