**CSS** (Cascading Style Sheets) - каскадные таблицы стилей.
## Стилевые файлы
Пример возможных стилевых файлов:
- `main.css` - для компьютеров
- `mob.css` - для смартфонов
- `printer.css` - для печати
  
Пример стилевого файла - `test.css`:
```css
body {
	color: white;
	background: #FF6600;
}
```
- `body` - название тега
- `color` - свойство (цвет символов)
- `white` - значение (белый)
- `background` - свойство (цвет фона)
- `##FF6600` - значение (`R` = `FF` = 255, `G` = `66` = 102, `B` = `00` = 0)
#### Подключение стилевого файла
`<link rel="stylesheet" type="text/css" href="test.css">`, где `stylesheet` - таблица стилей, `text/css` - тип данных MIME (Multipurpose Internet Mail Extension)
Подключение стилевого файла в HTML-коде:
```html
<html>
	<head>
		<title>Страница с файлом стилей</title>
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	
	 <body>
		 Привет, Вася!
	</body>
</html>
```
Стилевой файл `test.css`:
```css
body {
	color: white;
	background: #0000E0;
}
```
Результат (синий фон, белый текст):  
![Подключение стилевого файла](../Pictures/07_01.%20Подключение%20стилевого%20файла.png)  
## Стили для элементов
### Шрифты
```css
p {
	font-family: Arial,sans-serif;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
}
```
- `p` - для всех абзацев
- `font-family` - семейство шрифтов:
	- `serif` - с засечками
	- `sans-serif` - без засечек
	- `monospace` - моноширинный
- `font-size` - размер в пикселях
- `font-style`:
	- `normal` - обычный
	- `italic` - курсив
- `font-weight`:
	- `normal` - обычный
	- `bold` - жирный
#### Размеры, выравнивание
```css
p {
	background: #E6E6FF;
	width: 80%;
	height: 100px;
	text-align: left;
	text-indent: 20px;
}
```
- `background` - цвет фона
- `width` - ширина
- `height` - высота
- `test-align` - выравнивание:
	- `left` - по левому краю
	- `center` - по центру
	- `right` - по правому краю
	- `justify` - по ширине
- `text-indent` - абзацный отступ
  
Результат:  
![Размеры, выравнивание текста](../Pictures/07_02.%20Размеры,%20выравнивание%20текста.png)
#### Рамка, поля, отступы
```css
p {
	background: #ccffcc;
	border: 1px solid green;
	margin: 0 40px 20px 40px;
	padding: 5px;
}
```
- `border` - рамка:
	- `1px` - толщина
	- Вид линии:
		- `solid` - сплошная
		- `dashed` - штриховая
		- `dotted` - точечная
	- `green` - цвет
- `margin` - отступы снаружи:
	- `0` - сверху
	- `40px` - справа
	- `20px` - снизу
	- `40px` - слева
- padding - отступы внутри:
	- `5px` - со всех сторон
  
![Параметры для рамки, полей и отступов](../Pictures/07_03.%20Параметры%20для%20рамки,%20полей%20и%20отступов.png)  
Результат:  
![Рамка, поля, отступы текста](../Pictures/07_04.%20Рамка,%20поля,%20отступы%20текста.png)
### Таблицы
#### Выравнивание
Без CSS:
- всей таблицы - `<table align="...">`:
	- `left` - по левому краю
	- `center` - по центру
	- `right` - по правому краю
	```html
	<table align="center">
	...
	</table>
	```
- информации в ячейках - `<tr align="..." valign="...">`, где значения `align` - аналогично выравниванию всей таблицы, а значения `valign`:
	- `top` - по верхней границе
	- `middle` - по центру
	- `bottom` - по нижней границе
	```html
	<table border="1">
	<tr align="center" valign="top">
		<td width="120">по центру, по верхней границе</td>
		<td align="right" valign="middle" width="200">по правой границе, по середине</td>
	</tr>
	</table>
	```
  
Результат:  
![Выравнивание таблицы без CSS](../Pictures/07_05.%20Выравнивание%20таблицы%20без%20CSS.png)  
Через CSS:  
HTML-код:
```html
<table class="ex" border="1">
<tr class="centop">
	<td>По центру, по верхней границе</td>
	<td class="rmid">По правой границе, по середине</td>
</tr>
</table>
```
CSS-файл:
```css
table.ex tr.centop {
	text-align: center;
	vertical-align: top;
	height:100px;
}

table.ex td.rmid {
	text-align: right;
	vertical-align: middle;
	width:200px;
}
```
где:
- `text-align`:
	-  `left` - по левому краю
	- `center` - по центру
	- `right` - по правому краю
- `vertical-align:`
	- `top` - по верхней границе
	- `middle` - по центру
	- `bottom` - по нижней границе
  
Результат:  
![Выравнивание таблицы через CSS](../Pictures/07_06.%20Выравнивание%20таблицы%20через%20CSS.png)
#### Фон и цвет текста
HTML-код:
```html
<table border="1" class="qq">
<tr class="spec">
	<td>Привет!</td>
	<td class="r"></td>
</tr>
<tr>
	<td class="pic"> Таблица из двух строк</td>
	<td>и двух столбцов</td>
</tr>
</table>
```
CSS-файл:
```css
table.qq td {
	background: green;
}

table.qq tr.spec td {
	background: blue;
	color: white;
}

table.qq tr.spec td.r {
	background: red;
}

table.qq td.pic {
	background: url("web.jpg");
}
```
В первых 3 случаях в качестве фона используется цвет, а в четвертом - рисунок.  
Результат:  
![Фон и цвет текста таблицы](../Pictures/07_07.%20Фон%20и%20цвет%20текста%20таблицы.png)
#### Отступы
Без CSS:
- `cellspacing` - интервал между ячейками
- `cellpadding` - отступ внутри ячеек
```html
<table cellspacing = "10" cellpadding = "10" bgcolor = blue>
<tr bgcolor = white>
	<td width = "100">1</td>
	<td width = "100">2</td>
</tr>
</table>
```
![Отступы таблицы без CSS](../Pictures/07_08%20Отступы%20таблицы%20без%20CSS.png)  
Через CSS:
- `id` - идентификатор (уникальное имя)
  
HTML-код:
```html
<table id="qq">
<tr>
	<td>1</td>
	<td>2</td>
</tr>
</table>
```
CSS-файл:
```css
table#qq {
	background: blue;
	border-collapse: separate;
	border-spacing: 10px;
	padding: 10px;
}

#qq tr {
	background: white;
}
```
![Отступы таблицы через CSS](../Pictures/07_09.%20Отступы%20таблицы%20через%20CSS.png)
### Гиперссылки
- Все гиперссылки:
	```css
	a {
		color: green;
		text-decoration: none;
	}
	```
	- `color` - цвет
	- `text-decoration: none` - убрать подчеркивание
	  
	![Стиль гиперссылки](../Pictures/07_10.%20Стиль%20гиперссылки.png)
- Посещенные гиперссылки:
	```css
	a:visited { color: #0000AA; }
	```
	- `visited` - псевдокласс
	- `color` - цвет
	  
	![Стиль посещенной гиперссылки](../Pictures/07_11.%20Стиль%20посещенной%20гиперссылки.png)
- Гиперссылки при наведении мыши:
	```css
	a:hover {
		color: red;
		text-decoration: underline;
	}
	```
	- `hover` - псевдокласс
	- `color` - цвет
	- `text-decoration: underline` - подчеркивание
	  
	![Стиль гиперссылки при наведении мыши](../Pictures/07_12.%20Стиль%20гиперссылки%20при%20наведении%20мыши.png)
## Классы
HTML-код:
```html
<p class="error">Ошибка!Что-то с памятью.</p>
```
CSS-файл:
```css
p.error {
	background:red;
}

p {
	background:blue;
	color:white;
}
```
`p.error` - для абзацев класса `error`.  
Результат:  
![Абзац класса error](../Pictures/07_13.%20Абзац%20класса%20error.png)  
Более конкретное указание отменяет более общее.  
`<span>` - элемент в тексте.  
HTML-код:
```html
<p><span class="error">Ошибка!</span>Что-то с памятью.</p>
```
CSS-файл:
```css
.error {
	background:red;
	color:white;
}
```
`.error` - для всех элементов класса `error`.
Результат:  
![Элемент класса error](../Pictures/07_14.%20Элемент%20класса%20error.png)  
## Фоновый рисунок
HTML-файл:
```html
<p class="hallo">Привет, Вася!</p>
```
CSS-файл (с повторением):
```css
p.hallo {
	background: white url(images/grad.jpg);
}
```
![Фоновый рисунок с повторением](../Pictures/07_15.%20Фоновый%20рисунок%20с%20повторением.png)  
CSS-файл (только с вертикальным повторением):
```css
p.hallo {
	background: url(grad.jpg) repeat-y;
}
```
![Фоновый рисунок с вертикальным повторением](../Pictures/07_16.%20Фоновый%20рисунок%20с%20вертикальным%20повторением.png)  
HTML-файл:
```html
<p class="email">
<a href="mailto:qq@mail.ru">qq@mail.ru</a>
</p>
```
CSS-файл (без повторения):
```css
p.email {
	background: url(letter.gif) no-repeat;
	padding-left: 20px;
}
```
![Фоновый рисунок без повторения](../Pictures/07_17.%20Фоновый%20рисунок%20без%20повторения.png)  
## Составные селекторы
#### Общие свойства для нескольких тегов
```css
code, pre {
	font-weight: bold;
	font-family: Courier New, monospace;
}
```
#### Вложенные элементы
`a` внутри `em`:
```css
em a {
	font-style: normal;
}
```
## Сложные селекторы
- Ссылки внутри абзаца класса `email`:
	```css
	p.email a {
		color: green;
		 text-decoration:none;
	}
	```
	- `color` - цвет
	- `text-decoration:none` - убрать подчеркивание
- Посещенные ссылки:
	```css
	p.email a:visited {
		color: #F0F;
	}
	```
	- `color` - цвет:
		- `#F0F` - то же, что `#FF00FF`
- Мышь над ссылкой:
	```css
	p.email a:hover {
		color: #00F;
		text-decoration:underline;
	}
	```
	- `color` - цвет
	- `text-decoration:underline` - подчеркнуть