CSS II

Сегодня:

  • Иерархия

  • Псевдоклассы

  • Псевдоэлементы

  • Комбинации

  • Специфичность

  • Наследование

  • Значения и единицы измерения

Иерархия

<body>
    <section>
        <h2>Подписаться на рассылку:</h2>
        <p>После вашего согласия вам будут приходить уведомления</p>
        <form class="main">
            <div class="field">
                <label for="name" class="check-label">Ваше Имя</label>
                <input type="text" 
                       id="name" 
                       placeholder="Имя" 
                       class="filled">
            </div>
        </form>
    </section>
</body>

  • Родительский

  • Дочерний

Псевдоселекторы

Псевдоклассы

  • :active
  • :any
  • :checked
  • :default
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen
  • :focus
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited
  • .
  • .

 

 

 

Динамические псевдоклассы

  • :hover
  • :active
  • :focus
  • :link
  • :visited

Динамические псевдоклассы

  • disabled
  • enabled

Динамические псевдоклассы

  • valid
  • invalid

Структурные псевдоклассы

  • :root
  • :first-child/last-child
  • :nth-child/nth-last-child(2n+1)
  • :nth-of-type/nth-last-of-type(-n+4)
  • :only-child/only-of-type
  • :empty
<html>
    <ul>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>

    <p></p>
</html>

:first-child

Псевдоэлементы

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop

Я пример

Я тоже

 

::first-letter { color: red }

::first-line { color: blue }

Псевдоэлементы

Комбинации

Комбинации

<a href="/" class="red">На главную</a> 
<div class="info"> 
  Задача организации, в особенности же 
  реализация намеченных плановых заданий 
  обеспечивает широкому кругу 
  (специалистов) участие в формировании 
  направлений прогрессивного развития.
</div>
<div>
  <img src="./cats.png">
</div>
div.info { border: 1px solid black; }

.info.red { color: red; }

a[href].red { opacity: .9; }

a.red:hover { color: purple; }

#red#big { opacity: .9 }

Комбинаторы

  • div div - потомок

  • div > div - сын

  • div + div - младший брат

  • div ~ div - младшие братья

<html>
    <ul>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>

    <p></p>
</html>

ul li

<html>
    <ul>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>

    <p></p>
</html>

li li

<html>
    <ul>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>

    <p></p>
</html>

html > *

<html>
    <ul>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>

    <p></p>
</html>

li:first-child + li

<html>
    <ul>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>

    <p></p>
</html>

li:first-child ~ li

Перерыв

Специфичность

<p class="red yellow">
    Красный или желтый
</p>
.yellow {
    color: yellow;
}

.red {
    color: red;
}

Красный или желтый

Каскад

<p class="red yellow">
    Красный или желтый
</p>
p.yellow {
    color: yellow;
}

.red {
    color: red;
}

Красный или желтый

<p id="red" class="yellow">
    Красный или желтый
</p>
p.yellow {
    color: yellow;
}

#red {
    color: red;
}

Красный или желтый

Идентификатор

классы
псевдоклассы
атрибуты

элемент
псевдоэлемент

id="example"

#example { }

 

class="example"

.example { }

 

div

div { }

 

универсальный селектор, комбинаторы потомков, детей и прочие не влияют на специфичность

Специфичность

div {
    color: blue;
    font-weight: bold;
    font-size: 12px;
}

div#id {
    font-size: 15px;
}

html div {
    color: red;
}

/* 0 0 1 */

/* 1 0 1 */

/* 0 0 2 */

Специфичность

div {
    color: blue;
    font-weight: bold;
    font-size: 12px;
}

div#id {
    font-size: 15px;
}

html div {
    color: red;
}

/* 0 0 1 */

/* 1 0 1 */

/* 0 0 2 */

/* 0 0 1 */

/* 0 0 1 */

Специфичность

color: blue; /* 0 0 1 */

font-weight: bold; /* 0 0 1 */

font-size: 12px; /* 0 0 1 */

color: red; /* 0 0 2 */

font-size: 15px; /* 1 0 1 */

Специфичность

color: blue; /* 0 0 1 */

font: 13px Arial; /* 0 0 1 */

font-size: 12px; /* 0 0 1 */

font-weight: bold; /* 0 0 1 */

color: red; /* 0 0 2 */

font-size: 15px; /* 1 0 1 */

<div style="color: blue"></div>

div {

    color: green !important;

}

<div style="color: white !important"></div>

Специфичность

Инлайн стили по умолчанию приоритетнее стилей в CSS

Стили в CSS с !important приоритетнее инлайн стилей

Инлайн стили с !important приоритетнее всего 

(на самом деле нет)

p.class 

.class-1.class-2:first-child 

#id#id

/* 0 1 1 */

/* 0 3 0 */

/* 2 0 0 */

Специфичность

Наследование

<div>
    Привет,
    <abbr title="школа">
        Школа
    </abbr>
</div>
            
div {
    color: green; /* 0 0 1 */
    /* abbr { color : green } – нет специфичности */
}

Привет, школа

Привет, школа

Наследование

Наследование

Стили, которые наследуются (Полный список)

color
cursor
direction
empty-cells
font-family
font-size
font-weight
font-style
font-variant
font
word-spacing

letter-spacing
list-style-type

list-style-position
list-style-image
list-style
line-height
quotes
text-align
text-indent
text-transform
visibility
white-space

Порядок применения стилей

  • Стили браузера
  • Стили пользователя и/или плагинов браузера
  • Стили страницы
  • Стили пользователя и/или плагинов браузера с !important

Значения свойств

Числовые значения

  • Целые числа (1, 2, 3...)
  • Дробные числа (.5, 1.5)
  • Процентные значения (50%)

Абсолютные единицы измерения длины

  • Миллиметры (mm)
  • Сантиметры (cm)
  • Дюймы (in)
  • Пункты – используется в типографиях, 1 дюйм = 72 пункта (pt)
  • Пики – 12 пунктов (pc)

Абсолютные единицы удобны при определении CSS для печати. В вебе же практически не используются

Относительные единицы измерения длины

  • пикселы* (px)
  • em – зависит от размера шрифта (em)
  • rem – зависит от размера шрифта корневого элемента (rem)
  • ex – зависит от высоты символа x в данном шрифте
  • ch – зависит от ширины символа 0 в данном шрифте
  • vh/vw – 1/100 высоты и ширины viewport'а соответственно
  • vmax – 1/100 от максимума между высотой и шириной viewport'а
  • vmin – 1/100 от минимума между высотой и шириной viewport'а

Способы задания цвета

  • Именованные цвета – red
  • Функциональный – rgb(255, 0, 0) или rgba(255, 0, 0, 1)
  • Шестнадцатиричный – #ff0000 или #f00
  • Шестнадцатиричный с прозрачностью - #ff000000

Thanks for your attention!

Made with Slides.com