Внедряем CSS-код в HTML-документ

Внедрение CSS-кода в HTML-документ, учебник CSS для начинающих.
Внедряем CSS-код в HTML-документ (Учебник CSS, урок №2)

Для начала, внедрим CSS-код в HTML-документ. Допустим, у нас есть файл index.html, в нём содержится следующий HTML-документ:

<!DOCTYPE html>
<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h1>Снежный барс</h1>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв в браузере файл index.html вы получите следующее.

С помощью CSS, мы можем изменить внешний вид любых тегов, в нашем примере мы изменим внешний вид заголовка h1 и абзацев p. Разместите в голове HTML-документа следующий код, я выделил его красным цветом:

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

Открыв в браузере файл index.html вы должны увидеть следующее.

Как вы можете увидеть, благодаря языку CSS мы смогли изменить внешний вид заголовка и абзацев. Текст заголовока стал белым, а его фон зелёным, шрифт у абзацев увеличился и стал оранжевым.

Посмотрите еще раз на CSS-код, который мы внедрили в HTML-документ:

h1 {
color: white;
background-color: green;
}
p {
color: orange;
font-size: 20px;
}

На этом урок закончен. В следующем мы подробно разберём CSS-код и узнаем из каких частей он состоит.

Читать далее: Разбираем CSS-код


Дата публикации поста: 15 июля 2019
Дата обновления поста: 15 июля 2019

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

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