Внутренние и внешние таблицы CSS

Внутренние и внешние таблицы CSS

Общеизвестно, что каскадные таблицы стилей предназначены для оформления HTML страниц. Иными словами современный HTML код должен состоять только из текста с форматированием на абзацы, заголовки, списки, таблицы, ссылки. Оформление же документа, такое как цвет фона, размер и цвет шрифта, размер и цвет заголовков, списков, ссылок и т.д. полностью отдается CSS.
Внутренние и внешние таблицы 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

  1. Подключение таблицы стилей для HTML5
    <link rel=”stylesheet” href=”css/styles.css”>
  2. Подключение таблицы стилей для HTML 4.01
    <link rel=”stylesheet” type=”text/css” href=”css/styles.css”>
  3. Вариант для XHTML
    <link rel=”stylesheet” type=”text/css” href=”css/styles.css” />

где
rel=”stylesheet” – ссылка на таблицу стилей,
href- место где находится CSS файл на сайте.
Основным плюсом внешней CSS таблицы является то, что она не перегружает HTML документ и имеет довольно небольшой вес.

Похожие посты

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *