Основы 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 Resethtml, 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><a class="block__element">Link</a><span class="block__element">Text</span><a class="block__element">Link</a>

</div>

.block__element:first-of-type { color: red;}

Псевдоклассы порядка элементов :first-child и :first-of-type


</div>

.block__element:first-child { color: red;}

Псевдоклассы порядка элементов :last-child и :last-of-type


</div>

.block__element:last-of-type { color: red;}

Псевдоклассы порядка элементов :last-child и :last-of-type


</div>

.block__element:last-child { color: red;}

Псевдоклассы порядка элементов :only-child и :only-of-type


</div><div class="block">

<a class="block__element">Link</a></div>

.block__element:only-child { color: red;}

Псевдоклассы порядка элементов :only-child и :only-of-type<div class="block">

<a class="block__element">Link</a><a class="block__element">Link</a><span class="block__other-element">Text</span><a class="block__element">Link</a>

</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"><a class="block__element">Link</a><a class="block__element">Link</a><span class="block__other-element">Text</span><a class="block__element">Link</a>

</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>

.block__other-element:nth-child(3n) { color: red;}

.block__element:nth-child(3n+1) { color: red;}

Из всех потомков выбирает каждого третьего. Стили применяются, если у выбранного потомка есть класс block__other-element

Начиная с первого потомка, выбирает из всех каждого третьего. Стили применяются, если у выбранного потомка есть класс block__element


Из всех потомков выбирает нечетные. Стили применяются, если у выбранного потомка есть класс block__element

Из всех потомков выбирает четные. Стили применяются, если у выбранного потомка есть класс block__element


</div>

.block__element:nth-child(odd) { color: red;}

.block__element:nth-child(even) { color: red;}



<span class="block__other-element">Text</span>

</div>

.block__element:nth-child(3) { color: red;}

.block__element:nth-of-type(3) { color: red;}


Из всех потомков выбирает третьего. Стили применяются, если у выбранного потомка есть класс block__element

Так как block__element - это тег <a>, выбирает третьего потомка среди потомков с тегом <a>. Стили применяются, если у выбранного потомка есть класс block__element

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

<div class="block"><a class="block__element">Link</a><a class="block__element">Link</a><a class="block__element">Link</a><span class="block__other-element">Text</span><a class="block__element">Link</a><a class="block__element">Link</a>

</div>

.block__element:nth-last-child (3n) { color: red;}

Счет начинается с конца. Выбирает каждого третьего потомка. Стили применяются, если у выбранного потомка есть класс block__element.Так как <span> имеет другой класс, его цвет не изменяется


<div class="block"><a class="block__element">Link</a><a class="block__element">Link</a>

<a class="block__element">Link</a><span class="block__other-element">Text</span><a class="block__element">Link</a><a class="block__element">Link</a>

</div>

.block__other-element:nth-last-child (4) { color: red;}

Счет начинается с конца. Выбирает четвертого потомка. Стили применяются, если у выбранного потомка есть класс block__other-element.


<div class="block"><a class="block__element">Link</a><a class="block__element">Link</a><a class="block__element">Link</a><span class="block__other-element">Text</span><a class="block__element">Link</a><a class="block__element">Link</a>

</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">This is block</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><div class="block">This is block</div>

.block:target{ color: blue;}

BEM

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/

http://meyerweb.com/eric/tools/css/reset/

http://necolas.github.io/normalize.css/

https://ru.bem.info/method/naming-convention/

https://css-tricks.com/bem-101/

Education

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