Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Внедрение CSS, атрибут style

Внедряем CSS-кода, с помощью атрибута style

Урок №7
Внедряем 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

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget