Основы CSS (HTML5 тема 02 - основы CSS)

Основы CSS
Стажировка HTML5
Света Шарипова

Способы подключения стилей
1. Подключение стилей в отдельном документе
<head>
<link rel="stylesheet" href="main.css">
</head>
2. Подключение стилей в <head>
<head>
<style>
...
</style>
</head>

Способы подключения стилей
3. Инлайн-стили:
<div style="height: 300px;"></div>
4. Импорт стилей внутри документа .css
@import "newstyles.css";

Селекторы
Селектор тега: p { ... }
Селектор класса: .class { ... }
Селектор индентификатора: #id { ... }
Селектор атрибута: [data-title=”...”] { ... }
Селектор псевдокласса: :hover { ... }
Селектор псевдоэлемента: ::before { ... }
Универсальный селектор: * { ... }

Комбинирование селекторов
Все <div class=”wrapper”> div.wrapper { ... }
Только <div id=”modal”> div#modal { ... }
Все <a>, имеющие атрибут title a[title] { ... }
Все <a>, атрибут title которых содержит слово show a[title*=”show”] { ... }
Все <a>, title которых содержит show, отделенное пробелом a[title~=”show”] { ... }
Все <a>, title которых начинается с show a[title^=”show”] { ... }
Все <a>, title которых заканчивается на show a[title$=”show”] { ... }
Все <a>, при наведении на них курсора a:hover { ... }
Псевдоэлемент, являющийся первым потомком <a> a::before { ... }

Комбинирование селекторов
Все <p>, все <div>: div, p { ... }
Все <p>, являющиеся потомками <div>: div p { ... }
Все <p>, являющиеся прямыми потомками <div>: div > p { ... }
Все потомки <div>: div * { ... }
Все прямыe потомки <div>: div > * { ... }
Каждый <p>, следующий сразу после <div>: div + p { ... }
Все <p>, после <div>: div ~ p { ... }

Каскад и специфичность
При одинаковой специфичности, правило, которое находится ниже,
переопределяет все предыдущие:
p { color: red; }
p { color: blue; }
<link rel="stylesheet" href="main.css">
<style>
p {color: red;}
</style>
<link rel="stylesheet" href="main2.css">

Какого цвета текст в <p>?
<html>
<head>...</head>
<body>
<div>
<p class="text"> Lorem </p>
</div>
</body>
</html>
.text { color: blue;}
html body div p { color: red;}

Расчет специфичности

Расчет специфичности
Универсальный селектор * 0,0,0,0 Псевдокласс :not 0,0,0,0
Элемент, например p 0,0,0,1 Псевдоэлемент, например ::before 0,0,0,1
Класс, например .wrapper 0,0,1,0
Другой псевдокласс, например
:hover
0,0,1,0
Атрибут,
например [title] или [title=”show”]
или [title*=”show”] или
[title~=”show”]
или [title^=”show”] или
[title$=”show”]
0,0,1,0
ID, например #modal 0,1,0,0
Инлайн-стиль <style></style> 1,0,0,0
!important 1,0,0,0,0

Пример правила CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

Пример правил CSS Normalize
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
body {
margin: 0;
}

Псевдоэлементы
::after
::before
::first-letter
::first-line - плохая поддержка, много багов
::selection - нет поддержки на iOS
::backdrop - плохая поддержка

Псевдоэлементы ::after и ::before
<div class="block__element">Some text</div>
.block__element::before {
content: “Pseudo “;
color: #f1652a;
}
.block__element::after {
content: ””;
display: inline-block;
width: 20px;
height: 20px;
background: #f1652a;
}

Псевдоэлементы ::after и ::before
Отсутствует свойство content
Применяется свойство display: none

Псевдоэлемент ::first-letter
<div class="block__element">Some text</div>
.block__element::first-letter{
color: #f1652a;
font-size: 2em;
}

Псевдоклассы
Плохая поддержка:
:default
:dir()
:fullscreen
:indeterminate
:left
:read-only
:read-write
:right
:scope

Псевдоклассы состояния
:active
:focus
:hover
:visited - только для ссылок
:link - только для ссылок
Порядок, чтобы
избежать переопределения:
:link — :visited — :hover — :active.

Псевдоклассы для стилизации форм
:checked
:disabled
:enabled
:in-range - плохая поддержка
:out-of-range - плохая поддержка
Псевдоклассы валидации
(частичная поддержка, IE10+)
:invalid
:optional
:required
:valid

Псевдоклассы порядка элементов
:first-child
:first-of-type
:last-child
:last-of-type
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

:first-child и :first-of-type
<div class="block">
<a class="block__element">Link</a>
<span class="block__element">Text</span>
</div>
.block__element:first-of-type {
color: red;
}

:first-child и :first-of-type
<div class="block">
</div>
.block__element:first-child {
color: red;
}

:last-child и :last-of-type
<div class="block">
</div>
.block__element:last-of-type {
color: red;
}

:last-child и :last-of-type
<div class="block">
</div>
.block__element:last-child {
color: red;
}

:only-child и :only-of-type
<div class="block">
</div>
<div class="block">
</div>
.block__element:only-child {
color: red;
}

:only-child и :only-of-type
<div class="block">
<span class="block__other-element">Text</span>
</div>
<div class="block">
<span class="block__element">Link</span>
<span class="block__other-element">Link</span>
</div>
.block__other-element:only-of-type {
color: red;
}

<div class="block">
</div>
.block__element:nth-child(2) {
color: red;
}
.block__element:nth-child(2n) {
color: red;
}
Из всех потомков выбирает
второго. Стили применяются,
если у выбранного потомка есть
класс block__element
каждого второго. Стили
применяются, если у выбранного
потомка есть класс block__element
Псевдоклассы :nth-child() и :nth-of-type()

<div class="block">
</div>
.block__other-element:nth-child(3n) {
color: red;
}
.block__element:nth-child(3n+1) {
color: red;
}
Из всех потомков выбирает каждого
третьего. Стили применяются, если у
выбранного потомка есть класс
block__other-element
Начиная с первого потомка, выбирает
из всех каждого третьего. Стили
применяются, если у выбранного

нечетные. Стили применяются,
если у выбранного потомка есть
класс block__element
четные. Стили применяются, если
у выбранного потомка есть класс
block__element
<div class="block">
</div>
.block__element:nth-child(odd) {
color: red;
}
.block__element:nth-child(even) {
color: red;
}

<div class="block">
</div>
.block__element:nth-child(3) {
color: red;
}
.block__element:nth-of-type(3) {
color: red;
}
Из всех потомков выбирает третьего.
Стили применяются, если у выбранного
Так как block__element - это тег <a>,
выбирает третьего потомка среди
потомков с тегом <a>. Стили
применяются, если у выбранного потомка
есть класс block__element

:nth-last-child() и :nth-last-of-type()
<div class="block">
</div>
.block__element:nth-last-child (3n) {
color: red;
}
Счет начинается с конца.
Выбирает каждого третьего
потомка. Стили применяются,
если у выбранного потомка
есть класс block__element.
Так как <span> имеет другой
класс, его цвет не изменяется

<div class="block">
</div>
.block__other-element:nth-last-child (4) {
color: red;
}
Выбирает четвертого потомка.
Стили применяются, если у
выбранного потомка есть класс
block__other-element.

<div class="block">
</div>
.block__element:nth-last-of-type(3) {
color: red;
}
Так как block__element -
это тег <a>, выбирает
третьего потомка среди
потомков с тегом <a>.
Стили применяются, если
у выбранного потомка
есть класс block__element

Другие псевдоклассы
:empty - выбирает пустые теги
:not() - выбирает теги за исключением тегов с
селектором в скобках
:lang() - выбирает теги по указанному языку
:root = html, но специфичность выше
:target - используется для стилизации цели “якоря”

Другие псевдоклассы - :empty
<div class="block">
<div class="block__element">This is element</div>
</div>
<div class="block">This is block</div>
<div class="block"></div>
.block {
width: 100px;
height: 50px;
}
.block:empty {
background: orange;
}

Другие псевдоклассы - :not()
<div class="block">
<div class="block__element">This is element</div>
</div>
<div class="block"></div>
.block {
width: 100px;
height: 50px;
}
.block:not(:empty) {
background: orange;
}

Другие псевдоклассы - :lang()
<html lang="ru">
<head></head>
<body>
<div class="block">
<div class="block__element">Какой-то текст</div>
<div lang="en" class="block__element">Other text</div>
</div>
</body>
</html>
.block__element:lang(ru) {
color: blue;
}
.block__element:lang(en) {
color: green;
}

Другие псевдоклассы - :target
<a href="#mainInfo">Link to target</a>
<div id="mainInfo" class="block">This is target block</div>
.block:target{
color: blue;
}

BEM
<div class="block">
<div class="block__element"></div>
<div class="block__element block__element--modifier"></div>
</div>

BEM
<div class="block">
<div class="block__element">
<div class="block__element__element">
</div>
</div>
</div>
<div class="block">
<div class="block__element">
<div class="other-block">
</div>
</div>
</div>

Полезные ссылки
Reset:
http://meyerweb.com/eric/tools/css/reset/
Normalize:
http://necolas.github.io/normalize.css/
BEM:
https://ru.bem.info/method/naming-convention/
https://css-tricks.com/bem-101/

Основы CSS (HTML5 тема 02 - основы CSS)

Recommended

Recommended

More Related Content

Similar to Основы CSS (HTML5 тема 02 - основы CSS)

Similar to Основы CSS (HTML5 тема 02 - основы CSS) (20)

More from Noveo

More from Noveo (20)

Основы CSS (HTML5 тема 02 - основы CSS)