Подключаем CSS тегом style (вложенные таблицы стилей)

Одним из основных преимуществ вложенных таблиц является то, что они представляют собой полноценную таблицу CSS, а в неё уже можно прописывать все правила без каких либо ограничений.

Напомним, что в отличие от вложенных таблиц, встроенные стили могут содержать только определённые правила, которые лимитируются тэгом, к которому они применяются.

Следующим преимуществом, является их расположение. Если в встроенных они разбросаны по всему html документу, то в вложенных таблицах они сконцентрированы в одном месте, а значит с кодом будет в случае чего, легче работать.

Как это выглядит?

Для того чтобы создать таблицу стилей в html документе нам понадобится тег style, а внутри него прописываются стили, таким же образом как и в css. Однако и тут не обошлось без правил и ограничений:

Он должен располагается непосредственно в head документа;
Их количество в документе не ограниченно;

Пример:

<html>
<head>
    <meta charset="windows-1251">
    <title>Сайт</title>
<style type=”text/css”>
   p {
     color:#000
   }
   .left a {
     text-decoration: underline;
   }
</style>
</head>

Атрибуты, которые можно использовать с style

В примере, описанном выше, к тегу style добавили атрибут type с значением type/css. Этот атрибут был необходим для корректной работы браузера с таблицей. Стоит обратить внимание, что в качестве значения по умолчанию выступает type/css, ну и что необходимость в использовании этого атрибута пропала уже в HTML5.

Следующим атрибутом, с которым может работать тег style, является media. Этот атрибут даёт возможность применять таблицу стилей для уточнённого устройства.

Например:

<head>
    <meta charset="windows-1251">
    <title>Сайт</title>
<style media=”handheld“>
   p {
     color:#000
   }
   .left a {
     text-decoration: underline;
   }
</style>
</head>

Данный пример рассчитан на HTML5, в котором не нужен атрибут type, а также, с помощью атрибута media мы определили устройства, на которых будут применены стили.

Недостатки

В самом начале мы рассмотрели достоинства использования вложенных таблиц стилей. Теперь стоит обратить внимание на недостатки.

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

Из-за этого недостатка внешние таблицы получили большую распространённость.

Область применения

Первый вариант, один из самых распространённых, это наложение уникальных стилей на определённой странице. Например, нам необходимо, чтобы на одной странице подсвечивался конкретный раздел списка:
```
<head>
<style>
#block li:nth-child(2) a {
  background: #1F2226;
  padding: 20px;
  color: #fff;
}
</style>
</head>
```
Вторым вариантом является ускорение быстродействия на «тяжёлых» участках сайта. Это объясняется тем, что браузеру не приходится грузить несколько файлов.

Важно

В своих проектах лучше обойтись без использования вложенных таблиц. Поэтому если есть возможность обойтись без них, то лучше этой возможностью воспользоваться.

Блог Vaden Pro