Примеры CSS

Для примеров кода CSS мы будем использовать такие же страницы, как в учебнике HTML. На этих страницах будут находиться элементы, к которым и будет применяться стиль. Сам стиль будет располагаться тоже на странице, в основном, в тэге <style>. Было бы бессмысленно для каждой страницы создавать свой файл стилей. Как и в учебнике HTML, я не буду писать в коде примеров строки, которые присутствуют в шаблоне и должны быть на всех страницах. В примерах будет HTML код, который должен находиться в тэге <body>, а также код стилей, который должен находиться в теге <style> внутри тэга <head>. Таким образом, такая страница:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
div
  {
  color: Red; 
  padding: 10px;
  }
</style>
</head>
<body>
<div>Блок</div>
</body>
</html>

будет выглядеть так:

Стиль:

7
8
9
10
11

div 
  {
  color: Red;
  padding: 10px;
  }

HTML код:

15	<div>Блок</div>

Как видите, стиль располагается выше HTML кода. Это сделано для того, чтобы пример визуально был больше похож на страницу. Ведь стиль содержится внутри тэга <head> и находится выше контента страницы. Но смотреть, конечно, нужно сначала HTML код, а потом стиль. Ведь сначала нужно увидеть элемент страницы, а уж потом стиль, который к нему применяется. И писать нужно сначала HTML код, потому что на практике делается именно так - сначала на страницу добавляется элемент, потом ему устанавливается стиль.

Короткий код стиля иногда будет располагаться в атрибуте тэга. Например так:

16	<p style="font-size: 20px">Текст</p>

Для каждой темы учебника будет создаваться только по одной странице. По мере рассмотрения новых вопросов, на странице будут появляться новые свойства. В том числе, эти свойства будут присваиваться уже созданному элементу страницы. Об этом будет сказано перед кодом примера. Также, по номерам строк будет понятно, куда добавляются свойства.