3. 1. Отдельным файлом
<head>
<link href="style.css" rel="stylesheet">
</head>
1. В теги <style></style>
<style type="text/css">
H1 {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336;
}
</style>
1. Через атрибут элемента
<h1 style="font-size: 20px; font-family: Verdana, Arial; color: #336;">Заголовок</h1>
Как подключить css к html файлу
4. Правила. Простые селекторы
Простейшие селекторы — это селекторы по именам тегов. С их
помощью можно задать стили для всех абзацев на странице, для всех
ссылок, заголовков первого уровня и так далее. Такие селекторы
содержат имя тега без символов < и >. Например:
p {
/* стили для абзацев */
}
h1 {
/* стили для заголовков */
}
5. Сложные селекторы
<p class="help"></p>
<p class="help error"></p>
В примере у первого абзаца задан класс help, у второго абзаца
заданы классы help и error.
Селектор с использованием класса задаётся так: .имя_класса.
Например:
.help { ... }
.error { ... }
6. В CSS существует огромное количество свойств. Их
можно разбить на следующие группы:
оформление текста;
работа с размерами и отступами;
позиционирование элементов;
создание сеток;
декоративные: цвета, фон, тени;
другие.
7. Пример CSS кода
body {
background: #F6F1F1; /* Цвет фона */
}
.main /*стили класса main*/{
background: #418be2;
border-radius: 5px; /* Округление углов блока*/
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /*Задание тени*/
margin: 25px auto 25px; /*Внешние отступы*/
padding: 25px 50px; /* Внутренние отступы*/
text-align: left;
font-family: arial; /*Шрифт*/
width: 900px; /* Ширина блока */
}
8. CSS расшифровывается как «каскадные таблицы
стилей», т.е. стили для элемента могут быть
определены в нескольких местах: внутри одного
файла стилей и в разных файлах стилей.
Браузер находит все CSS-правила, затрагивающие
данный элемент, а затем комбинирует их и получает
итоговый список свойств для этого элемента.
Комбинирование свойств производится по чётким
правилам, которые опираются на приоритетность и
специфичность.
9. Каскадность
/HMTL/
<p class="truth">Веб-разработчик, постигший тайны каскадности, достигает просветления в
вёрстке и становится гуру.</p>
<p>Веб-разработчик, не стремящийся постигнуть каскадность, станет королем
программирования.</p>
/CSS/
p {
outline: 2px solid rgba(0, 0, 0, 0.1);
padding: 10px;
}
.truth {
background-color: #dff0d8;
}
10. Приоритеты CSS
Когда для одного и того же элемента есть несколько CSS-правил с
одинаковыми свойствами, браузер использует понятия приоритетов и
специфичности, чтобы выбрать значение свойства из нескольких
возможных. Упрощённо, можно сказать что:
1. CSS-правила в значении атрибута style самые приоритетные,
2. за ними идёт селектор с id,
3. затем селектор с классом,
4. затем селектор с именем тега.
11. Приоритеты CSS. Пример
p {
padding: 10px;
background-color: #dff0d8;
}
+
.truth {
background-color: #aaddff;
}
=
стили второго абзаца {
padding: 10px;
background-color: #dff0d8;
background-color: #aaddff;
}
12. Коктейль классов
<p class="blue nice-box">Каскадность — это очень мощный механизм.</p>
<p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в
вёрстке и становится гуру.</p>
<p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется
подмастерьем.</p>
/CSS/
.green {
background-color: #dff0d8;
}
.blue {
background-color: #aaddff;
}
.nice-box {
padding: 10px;
border-radius: 5px;
box-shadow: 1px 1px 5px #CCC;
}
13. Наследование
<p class="blue nice-box">Каскадность — это очень мощный механизм.</p>
<p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в
вёрстке и становится гуру.</p>
<p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется
подмастерьем.</p>
/CSS/
.green {
background-color: #dff0d8;
}
.blue {
background-color: #aaddff;
}
.nice-box {
padding: 10px;
border-radius: 5px;
box-shadow: 1px 1px 5px #CCC;
}
14. Наследование
<p class="blue nice-box">Каскадность — это очень мощный механизм.</p>
<p class="green nice-box">Веб-разработчик, постигший тайны каскадности, достигает просветления в
вёрстке и становится гуру.</p>
<p class="blue nice-box">Веб-разработчик, не стремящийся постигнуть каскадность, так и останется
подмастерьем.</p>
/CSS/
.green {
background-color: #dff0d8;
}
.blue {
background-color: #aaddff;
}
.nice-box {
padding: 10px;
border-radius: 5px;
box-shadow: 1px 1px 5px #CCC;
}
15. Наследование
Другой важный механизм CSS — это наследование. Он заключается в том, что часть
стилей может передаваться от родительского элемента к дочерним (вложенным в него).
Например, все элементы внутри тега body являются дочерними по отношению к нему.
Если для body в стилях задать цвет текста красным, то цвет всех остальных элементов
тоже станет красным.
Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li.
Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.
Наследование работает не для всех свойств. Некоторые свойства применяются только к
самому элементу и не переходят к его потомкам. К таким ненаследуемым свойствам
относятся: ширина, высота, отступы, режим позиционирования и другие. Согласитесь,
было бы странно задать отступы для body и обнаружить, что у всех вложенных элементов
тоже появились отступы.
16. Селекторы контекстные или вложенные
Селектор может состоять из нескольких частей, разделённых пробелом, например:
/* выбрать все теги strong внутри тегов p */
p strong { ... }
/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }
/* выбрать все ссылки внутри элементов с классом .menu,
которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }
17. Дочерние селекторы
Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними
элементами называются ближайшие потомки. Взгляните на пример:
<ul>
<li><span>...</span></li>
<li><span>...</span></li>
</ul>
По отношению к <ul> <li> являются дочерними элементами и потомками, а <span> — потомки, но не
дочерние элементы.
Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили
только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками.
Для этого существует дочерний селектор, в котором используется символ >.
Например: ul > li или ul > li > span.
18. Псевдоклассы
Псевдоклассы — это дополнения к обычным селекторам, которые делают их ещё точнее и мощнее.
Псевдокласс добавляется к селектору c помощью символа :, вот так селектор:псевдокласс. Например:
a:visited { ... }
li:last-child { ... }
.alert:hover { ... }
19. Псевдоклассы hover
Псевдокласс hover позволяет обозначать стили элемента при наведении на него курсора.
.block{ ... }
.block:hover { ... } /* Эти свойства будут работать при наведении курсора*/
20. Селекторы атрибутов
Чаще всего такие селекторы используются при работе с формами, так как поля форм
имеют атрибут type с разными значениями.
Селекторы атрибутов записываются с использованием квадратных скобок:
элемент[атрибут]. Примеры селекторов:
1. input[checked] { ... }
2. input[type="text"] { ... }
Первый селектор выберет поля формы, у которых есть атрибут checked, второй селектор
выберет поля формы, у которых атрибут type имеет значение text
21. Селекторы по id
Существует ещё один HTML-атрибут, для которого существует специальный селектор.
Этот атрибут id (идентификатор), а селектор записывается с помощью символа #,
например, #some-id.
На значение id распространяются те же ограничения, что и на имя класса. Также id
должен быть уникальным на странице.
Использование селекторов по id при оформлении считается плохой практикой.
Существуют редкие исключения из этого правила, например, при оживлении слайдера на
чистом CSS
22. Полезные ссылки
htmlbook.ru - справочник по HTML/CSS
www.w3.org - организация, разрабатывающая и
внедряющая технологические стандарты для
Всемирной паутины
codepen.io - онлайн редактор кода, с возможностью
делится своими исходниками
