Style html тег и атрибут

В html имеется тег style и атрибут style. Это два разных элемента, хотя оба предназначены для выполнения одной задачи — стилевого оформления элементов. Разберём их по отдельности.

1. Тег <style> </style>

В тег style может быть размещён только в теге head и в него заключается таблица стилей.

Когда браузер видит этот тег, он понимает что внутри него находятся свойства и значения css, которые имеют отношение ко всей странице.

До недавнего времени у тега style был обязательный атрибут type в котором указывалось что в теге используется язык css: type="text/css", но с введением HTML5 этот атрибут признан устаревшим.

Теперь тег <style> принимает только один необязательный атрибут — media, который указывает для какого устройства применяются данные стили (ПК, смартфон, планшет, принтер и т.д.)

<style media="all|braille|handheld|print|screen|speech|projection|tty|tv">

Пример 1:

<style>
#content{
    height: 80px;
    background: #9ef7af;
    margin-bottom: 10px;
}
</style>

Пример 2:

<style media="screen"> - экран монитора
#content{
    height: 80px;
    background: #9ef7af;
    margin-bottom: 10px;
}
</style>

2. Атрибут style="Свойства: значения;"

Атрибут style предназначен для добавления стилевого оформления одного элемента и размещается прямо в теге элемента.

Пример:

<p style="color: #ff0000; font-size: 16px"></p>

Атрибут style может быть применён практически ко всем элементам, расположенным в теге body

Полный список тегов к которым может быть применён атрибут style.

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

С помощью атрибута style можно изменить внешний вид любого элемента, находящегося на странице, и для этого не надо лезть в файл style.css. Делается это прямо в редакторе.

Допустим, нужно выделить какое либо слово или словосочетание красным цветом.

Для этого нужный кусок текста заключается в тег span с атрибутом style в котором и задаётся красный цвет.

Результат:

Мне встречалось очень много ресурсов, в которых атрибут style незаслуженно называли некорректным, и рекомендовали стилевое оформление задавать только в файле style.css, причём без объяснения причин.

Однако в последнее время даже Google рекомендует небольшие и локальные стили вносить прямо в элемент, чтобы уменьшить число запросов к серверу, и тем самым ускорить загрузку сайта.

А некорректность заключается не в самом атрибуте, а в том как его применяют в шаблонах CMS.

В шаблоне почти для всех элементов уже заданы стили в файле style.css поэтому добавление стилей в сам элемент, вызывает накладку в работе браузера.

Сначала он видит файл style.css, с одним оформлением какого либо элемента, а потом уже на странице, видит этот же элемент с уже другим встроенным оформлением.

Предпочтение конечно же отдаётся конечному, встроенному варианту, но на это уходит лишнее время.

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

Обычно оформление в таблице стилей задаётся с помощью идентификатора (id), или класса (class), значит из html кода элемента нужно убрать эти метки, а потом уж спокойно вносить атрибут style с нужными свойствами и значениями.

И всё будет корректно.

Желаю творческих успехов.

Ещё про style
В раздел

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

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

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