Разбираем CSS-код
Разбираем код языка CSS внедренного в HTML-документ
Разбираем код языка CSS
В предыдущем уроке мы выяснили, что такое CSS и внедрили его код в HTML-документ. В этом уроке мы узнаем, что означает каждая часть CSS-кода.
Схема CSS-кода, выглядит следующим образом:
имяТега { CSS-свойство: значение; }
Наш внедренный в HTML-документ, CSS-код выглядит так:
h1 {
color: green;
font-family: Arial;
}
Рассмотрим каждую его часть:
h1 — сначала идет имя тега, которому будут назначаться CSS-свойства, в нашем примере это заголовок статьи.
{ } — затем идут открывающая и закрывающая фигурные скобки, между этими скобками помещают CSS-свойства со значениями.
Фигурные скобки нужны для того, чтобы обозначить начало и конец CSS-свойств, предназначенных для тега, в нашем случае, для тега h1
color: green; — первая строка, идущая после открывающей фигурной скобки, где
color — это CSS-свойство, означающее цвет,
green — это значение CSS-свойства, означает что цвет должен быть зелёным.
font-family: Arial; — вторая строка, идущая после открывающей фигурной скобки, где
font-family — это CSS-свойство, означающее какое имя должно быть у шрифта,
Arial — это значение CSS-свойства, означает что имя шрифта должно быть Arial
Обратите внимание на то, что после CSS-свойств вы должны ставить двоеточие :, а после значений вы должны ставить точку с запятой ;
Давайте теперь назначим CSS-свойства, абзацам p страницы. Добавьте следующий CSS код в HTML-документ:
p {
color: blue;
font-size: 19px;
width: 60%;
}
Ваш HTML-документ, теперь должен выглядеть следующим образом:
<html>
<head>
<title>Страница о снежном барсе</title>
<style>
h1 {
color: green;
font-family: Arial;
}
p {
color: blue;
font-size: 19px;
width: 60%;
}
</style>
</head>
<body>
<h1>Снежный барс</h1>
<img src="irbis.jpg">
<p>
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии,
Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом,
относительно короткими лапами, небольшой головой и очень длинным хвостом.
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными
пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по
приблизительным оценкам их количество варьируется в районе около 10 тысяч
особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
запрещена.</p>
</body>
</html>
Открыв с помощью браузера, файл index.html, вы должны увидеть следующее.
Обратите внимание на то, что цвет текста абзацев стал синим, размер шрифта увеличился, а ширина абзацев стала равна 60% ширине браузера.
Рассмотрим CSS-свойства назначенные абзацам p
color: blue; — первая строка, идущая после открывающей фигурной скобки, где
color — это CSS-свойство, означающее цвет,
blue — это значение CSS-свойства, означает что цвет должен быть синим.
font-size: 19px; — вторая строка, идущая после открывающей фигурной скобки, где
font-size — это CSS-свойство, означающее размер шрифта,
19px — это значение CSS-свойства, означает что размер шрифта должен быть равен 19 пикселей.
width: 60%; — третья строка, идущая после открывающей фигурной скобки, где
width — это CSS-свойство, означающее ширину,
60% — это значение CSS-свойства, означает что ширина должна быть равна 60% от первоначальной. Сначала по-умолчанию, ширина абзацев составляла 100% и занимала всю ширину браузера.
Читать далее: Добавляем ссылку на HTML-страницу