Как подключить CSS (каскадные таблицы стилей) к HTML?

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

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

Подключение внешний таблицы стилей

Заранее отметим, что файл внешней таблицы стилей имеет английское название и расширение CSS — к примеру, world.css. Файл этот мы «пичкаем» необходимыми стилями и как нужно обрабатываем, чтобы в последствии залить на сайт и подключить к HTML разметки, дабы всё магическим образом преобразилось.

Вот один из популярных способов осуществить задуманное:

Так выглядит вариант для последней версии HTML5:

Смотрим на значения

1. Файл загружается в секцию HEAD и влияет только на те страницы сайта, где он расположен.
2. После значения «Href» нужно указать путь к CSS-файлу
3. Чтобы всё выглядело идеально, следует добавить закрывающий слэш («/>). Впрочем, и без него всё будет работать, но перфекционисты в рядах верстальщиков наверняка придут в ужас при виде такого кода.
4. Разметка хоть и не «ведро огурцов», но злоупотреблять стилями на странице не стоит, хотя в теории к ней можно подключить сколько угодно CSS-файлов.

Подключение внутренней таблицы стилей
Если файл стилей не подключен, это называется внутренней таблицей стилей, настраивать которую нужно вручную:
Так это выглядит для разметки HTML5:
Конструкцию можно вставить и в HEAD и в BODY секции, причем в разные части и по несколько штук — особых нюансов здесь нет.

Подключение встроенной таблицы стилей

Те, кто смотрят на сайт не глазами обычного пользователя, а всё же верстальщика или программиста, замечают много интересных деталей. Например, где-то стили прописываются вот так:
Этот вариант принято называть «встроенным стилем», а распространяется он ко всем существующим на ресурсе страницам и всем данным: картинка, видеоролик, текст и т.д.

Отметим, что если убрать из конструкции свойство ««!important»», будут применяться параметры встроенного стиля, так как оно является приоритетным по отношению ко всем остальным — то есть, вот так:

Оцените статью
SEO
Добавить комментарий

Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности