Теория
Теория

Встроенные стили, атрибут style

Мы уже знаем, что хорошим тоном считается подключать стили через тег <link>:

<link rel="stylesheet" href="style.css">

Но есть ещё один способ подключения стилей — встраивание прямо в документ вместо подключения по ссылке. Стили подключатся либо внутри тега <style>, либо прописываются в значении атрибута style самих HTML-элементов.

Вариант подключения стилей в теге <style> используется чаще всего для оптимизации загрузки страницы, ведь в таком случае браузер не будет отправлять дополнительных запросов на сервер. Тег <style> обычно размещают внутри <head>. Например:

<head>
  <style>
    CSS-код
  </style>
</head>

Второй вариант встраивания стилей — содержимое атрибута style. Свойства и значения, прописанные таким образом, применятся точечно к одному элементу:

<div style="width: 50%;"></div>

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

Давайте подробнее разберём пример со style="width: 50%;". Предположим, что нужно иметь возможность управлять в разметке шириной с помощью свойства width в диапазоне от 0% до 100%. Чтобы сделать это через CSS, пришлось бы создать 100 классов, и применять их, например:

.width-0 { width: 0% }
.width-1 { width: 1% }
.width-2 { width: 2% }
/* и так далее… */

Намного удобнее будет сделать точечное встраивание стиля с шириной в атрибут style.

Давайте и воспользуемся этим приёмом для стилизации прогресса навыков.

А промежуточное состояние нашего сайта уже доступно по этой ссылке.

index.html
style.css

HTML

44
45
46
          <dt>CSS</dt>
          <dd><div class="skills-level">20%</div></dd>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS

1
2
body {
  padding: 0 30px;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

ЗадачиВыполнено 0 из 3

Первому диву с классом skills-level задайте атрибут style со значением width: 60%;,
второму диву — со значением width: 20%;,
а третьему диву — со значением width: 10%;.

Встроенные стили, атрибут style

Вход

Регистрация

Восстановление доступа