Web-технологии

Кейно Павел Петрович

pavel@mati.ru

Лекция 3

Каскадные таблицы стилей (CSS)

CSS (Cascading Style Sheets)

CSS — это язык стилей, определяющий отображение HTML-документов.
CSS разделяет верстку и представление (отображение).

CSS3

Исходный код документа

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

Содержимое стилевого файла

body {
  font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
  font-size: 18pt; /* Размер основного шрифта в пунктах */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */
  }
h1 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 34pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста */
  }
p {
  big-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; /* Отступ от линии снизу до текста */
  }
Посмотреть результат

Типы стилей

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

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

Преимущества стилей

Способы добавления стилей на страницу

Связанные (внешние) стили

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Стили</title>
    <link rel="stylesheet" href="mysite.css">
    <link rel="stylesheet" href="http://www.htmlbook.ru/main.css">
  </head>
<body>
  <h1>Заголовок</h1>
  <p>Текст</p>
</body>
</html>

Связанные (внешние) стили

/* Файл mysite.css */
h1 {
  color: #000080;
  font-size: 200%;
  font-family: Arial, Verdana, sans-serif;
  big-text-align: center;
  }
p {
  padding-left: 20px;
  }

Глобальные стили

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Глобальные стили</title>
	<style>
	  h1 {
        font-size: 120%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FF00FF;
        }
	</style>
  </head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>
Посмотреть результат

Внутренние (инлайн-) стили

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Внутренние стили</title>
  </head>
<body>
  <p style="font-size: 120%; font-family: monospace;
   color: #cd66cc">Пример текста</p>
</body>
</html>
Посмотреть результат

Импорт CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Импорт</title>
	<style>
	  @import url("style/headers.css");
	  h1 {
	    font-size: 120%;
	    font-family: Arial, Helvetica, sans-serif;
	    color: green;
	    }
	</style>
  </head>
<body>
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
</body>
</html>

Типы носителей

Тип Описание
all Все типы. Это значение используется по умолчанию.
aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.

Импорт стилевого файла

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Импорт стиля</title>
	<style>
	  /* Стиль для вывода результата на монитор */
	  @import "style/main.css" screen;
	  /* Стиль для печати и смартфона */
	  @import "style/smart.css" print, handheld;
	</style>
  </head>
<body>
  <p>...</p>
</body>
</html>

Директива @media

@media тип_носителя_1 {
  /* Описание стиля для типа носителя 1 */
  }
  
@media тип_носителя_2 {
  /* Описание стиля для типа носителя 2 */
  }

Пример HTML-кода

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Типы носителей</title>
  </head>
<body>
  <h1>Как поймать льва в пустыне</h1>
  <h2>Метод случайных чисел</h2>
  <p>Разделим пустыню на ряд элементарных прямоугольников, размер 
   которых совпадает с размером клетки для льва. После чего 
   перебираем полученные прямоугольники, каждый раз выбирая заданную 
   область случайным образом. Если в данной области окажется лев,
   то мы поймаем его, накрыв клеткой.</p>
</body>
</html>

Пример стиля для отображения на экране

@media screen { /* Стиль для отображения в браузере */
  body {
    font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
    font-size: 90%; /* Размер шрифта */
    color: #000080; /* Цвет текста */
    }
  h1 {
    background: #faf0e6; /* Цвет фона */
    border: 2px dashed maroon; /* Рамка вокруг заголовка */
    color: #a0522d; /* Цвет текста */
    padding: 7px; /* Поля вокруг текста */
    }
  h2 {
    color: #556b2f; /* Цвет текста */
    margin: 0; /* Убираем отступы */
    }
  p {
    margin-top: 0.5em; /* Отступ сверху */
    }
  }
Посмотреть результат

Пример стиля для печати

@media print { /* Стиль для печати */
  body {
    font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
	font-size: 100%; /* Размер шрифта */
    }
  h1, h2, p {
    border: 0; /* Обнуляем рамку */
    color: black; /* Черный цвет текста */
	padding: 0; /* Обнуляем поля */
    }
  }
Посмотреть результат

Указание типа носителя у связанного стиля

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Разные носители</title>
	<link media="print, handheld" rel="stylesheet" href="print.css">
	<link media="screen" rel="stylesheet" href="main.css">
  </head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
   volutpat.</p>
</body>
</html>

Указание типа носителя у глобального стиля

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Разные носители</title>
	<style media="handheld">
	  body {
	    width: 320px; /* Ширина страницы */
	    }
	</style>
  </head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
   volutpat.</p>
</body>
</html>

Базовый синтаксис CSS

selector {
  property1: value1;
  propertyN: valueN;
  }

Selector (селектор) — указывает на тег, класс или идентификатор к которому применяются стилевые параметры.

Property (свойство) — указывает, какое стилевое свойство применить к данному селектору (например: цвета, границы, размеры, шрифты и т.д.).

Value (значение) — указывает, какие именно значения установить для определённого свойства.

Формы записи

/* Расширенная форма записи */
td {
  background: olive;
  }
td {
  color: white;
  }
td {
  border: 1px solid black;
  }

/* Компактная форма записи */
td {
  background: olive;
  color: white;
  border: 1px solid black;
  }

Разные значения у одного свойства

/* 
  для одного и того же свойства применяется
  последнее указанное значение
*/
p {
  color: green;
  }
p {
  color: red;
  }

Комментарии

/* 
  Комментарии 

  Просто какой-то стиль
  Сделан для ознакомительных целей

*/
  
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left; /* Обтекание по правому краю */
  }

Значения стилевых свойств

Строки:

'Гостиница "Турист"'
"Гостиница 'Турист'"
"Гостиница \"Турист\""

Числа:

p { 
  font-weight: 600; /* Жирное начертание */ 
  line-height: 1.2; /* Межстрочный интервал */ 
  }

Проценты:

table { 
  width: 100%; /* Ширина таблицы в процентах */ 
  background: #f0f0f0; /* Цвет фона */ 
  }

Размеры

Относительные величины:
Единица Описание
em Размер шрифта текушего элемента.
ex Высота символа x.
px Пиксель.
% Процент.
Абсолютные единицы:
Единица Описание
in Дюйм (1 дюйм равен 2,54 см).
cm Сантиметр.
mm Миллиметр.
pt Пункт (1 пункт равен 1/72 дюйма).
pc Пика (1 пика равна 12 пунктам).

Представление цветов

Некоторые цвета

Имя Цвет Код Описание
white #ffffff или #fff Белый
silver #c0c0c0 Серый
gray #808080 Темно-серый
black #000000 или #000 Черный
maroon #800000 Темно-красный
red #ff0000 или #f00 Красный
orange #ffa500 Оранжевый
yellow #ffff00 или #ff0 Желтый
olive #808000 Оливковый
lime #00ff00 или #0f0 Светло-зеленый
green #008000 Зеленый
aqua #00ffff или #0ff Голубой
blue #0000ff или #00f Синий
navy #000080 Темно-синий
teal #008080 Сине-зеленый
fuchsia #ff00ff или #f0f Пурпурный
purple #800080 Фиолетовый

Адреса

body { 
  background: url('http://webimg.ru/images/156_1.png') no-repeat; 
  }
div { 
  background: url(images/warning.png) no-repeat;
  padding-left: 20px;
  margin-left: 200px;
  }

Селекторы тегов

тег {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Пример:

p {
  big-text-align: justify; /* выравнивание по ширине */
  color: green; /* зеленый цвет текста */
  }

Классы

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class="Имя класса".

Классы

тег.класс {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Пример CSS:

p.cite { /* Абзац с классом cite */
  color: navy; /* Цвет текста */
  margin-left: 20px; /* Отступ слева */
  border-left: 1px solid navy; /* Граница слева от текста */
  padding-left: 15px; /* Расстояние от линии до текста */
  }

Пример HTML:

<p class="cite">Для исключения засветки экрана дисплея световыми
 потоками оконные проемы снабжены светорассеивающими шторами.</p>

Идентификаторы

Идентификатор – уникальное пользовательское наименование для какого-либо элемента разметки. Добавляется к тегу с помощью атрибута id.

Идентификаторы

#идентификатор {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Пример CSS:

#help {
  position: absolute; /* Абсолютное позиционирование */
  left: 160px; /* Положение элемента от левого края */
  top: 50px; /* Положение от верхнего края */
  width: 225px; /* Ширина блока */
  padding: 5px; /* Поля вокруг текста */
  background: #f0f0f0; /* Цвет фона */ 
  }

Пример HTML:

<div id="help">Этот элемент помогает в случае, когда вы находитесь
 в осознании того факта, что совершенно не понимаете, кто и как вам
 может помочь.</div>

Идентификаторы и классы

Классы
  • Широко применяются для задания стилей в CSS.
  • Имеют возможность группировки.
Идентификаторы
  • Широко применяются при программировании в JavaScript.
  • Уникальны для каждой страницы HTML.
  • Приоритет стиля идентификатора выше, чем у класса.

Идентификаторы и классы чувствительны к регистру.

Контекстные селекторы

Это селекторы, работающие только внутри определенного контекста.

Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Контекстные селекторы

тег1 тег2 {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Здесь стиль будет применяться к тегу2 когда он размещается внутри тега1:

<тег1>
  <тег2>...</тег2>
</тег1>

Тоже самое справедливо и для классов. Здесь стилевые правила будут применяться только к тегу тег, который расположен внутри класса класс:

.класс тег {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Пример:

<p>Lorem <b>ipsum</b> dolor sit amet, <i>consectetuer</i>
 adipiscing <var>elit</var>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <var>. При этом <b> и <var> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Соседние селекторы

селектор1+селектор2 {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами.

Дочерние элементы

<div>
  <p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing 
   elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore
   magna aliguam erat volutpat.</p>
  <p><strong><em>Ut wisis enim ad minim veniam</em></strong>, 
   quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut
   aliquip ex ea commodo consequat.</p>
</div>

Дочерние элементы

<body>
	<div>
		<p>
		<em>
	</em>
	</p>
	<p>
		<strong>
		<em>
	</em>
	</strong>
	</p>
	</div>
</body>

Дочерние селекторы

селектор1>селектор2 {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Стиль применяется к селектору2, но только в том случае, если он является дочерним для селектора1.

Дочерние селекторы

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

Универсальный селектор

* {
  свойство1: значение1;
  свойствоN: значениеN;
  }

Стиль применяется ко всем тегам.

Например, в данном случае стиль установит красный цвет текста для всех элементов, которые находятся в теге <p>:

p * {
  color: #f00;
  }

Группирование

Пример стилей для каждого селектора:

h1 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 160%; 
  color: #003; 
  }
h2 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 135%; 
  color: #333; 
  }
h3 { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 120%; 
  color: #900;
  } 

Группирование

Пример сгруппированных стилей:

h1, h2, h3 { 
  font-family: Arial, Helvetica, sans-serif; 
  } 
h1 { 
  font-size: 160%; 
  color: #003;
  }
h2 { 
  font-size: 135%; 
  color: #333;
 }
h3 { 
  font-size: 120%; 
  color: #900;
  }

Наследование

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Валидация CSS

http://jigsaw.w3.org/css-validator/
Разработка: Викулин Максим