Внутренние и внешние таблицы CSS
Внутренние и внешние таблицы CSS
Общеизвестно, что каскадные таблицы стилей предназначены для оформления HTML страниц. Иными словами современный HTML код должен состоять только из текста с форматированием на абзацы, заголовки, списки, таблицы, ссылки. Оформление же документа, такое как цвет фона, размер и цвет шрифта, размер и цвет заголовков, списков, ссылок и т.д. полностью отдается CSS.
По типу каскадные таблицы стилей (CSS) бывают как внутренние так и внешние.
Если говорить о внутренних таблицах CSS, которые находятся внутри HTML документа, то обычно они находятся внутри тега <head> и имеют тег <style></style>. Тег <style> сообщает браузерам что внутри HTML документа они имеют дело с CSS кодом.
При работе с HTML 5 достаточно одного тега <style>. При работе с другими версиями HTML и XHTML , открывающий тег <style> должен быть дополнен атрибутом type=text/css и выглядит это так: <style type=”text/css” >.
Если говорить о минусах внутренних таблиц стилей CSS, то они заключаются в следующем:
1) Внутренние таблицы стилей придется вставлять в код каждой страницы вашего сайта. Все это делает процесс создания сайта более трудоемким, а сам сайт перегруженным кодом и как результат, медленно загружаемым в браузерах.
2) Если возникнет необходимость редактирования дизайна сайта, то придется подвергнуть редактированию код на всех страницах, а это очень трудоемкая работа.
Для устранения этих недочетов были созданы внешние таблицы стилей CSS.
Внешняя таблица стилей представляет собой документ имеющий расширение CSS, которая подключается к HTML странице с целью ее оформления. HTML теги у внешней таблицы стилей отсутствуют за исключением тегов, которым нужно придать то или иное оформление.
Подключается внешняя таблица стилей CSS по разному в зависимости от версии HTML
- Подключение таблицы стилей для HTML5
<link rel=”stylesheet” href=”css/styles.css”> - Подключение таблицы стилей для HTML 4.01
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”> - Вариант для XHTML
<link rel=”stylesheet” type=”text/css” href=”css/styles.css” />
где
rel=”stylesheet” – ссылка на таблицу стилей,
href- место где находится CSS файл на сайте.
Основным плюсом внешней CSS таблицы является то, что она не перегружает HTML документ и имеет довольно небольшой вес.
Добавить комментарий