CSS

Мохов Олег
Разработчик интерфейсов

История

HTML – это трафарет

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Удивительно, но это просто div

Хочется большего

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Удивительно, но это просто div

<font>

<font>


ПРЕВЕД
                        

<body bgcolor="#f1f1f1">
    
Основной заголовок

    
Текст параграфа 1

    
Подзаголовок 1

    
Текст параграфа 2

    
Подзаголовок 2

    
Текст параграфа 3

</body>

1995

CSS

CSS: причины появления

– избыточность HTML

– больше возможностей для оформления

– упрощение оформления страницы

– избавление от копипасты

– разделение контента и визуальной составляющей страницы

CSS


<body bgcolor="#f1f1f1">
    
Основной заголовок

    
Текст параграфа 1

    
Подзаголовок 1

    
Текст параграфа 2

    
Подзаголовок 2

    
Текст параграфа 3

</body>
                        

body {
    background: #f1f1f1;
}
h1 {
    font-size: 34px;
    color: red;
    font-face: Tahoma;
    text-align: center;
}
h2 {
    font-size: 24px;
    font-face: Tahoma;
}
p {
    font-size: 18px;
    color: gray;
    font-face: Arial;
}


<body>
    
Основной заголовок

    
Текст параграфа 1

    
Подзаголовок 1

    
Текст параграфа 2

    
Подзаголовок 2

    
Текст параграфа 3

</body>

Определение

CSS — язык стилей, определяющий отображение HTML-документов.

CSS работает со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

Основные этапы развития

  1. CSS уровень 1 (1996, 1999) - параметры шрифтов, цвета, ...
  2. CSS уровень 2 (12 мая 1998) - блочная вёрстка, селекторы, ...

Основные этапы развития

  1. CSS уровень 1 (1996, 1999) - параметры шрифтов, цвета, ...
  2. CSS уровень 2 (12 мая 1998), CSS 2.1 (07 июня 2011) - блочная вёрстка, селекторы, ...
  3. CSS уровень 2.1 (07 июня 2011)
  4. CSS уровней 3 находится в стадии разработки - трансформации, анимация, ...
  5. CSS уровней 4 разрабатывается с 29 сентября 2011 года.

Структура CSS

Анатомия CSS


селектор {
    правило
}

Анатомия CSS

селектор,
селектор,
селектор {
    правило
}

Анатомия CSS

селектор,
селектор,
селектор {
    свойство: значение
}

Анатомия CSS

селектор,
селектор,
селектор {
    свойство: значение;
    свойство: значение;
    свойство: значение;
    свойство: значение;
    свойство: значение
}

Анатомия CSS

селектор,
селектор,
селектор { /* блок объявления стилей */
    свойство: значение;
    свойство: значение;
    свойство: значение;
    свойство: значение;
    свойство: значение
}

Анатомия CSS

селектор,
селектор,
селектор { /* блок объявления стилей */
    свойство: значение;
    свойство: значение;
    свойство: значение;
    свойство: значение;
    свойство: значение
}

CSS


body {
    background: #f1f1f1;
}
h1 {
    font-size: 34px;
    color: red;
    text-align: center;
}
h2 {
    font-size: 24px;
}
h1,
h2 {
    font-face: Tahoma;
}
p {
    font-size: 18px;
    color: gray;
    font-face: Arial;
}

CSS

body {
    background: #f1f1f1;
}
h1 {
    font-size: 34px;
    color: red text-align: center;
    text-align: center;
}
h2 {
    font-size: 24px;
}
h1,
h2 {
    font-face: Tahoma;
}
p {
    font-size: 18px;
    color: gray;
    font-face: Arial;
}

Классы и идентификаторы

Классы и идентификаторы

Селектор класса



Красный заголовок

                        

div.heading {
    font-size: 50px;
}
div.red {
    color: red;
}
Красный заголовок

Селектор класса



Красный заголовок


Красный заголовок

                        

div.heading {
    font-size: 50px;
}
div.red {
    color: red;
}
Красный заголовок
Красный заголовок

Селектор идентификатора

Красный заголовок

div#heading {
    font-size: 50px;
}
div#red {
    color: red;
}
                        
<div id="heading red">Красный заголовок</div>

Атрибут id

– задаёт уникальный идентификатор элемента.

<div id="red">Красный заголовок</div>
                        

div#heading {
    font-size: 50px;
}
div#red {
    color: red;
}
Красный заголовок

Выбираем все

Универсальный селектор

<h2>Красный заголовок</h2>
<div>Красный заголовок</div>
<p>Красный заголовок</p>
                        

* {
    color: red;
}

Красный заголовок

Красный заголовок

Красный заголовок

Комбинация

Комбинирование селекторов

div.class { color: red; }
div.class.class2 { color: red; }
div#id { color: red; }
div#id.class { color: red; }
div#id#id2 { color: red; }
*.class { color: red; }
.class { color: red; }

id vs class

Селекторы атрибутов

Селекторы атрибутов

[href] { color: red; }
[href="http://ya.ru"] { color: red; }
[href*="http://ya.ru"] { color: red; }
[href^="https://"] { color: red; }
[href$="ya.ru"] { color: red; }

Псевдоэлементы и псевдоклассы

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


a:link { color: blue }
a:active { color: red }
a:hover { color: green }
a:visited { color: purple }
a:focus { color: yellow }
Красный заголовок

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

:enabled
:disabled
:checked
:indeterminate
:read-only
:valid

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

: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>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

:first-child


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

:last-child


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

:only-child


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

:nth-child(2n)


<html>
    

        
        
        

            
                
                
            
            
                
            
        

        
        

    


    

</html>

div:nth-of-type(2n)


<html>
    

        
        
        

            
                
                
            
            
                
            
        

        
        

    


    

</html>

:nth-of-type(2n)


<html>
    

        
        
        

            
                
                
            
            
                
            
        

        
        

    


    

</html>

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

::first-letter { color: red }
::first-line { color: blue }
Я маленький апельсин
А я нет
Я маленький апельсин
А я нет

before/after

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

<div>::beforeОднажды, в студеную зимнюю пору, я из лесу вышел; был сильный мороз. Гляжу, поднимается медленно в гору лошадка, везущая хворосту воз.::after</div>

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

::before,
::after {
    content: 'A';
    color: red;
    font-weight: bold
}
Однажды, в студеную зимнюю пору, я из лесу вышел; был сильный мороз. Гляжу, поднимается медленно в гору лошадка, везущая хворосту воз.
Однажды, в студеную зимнюю пору, я из лесу вышел; был сильный мороз. Гляжу, поднимается медленно в гору лошадка, везущая хворосту воз.

Отношения

div div – потомок
div > div – сын
div + div – брат
div ~ div – братья

ul li


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

li li


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

li li:nth-child(2n)


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

html > *


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

li:first-child + li


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

li:first-child ~ li


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

li:not(:first-child)


<html>
    
    
        
  • 
        
  • 
        
  • 
            
      
                
    • 
                
    • 
            
    
            
      
                
    • 
            
    
        
    • 
    


    

</html>

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

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

div {
    color: red;
}

div {
    color: blue;
}

Текст

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

html div {
    color: red;
}

div {
    color: blue;
}

Текст

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

В одном правиле считаем:

  • количество селекторов по идентификатору (=a)
  • количество селекторов по классу, псевдоклассу (:not не учитывается) или атрибуту (=b)
  • количество селекторов элементов (тегов) или псевдоэлементов (=c)

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

В одном правиле считаем:

  • количество селекторов по идентификатору (=a)
  • количество селекторов по классу, псевдоклассу (:not не учитывается) или атрибуту (=b)
  • количество селекторов элементов (тегов) или псевдоэлементов (=c)
  • универсальный селектор, селекторы потомков, детей и прочие не влияют на специфичность

Применяем высчитанные значения:

  1. Находим каждому HTML элементу соответствующие ему селекторы;
  2. Сортируем селекторы исходя из специфичности
  3. Применяем правила из самого специфичного селектора, затем применяем незаданные правила из менее специфичного и т.д

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

html div { /* 0 0 2 */
    color: red;
}

div { /* 0 0 1 */
    color: blue;
    font-weight: bold;
    font-size: 12px;
}

div { /* 0 0 1 */
    font-size: 15px;
}

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

html div {
    color: red; /* 0 0 2 */
}

div {
    color: blue; /* 0 0 1 */
    font-weight: bold; /* 0 0 1 */
    font-size: 12px; /* 0 0 1 */
}

div {
    font-size: 15px; /* 0 0 1 */
}

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

color: red; /* 0 0 2 */
font-size: 15px; /* 0 0 1 */
color: blue; /* 0 0 1 */
font-weight: bold; /* 0 0 1 */
font-size: 12px; /* 0 0 1 */

Инлайн и !important




            
div {
    color: green !important;
}
  1. Инлайн стили по-умолчанию приоритетнее стилей в CSS
  2. Стили в CSS с !important приоритетнее инлайн стилей
  3. Инлайн стили с !important приоритетнее всего (на самом деле нет)

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

<div style="color: blue"></div>
color: green !important;
color: red; /* 0 0 2 */
font-size: 15px; /* 0 0 1 */
color: blue; /* 0 0 1 */
font-weight: bold; /* 0 0 1 */
font-size: 12px; /* 0 0 1 */

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

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

  1. Некоторые стили применяются не только к целевому элементу, но и к его потомкам
  2. Унаследованные стили не имеют специфичности, т.е их всегда перебивает любой селектор
  3. Именно поэтому не рекомендуют пользоваться селектором *

Пример наследования




    Привет,
    
        УрФУ
    


            
div {
    color: green; /* 0 0 1 */
    /* abbr { color : green } – нет специфичности */
}
Привет, УрФУ

Пример наследования




    Привет,
    
        УрФУ
    


            
* {
    color: red; /* 0 0 0 */
}
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
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
word-spacing

Порядок

Порядок применения

  1. Стили браузера
  2. Стили пользователя и/или плагинов браузера
  3. Стили страницы
  4. Стили страницы с !important
  5. Стили пользователя и/или плагинов браузера с !important

Это и есть каскад

Единицы измерения длины

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

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

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

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

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

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

  1. пикселы (px)
  2. em – зависит от размера шрифта (em)
  3. rem – зависит от размера шрифта корневого элемента (rem)
  4. ex – зависит от высоты символа x в данном шрифте
  5. ch – зависит от ширины символа 0 в данном шрифте
  6. vh/vw – 1/100 высоты и ширины vieport'а соответственно
  7. vmax – 1/100 от максимума между высотой и шириной vieport'а
  8. vmin – 1/100 от минимума между высотой и шириной vieport'а

Цвета

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

  1. Именованные цвета – red
  2. Функциональный – rgb(255, 0, 0) или rgba(255, 0, 0, 1)
  3. Шестнадцатиричный – #ff0000 или #f00

Ещё

Ещё типы значений

  • Именованные слова: bold, underline
  • Комбинации: 1px solid red
  • Функциональные: url(), attr(), rgb()

Как?

ДЗ

https://github.com/urfu-2015/verstka-tasks-3

Deadline
22 октября
23:59:59.999