Введение в CSS

Стили представляют собой набор свойств, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.

Веб-страница, созданная на HTML

Рис. 1. Веб-страница, созданная на HTML

Это обычная веб-страница, в которой нет никакого дизайна, только чистый HTML. Тот же самый документ, но уже с добавлением стилей выглядит совершенно иначе (рис. 2).

Веб-страница, оформленная с помощью CSS

Рис. 2. Веб-страница, оформленная с помощью CSS

Перемена серьёзная, поэтому заглянем в исходный код, чтобы понять, в чём же разница (пример 1).

Пример 1. Исходный код веб-страницы

<!DOCTYPE html>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Флексагон</h1>
  <p>Флексагон представляет собой бумажную фигуру, которая имеет 
  три и более стороны. Поначалу кажется, что это невозможно, но вспомните 
  ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги, 
  и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и 
  склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но 
  стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, 
  что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. 
  Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
 </body>
</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — следующая строка:

<link rel="stylesheet" href="style.css">

Она ссылается на внешний стилевой файл с именем style.css. Содержимое этого файла показано в примере 2.

Пример 2. Содержимое style.css

body {
  font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h1 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселях */
  margin-right: 10px; /* Отступ справа в пикселях */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Расстояние от линии слева до текста */
  padding-bottom: 10px; /* Расстояние от линии снизу до текста */
}

В файле style.css как раз и описаны все параметры оформления таких элементов как <body>, <h1> и <p>. Заметьте, что сами элементы в коде HTML пишутся как обычно.

CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например способом определения цвета.

Типы стилей

Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя.

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок веб-страницы, формируемый через <h1>, в большинстве браузеров выводится шрифтом с засечками размером 32 пункта.

Стиль автора

Стиль, который добавляет к документу его разработчик. В примере 2 показан авторский стиль.

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство браузера > Кнопка «Оформление», как показано на рис. 3.

Подключение стиля пользователя в браузере Internet Explorer

Рис. 3. Подключение стиля пользователя в браузере Internet Explorer

Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.

Перейти к заданиям

Введение в CSS

Перейдите на сайт Plunker и отредактируйте файлы index.html и style.css, чтобы они соответствовали примерам 1 и 2. Остальные имеющиеся файлы удалите. После этого нажмите чёрную кнопку Run. Если всё сделано правильно, то вы увидите результат, похожий на рис. 1.

Plunker

Рис. 1. Plunker

Для дальнейшей работы можете сохранить код или скачать его на свой компьютер в виде архива.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 13.08.2017
Редакторы: Влад Мержевич