базовый курс

ГРУППА КУРСА

Примеры 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>

Но Вы уже знаете о таком способе установки стиля и этот код не должен вызывать у Вас затруднений.

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