Внедряем CSS-код в HTML-документ
Для начала, внедрим 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-код