Внедрение CSS, атрибут style
Внедряем CSS-кода, с помощью атрибута style
Внедряем CSS-код с помощью атрибута style=" "
Рассмотрим второй способ внедрения CSS-кода в HTML-документ: Внедрение с помощью глобального атрибута style=" "
Допустим, в нашей статье о Снежном барсе, мы выделили жирным шрифтом (тегами <b> </b>) несколько слов: ак барс, Ирбис и малоизученными.
HTML-документ будет выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Страница о снежном барсе</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Снежный барс</h1>
<p>
Снежный барс (ирбис, <b>ак барс</b>) - крупное хищное млекопитающее из
семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана,
Индии, Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. <b>Ирбис</b> отличается тонким, длинным,
гибким телом, относительно короткими лапами, небольшой головой и очень
длинным хвостом. Длина снежного барса вместе с хвостом составляет
200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с
кольцеобразными или сплошными тёмными пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются <b>малоизученными</b>.
Однако по приблизительным оценкам их количество варьируется в районе около
10 тысяч особей. По состоянию на 2013 год, охота на снежных барсов
повсеместно запрещена.</p>
</body>
</html>
Страница в браузере будет выглядеть следующим образом.
Нам нужно, чтобы цвет слов ак барс, стал зелёным. Если мы разместим между тегами <style> </style> следующий код:
b {
color: green;
}
то цвет текста станет зелёным, у всех слов заключенных между тегами <b> </b>
Для того, чтобы применить CSS-свойства только к одному тегу, например b, используют глобальный атрибут style=" " (или селектор id, который мы изучим позже). Нужно атрибут style=" " вставить в тот тег, к которому вы хотите применить CSS-свойства.
Например, давайте вставим атрибут style=" " в тег b, который обрамляет слово ак барс:
...
<p>
Снежный барс (ирбис, <b style="color: green;">ак барс</b>) - крупное,
хищное млекопитающее из семейства кошачьих. Обитает в горных массивах
Афганистана, Бирмы, Бутана, Индии, Казахстана, Киргизстана, Китая, Монголии,
Непала, Пакистана, России, Таджикистана и Узбекистана. <b>Ирбис</b>
отличается тонким, длинным, гибким
...
В итоге, страница в браузере, станет выглядеть так. Слово ак барс, теперь зелёное.
Схема внедрения атрибута style=" " в любой тег:
<имяТега style="CSS-свойство: значение;">
Читать далее: Внедрение CSS-кода, с помощью тега link