селектор {
свойство1: значение;
свойство2: значение;
...
}
Как сделать web-страницу красивой и удобной для пользователя
Использовать стили
В частности наиболее используемые: CSS
CSS - Cascading Style Sheets - каскадные таблицы стилей
Чаще всего CSS комбинируется с языками разметки HTML
CSS экономит время
Страницы загружаются быстрее
Простота обслуживания
Улучшенные стили для HTML
Совместимость нескольких устройств
Глобальные веб-стандарты
Оффлайн-просмотр
Независимость от платформы
селектор {
свойство1: значение;
свойство2: значение;
...
}
p {
color: white;
margin: 10px 15px;
}
h1 {
color: #8B4513;
}
* {
color: #808080;
}
ul em {
color: #CD5C5C;
}
.blue {
color: #0000FF;
}
<p class="blue bold">
Этот абзац будет оформлен классами center и bold.
</p>
#blue {
color: #0000FF;
}
body > p {
color: #0000FF;
}
strong + em {
color: #0000FF;
}
[type = "text"] {
color: #0000FF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стили</title>
</head>
<body>
<p style="font-size: 1.2em; font-family: monospace; color: #cd66cc">Пример текста</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стили</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic">
<style>
h1 {
font-family: 'Lobster', cursive;
color: green;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стили</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
h1 {
font-family: 'Lobster', cursive;
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Импорт</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
h1 {
font-family: 'Lobster', cursive;
color: green;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
h1 {
font-family: 'Lobster', cursive;
color: green;
}
Селектор_1, Селектор_2, ... Селектор_N {
Описание правил стиля
}
Каскадирование – комбинирование стилей из разных CSS-правил, для элементов страницы.
Комбинирование происходит по четким правилам, опирающихся на приоритетность и специфичность
Стиль браузера.
Стиль автора.
Стиль пользователя.
Стиль автора с добавлением !important.
Стиль пользователя с добавлением !important.
* {} /* a=0 b=0 c=0 -> специфичность = 0 */
li {} /* a=0 b=0 c=1 -> специфичность = 1 */
li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */
ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */
li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */
#t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */
margin
— очищает пространство вокруг границы элемента, не позволяя другим элементам приближаться к границе элемента. Можно сказать, что это "личное пространство" элемента.
margin
не имеет фонового цвета и прозрачен
border
— граница (рамка), окружающая padding
и content
(содержимое).
Цвет границы можно изменить
padding
— очищает пространство вокруг content (содержимого). Можно сказать, что это "личное пространство" контента.
padding
окрашивается в цвет фона элемента.
content
— пространство для содержимого, куда помещается текст и/или изображения.
оформление текста
работа с размерами и отступами
позиционирование элементов
создание сеток
декоративные: цвета, фон, тени
другие
text-decoration
font-weigth
font-style
margin
padding
width
position
top
…
left
float
clear
background-color
border-radius
color
float
float
Элемент является плавающим.
Элементы идущие в коде после него, обтекают его
Может применяться к любому элементу
float
value | content |
---|---|
| плавающий, прижат влево |
| плавающий, прижат вправо |
| обычный, не плавающий |
float
Если после float
элемента следует еще один float
элемент, второй float
обтекает первый
Если несколько float
и один по размерам больше другого, то образуется область «не обтекания»
Если несколько float
не умещаются в ширину, то элементы переносятся ниже, при этом обтекая предыдущие
clear
Запрещает данному элементу обтекать плавающие элементы, с одной или двух сторон
Может применяться к любому элементу
clear
value | content |
---|---|
| не может обтекать плавающий элемент, который расположен слева |
| не может обтекать плавающий элемент, который расположен справа |
| не может обтекать плавающий элемент вообще |
| может обтекать плавающие с любой стороны |
clear
Если отключено обтекание, то он не обтекает плавающие независимо от уровня вложенности
Если отключено обтекание, то он не обтекает другие элементы, но это не мешает другим обтекать его
Обтекаемым может быть любой элемент. Для обтекаемых блочных элементов важно указать ширину
overflow
overflow
Размер обтекающего элемента включает в себя площадь, закрытую плавающим элементами
Фон, рамки обтекаемого распространяются на площадь закрытую плавающим
Можно скрыть те части фона и рамок, закрытые плавающим
overflow
value | content |
---|---|
| скрыть части обтекаемого, которые закрыты плавающим |
overflow
Внешние поля и внутренние отступы обтекающих элементов нахлестываются на плавающие элементы, насколько это возможно