Разбираем CSS-код
Разбираем код языка CSS
Разбираем CSS код
В прошлом уроке, мы внедрили следующий CSS-код в HTML-документ:
h1 {
color: white;
background-color: green;
}
p {
color: orange;
font-size: 20px;
}
Открыв в браузере файл index.html вы должны увидеть следующее.
В этом уроке мы разберем CSS-код и выясним из каких основных частей он состоит.
CSS-код обычно располагают в шапке HTML-документа и обрамляют тегами <style> </style>. Сам CSS-код начинается с имени тега, а затем идут фигурные скобки { }, внутри которых располагаются CSS-свойства, именно они и влияют на внешний вид HTML-тегов.
Схема CSS-кода выглядит следующим образом:
имяТега {
CSS-свойство: значение;
}
После CSS-свойства, нужно обязательно ставить двоеточие :, а после значения точку с запятой ;
Для заголовка h1 мы применили следующие CSS-свойства и значения:
color: white; — цвет шрифта — белый,
background-color: green; — цвет фона — зелёный.
Для абзацев p мы применили следующие CSS-свойства и значения:
color: orange; — цвет шрифта — оранжевый,
font-size: 20px; — размер шрифта — 20 пикселей.
CSS-свойств существует очень много, они изменяют у тегов: цвет, фон, размеры, высоту, ширину, отступы, границы, положение, прозрачность, градиент, округление углов и многое другое (в будущем, каждое CSS-свойство мы рассмотрим отдельно).
Давайте добавим еще несколько CSS-свойств, заголовку и абзацам нашего HTML-документа.
К заголовку мы добавим четыре CSS-свойства:
width: 50%; — ширина заголовка должна занимать 50% окна браузера,
text-align: center; — заголовок должен выравниваться по центру,
padding: 5px; — между шрифтом и границей фона, должен появиться зазор в 5 пикселей,
font-family: Impact; — имя шрифта устанавливаем как Impact.
К абзацам мы добавим три CSS-свойства:
background-color: #ffc; — цвет фона абзацев быть светло-жёлтым,
width: 50%; — ширина абзацев должна занимать 50% окна браузера,
padding: 10px; — между шрифтом и границей фона, должен появиться зазор в 10 пикселей,
font-family: Arial; — имя шрифта устанавливаем как Arial.
В итоге, ваш HTML-документ должен выглядеть следующим образом (новый добавленный CSS-код выделен красным цветом):
<!DOCTYPE html>
<html>
<head>
<title>Страница о снежном барсе</title>
<style>
h1 {
color: white;
background-color: green;
width: 50%;
text-align: center;
padding: 5px;
font-family: Impact;
}
p {
color: orange;
font-size: 20px;
background-color: #ffc;
width: 50%;
padding: 10px;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Снежный барс</h1>
<p>
Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии,
Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России,
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом,
относительно короткими лапами, небольшой головой и очень длинным хвостом.
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными
пятнами.</p>
<p>
Охотится снежный барс, в основном, на горных козлов и баранов, также в его
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по
приблизительным оценкам их количество варьируется в районе около 10 тысяч
особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
запрещена.</p>
</body>
</html>
Открыв в браузере, файл index.html вы должны увидеть следующее.
Таким образом, добавляя между фигурными скобками различные CSS-свойства, можно влиять на внешний вид того или иного тега (элемента).
Читать далее: Основные CSS-свойства
Здравствуйте. Спасибо за ваши труды, хороший учебник.
только на этой странице есть небольшая ошибка: вы пишите background-color: #fcc; но это не желтый, а розовый цвет. а в вашем примере того, что должно получится прописан background-color: #ffc. )
Здравствуйте, спасибо большое.
Исправил.)