Четыре вида селекторов CSS презентация

Содержание

Слайд 2

Пусть у нас есть список ul и список ol: пункт

Пусть у нас есть список ul и список ol:


  • пункт

  • пункт

  • пункт

  • пункт

  • пункт



    1. пункт

    2. пункт

    3. пункт

    4. пункт

    5. пункт


    Покрасим теги li списка ul в красный цвет,
    а теги li списка ol - в зеленый

    Для этого нужно указать селектор родителя, а через пробел - селектор потомка.
    В нашем случае селектор ul li выберет все теги li из списка ul, а селектор ol li - выберет все теги li из списка ol.

    ul li { color: red; }
    ol li { color: green; }

    селектор потомка

    селектор родителя

    Контекстный селектор

    Селекторы потомков

    Слайд 3

    Дан html-код: пункт курсив пункт курсив пункт курсив пункт курсив

    Дан html-код:


    • пункт курсив
    • пункт курсив
    • пункт курсив
    • пункт курсив



    текст абзаца курсив

    текст абзаца курсив


    выбираются все теги i, находящиеся внутри тега li, которые в свою очередь находятся внутри тега ul:

    1. Покрасим в красный цвет курсив из тегов ul,

    ul li i { color: red; }

    Дан следующий html-код:

    текст абзаца жирный курсив


    текст абзаца курсив


    2. Покрасим в красный цвет курсив, находящийся внутри тега b, который в свою очередь находится внутри тега p.

    p b i {color: red;}

    а в зеленый цвет - курсив из тегов p.

    p i { color: green; }

    Селекторы потомков

    Контекстный селектор для тегов

    Слайд 4

    Дочерний селектор на CSS > Дан код: текст жирный курсив

    Дочерний селектор на CSS >

    Дан код:

    текст жирный курсив

    текст просто курсив


    Выбрать все теги i, являющиеся потомками абзацев. 

    p i { color: red; }

    Выберем те теги i, которые являются непосредственными потомками наших абзацев.
    В этом нам поможет дочерний селектор >.
    Сравним.
    Вот так: p i - мы выберем все курсивы внутри абзацев,
    а вот так: p > i - только курсивы, являющиеся непосредственными потомками абзацев.

    p > i { color: red; }


    • курсив жирный жирный курсив

    • курсив жирный жирный курсив


    Покрасьте в красный цвет только те теги b, которые являются непосредственными потомками тегов li.

    Селекторы потомков

    Слайд 5

    Задача 1 Изучив код, скажите какой цвет будет иметь текст

    Задача 1
    Изучив код, скажите какой цвет будет иметь текст в теге b:

    какой-то

    текст в абзаце


    p { color: blue; }

    Задача 2
    Изучив код, скажите какой цвет будет иметь текст в теге b:

    какой-то текст в абзаце


    p { color: blue; }
    b { color: red; }

    Задача 3
    Изучив код, скажите какой цвет будет иметь текст в теге b:

    какой-то текст в абзаце


    b { color: red; }
    p { color: blue; }

    Задача 4
    Изучив код, скажите какой цвет будет иметь текст в теге li:


    • текст

    • текст

    • текст


    ul { color: blue; }

    Задача 5
    Изучив код, скажите какой цвет будет иметь текст в теге li:


    • текст

    • текст

    • текст


    ul { color: blue; }
    li { color: red; }

    Задача 6
    Изучив код, скажите какой цвет будет иметь текст в теге i:


    • текст курсив текст

    • текст курсив текст

    • текст курсив текст


    ul { color: blue; }
    li { color: red; }
    i { color: green; }

    Задача 7
    Изучив код, скажите какой размер будет иметь текст в теге i:


    • текст курсив текст

    • текст курсив текст

    • текст курсив текст


    i { font-size: 30px; }
    ul {color: blue; font-size: 20px; }
    li { color: red; font-weight: bold; }

    30px

    Слайд 6

    p {font-weight: bold;} h1 {font-weight: bold;} h2 {font-weight: bold;} h3

    p {font-weight: bold;}
    h1 {font-weight: bold;}
    h2 {font-weight: bold;}
    h3 {font-weight: bold;}

    p, h1, h2,

    h3 {
        font-weight: bold;
    }

    Группировка селекторов на CSS

    h2 { color: red; }
    h3 { color: red; }
    p { color: red; text-align: justify; font-size: 16px; }

    Общие свойства

    Когда часть свойств некоторых селекторов одинакова, а часть - отличается. В следующем коде, например, заголовки и абзац имеют красный цвет, но у абзаца кроме этого есть еще свойства:

    В таком случае можно сгруппировать повторяющиеся части, а то, что не повторяется, записать отдельно:

    h2, h3, p { color: red; }
    p { text-align: justify; font-size: 16px; }

    Задача 2
    Упростите код, используя группировку селекторов:
    h1 { text-align: center; color: red; }
    h2 { text-align: center; color: red; }
    h3 { text-align: center; font-size: 16px; color: red; }

    Задача 1
    Упростите код, используя группировку селекторов:
    h1 { text-align: center; }
    h2 { text-align: center; color: blue; }
    h3 { text-align: center; font-size: 16px; color: red; }

    h1, h2, h3 { text-align: center; }
    h2 {color: blue; }
    h3 {font-size: 16px; color: red; }

    h1, h2, h3{text-align: center; color: red; }
    h3 {font-size: 16px;}

    Слайд 7

    Идентификаторы (селектор id) Определяет уникальное имя элемента, которое используется для

    Идентификаторы (селектор id)

    Определяет уникальное имя элемента, которое используется для изменения его

    стиля и обращения к нему через скрипты



    Применение идентификатора



    Он должен начинаться с латинского символа и может содержать в себе символ дефиса (-) и подчеркивания (_) Использование русских букв в именах идентификатора недопустимо. В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.




    #help {font-family: Helvetica, sans-serif; font-size:16pt; text-align:justify}

    Селектор по идентификатору,
    определяется с помощью знака "#".

    Слайд 8

    Выбор элемента по уникальному id на CSS Сделаем два блока.

    Выбор элемента по уникальному id на CSS

     Сделаем два блока.
    Первому зададим 

    id = "block1",
    а второму - id =  "block2":


    текст


    текст




    текст


    текст



    #block1 { color: red; }
    #block2 { color: green; }

    обратимся к элементам с заданными id,


    заголовок


    текст


    текст




    заголовок


    текст


    текст




    заголовок


    текст


    > текст



    Задача1. Покрасьте содержимое
    блока c id="elem1"- в красный цвет,
    блока  c id="elem2" - в зеленый,
    блока  c id="elem3"  - в голубой,
    заголовок h2 из 1 блока – в коричневый,
    второй абзац из блока  c id="elem3" - в серый

    #elem1{color: red;}
    #elem2{color: green;}
    #elem3{color: blue;}
    #elem1 h2{color: brown;}
    #elem3 #p2{color: grey;

    Слайд 9

    Классы (селекторы классов) Селектор class используется, чтобы указать стиль для

    Классы (селекторы классов)

    Селектор class используется, чтобы указать стиль для группы элементов.



    Применение</div></h2><div class="slides-content">идентификатора



    Заголовок выровненный по центру


    Параграф выровненный по центру.




    .centr
    {
    text-align:centr;
    }

    Селектор .class определяется с помощью "."

    Все HTML элементы с классом class="center" будут выравниваться по центру.

    Элементам

    и

    назначили class="center",

    Разница между идентификатором и классом состоит в том, что идентификатор может присваиваться только одному элементу, !!!а класс – скольким угодно элементам.

    Слайд 10

    Например. Сделаем абзацы с двумя типами классов - eee и

    Например. Сделаем абзацы с двумя типами классов - eee и zzz:

    Классы (селекторы классов)

    Чтобы отнести

    тег какому-нибудь классу, нужно этому тегу написать атрибут class, а в нем - придуманное вами название класса, состоящее из букв, цифр, символов подчеркивания и дефиса.

    абзац с классом eee


    абзац с классом eee


    абзац с классом zzz


    абзац с классом zzz


    Покрасим абзацы с классом .zzz в красный цвет, а абзацы с классом .eee - в зеленый.

    .eee { color: green; }
    .zzz { color: red; }

    Слайд 11

    .error { background:red; color:white; } для всех элементов класса .error

    .error {
    background:red;
    color:white;
    }

    для всех элементов класса .error

    Ошибка!


    Что-то с памятью.


    Сделаем это слово на красном фоне белыми буквами

    Тег span для фрагментов текста

    Слайд 12

    Применение идентификатора Этот заголовок не будет подвержен воздействию стиля Параграф



    Применение идентификатора



    Этот заголовок не будет подвержен воздействию

    стиля

    Параграф выровненный по центру.




    p.center
    {
    text-align:center;
    }

     Только все абзацы с class="center" будут выровнены по центру,
    но не


    Можно указать только конкретные HTML элементы, которые будут подвержены воздействию класса.

    Классы (селекторы классов)

    Слайд 13

    Тег с заданным классом заголовок абзац заголовок абзац Пусть у

    Тег с заданным классом

    заголовок


    абзац


    заголовок


    абзац


    Пусть у нас есть два типа тегов с одинаковыми классами. Например, пусть и заголовки h2,
    и абзацы имеют один и тот же класс:

    Выберем все h2 с классом.eee 
    и отдельно выберем все p с классом .eee .

    h2.eee { color: red; }
    p.eee { color: green; }

    выбрали все h2 с классом eee и покрасили в красный цвет

    отдельно выбрали все p с классом eee и покрасили в зелёный цвет

    ! Слитно имя тега, точка, имя класса.

    Задача 1 Дан следующий код:

    заголовок


    заголовок

    заголовок


    заголовок


    .header { color: red; }
    Сделайте все h2 с классом header размером 40px, а все h3 с этим классом - размером 30px.
    Слайд 14

    Ошибка!Что-то с памятью. p.error { background:red; } для абзацев класса

    Ошибка!Что-то с памятью.


    p.error {
    background:red;
    }

    для абзацев класса error

    p

    {
    background:blue;
    color:white;
    }

    каскад!

    Тег с заданным классом

    Слайд 15

    Классы (селекторы классов)

    Классы (селекторы классов)

    Слайд 16

    Когда использовать? В чём отличия? текст текст #block { color:

    Когда использовать? В чём отличия?


    текст


    текст



    #block

    { color: red; font-family: Arial; }
    .large { font-size: 30px; }

    Одному элементу можно задавать и id, и классы. В этом случае часть стилей элемента можно задать через id, а часть стилей - через класс:

    когда предполагается, что таких элементов может быть много, даже если он сейчас один;
    класс может присваиваться скольким угодно элементам

    когда необходимо подчеркнуть уникальность элемента;
    идентификатор может присваиваться только одному элементу

    id

    классы

    Слайд 17

    Группировка классов Пусть у нас есть несколько классов, которые красят

    Группировка классов

    Пусть у нас есть несколько классов, которые красят элементы в

    разные цвета, и дают одинаковый размер:

    .xxx { color: green; font-size: 30px;}
    .yyy { color: red; font-size: 30px;}

    .xxx { color: green;}
    .yyy { color: red;}
    .xxx, .yyy { font-size: 30px;}

    Задача 1
    Упростите код, используя группировку селекторов:
    .eee { font-size: 20px;
    line-height: 1.5;
    font-family: Arial; }
    .zzz { font-size: 30px;
    line-height: 1.5;
    font-family: Arial; }

    Задача 2
    Упростите код, используя группировку селекторов:
    .eee { font-size: 20px;
    text-align: center;
    font-family: Arial; }
    .zzz { font-size: 30px;
    text-align: center;
    font-family: Arial; }
    .ggg { font-size: 35px;
    text-align: center;
    font-family: Arial; }

    .eee, .zzz
    {line-height: 1.5;
    font-family: Arial; }
    .eee { font-size: 20px; }
    .zzz { font-size: 30px;}

    .eee, .zzz, .ggg {text-align: center;
    font-family: Arial; }
    .eee{ font-size: 20px;}
    .zzz { font-size: 30px;}
    .ggg { font-size: 35px;}

    Слайд 18

    Селектор потомков и классы заголовок текст заголовок текст Пусть у

    Селектор потомков и классы


    заголовок


    текст



    class="block">

    заголовок


    текст



    Пусть у нас есть следующий код:

    Выберем все заголовки h2 и абзацы, которые внутри элемента с классом block, и покрасим их в разные цвета. Используем для этого селектор потомков
    ( пробел между селекторами):

    .block h2 { color: red; }
    .block p { color: green; }

    h2 и p - находятся внутри тега с классом .block

    Задача 1
    Дан следующий код:

    текст курсив


    текст курсив


    текст курсив

    текст курсив

    Покрасьте в красный цвет все теги i, находящиеся в элементах с классом eee.

    Контекстный селектор для классов

    .eee i { color: red; }

    Слайд 19

    Пусть теперь у нас есть следующий код: заголовок h2 текст

    Пусть теперь у нас есть следующий код:


    "header">заголовок h2


    текст


    заголовок h3


    текст


    текст




    заголовок h2


    текст


    заголовок h3


    текст


    текст



    Выбрали все элементы с классом .header,
    которые внутри элемента с классом .block,
    и зададим им шрифт Arial:

    .block .header
    {font-family: Arial;}

    .block h2.header
    { font-size: 30px; color: red; }

    Выбрали все h2 с классом .header, которые внутри элемента с классом .block,

    .block h3.header
    { font-size: 20px; color: green; }

    Выбрали все h3 с классом .header, которые внутри элемента с классом .block,

    Контекстный селектор для классов

    Слайд 20

    Задача 1 Что выбирает селектор в приведенном ниже коде. Затем

    Задача 1 Что выбирает селектор в приведенном ниже коде.
    Затем напишите HTML

    код, подходящий под этот селектор.
    Вот код с селектором:
    .eee .bbb { color: red; }

    Задача 2 Что выбирает селектор в приведенном ниже коде.
    Затем напишите HTML код, подходящий под этот селектор.
    .eee h2 { color: red; }

    Задача 3
    Что выбирает селектор в приведенном ниже коде.
    Затем напишите HTML код, подходящий под этот селектор.
    Вот код с селектором:
    .eee h2.bbb { color: red; }

    Задача 4
    Что выбирает селектор в приведенном ниже коде.
    Затем напишите HTML код, подходящий под этот селектор.
    Вот код с селектором:
    .eee p.bbb { color: red; }

    Задача 5 Что выбирает селектор в приведенном ниже коде. Напишите HTML код, .eee .bbb .kkk { color: red; }

    Контекстный селектор для классов

    Контекстный селектор для классов


     


     

    заголовок


       


       

    1заголовок


       

    2заголовок


     


     

    1заголовок


     

    2заголовок


     

    1текст


     

    2текст




     

    Контекстный селектор для классов


     

    2 абзац


     


       
    • 1 пункт

      •  
    • 2 пункт

      •  

    Слайд 21

    Итак, еще раз: p.eee - такой селектор выбирает абзацы с

    Итак, еще раз:  p.eee - такой селектор выбирает абзацы с классом .eee
    А если

    сделать так:  p .eee, то выберутся все элементы с классом .eee, находящиеся внутри абзацев.

    Задача 1 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    p.bbb { color: red; }

    Задача 2 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    p .bbb { color: red; }

    Задача 3
    Что выбирает селектор в приведенном ниже коде.
    Затем напишите HTML код, подходящий под этот селектор.
    Вот код с селектором:
    .eee p.bbb { color: red; }

    Задача 4
    Что выбирает селектор в приведенном ниже коде.
    Затем напишите HTML код, подходящий под этот селектор.
    Вот код с селектором:
    .eee p .bbb { color: red; }

    Контекстный селектор для классов


     

    абзац 1


     

    абзац 2


     

    абзац 3


     

    абзац 4



    Контекстный селектор для классов. Контекстный селектор для классов. Контекстный селектор для классов.



     

    1заголовок


     

    2заголовок


     

    1текст


     

    2текст




     

    Контекстный селектор для классов. Контекстный селектор для классов. Контекстный селектор для классов.
     


       

    Слайд 22

    Элемент с несколькими классами .error { color: red; } .large

    Элемент с несколькими классами

    .error { color: red; }
    .large { font-size:

    30px;
    font-family: Arial; }

    Можно одновременно задать несколько CSS классов какому-нибудь тегу.
    Для этого в атрибуте class эти классы нужно перечислить через пробел.

    Зададим абзацу и один класс, и второй:

    lorem ipsum


    эти классы нужно перечислить через пробел

    Задача 1 Пусть у вас даны следующие классы:
    .success { color: green; }
    .error { color: red; }
    .large { font-size: 30px; }
    .small { font-size: 20px; }

    Пусть у вас также есть 4 абзаца. С помощью представленных классов сделайте так, чтобы первый абзац был зеленый и с большим шрифтом, второй абзац - красным и с маленьким шрифтом, третий абзац - красным и с большим шрифтом, а четвертый - зеленым и с маленьким шрифтом.

    Задача 2 Придумайте и сделайте 3 какие-нибудь класса.
    Задайте какому-нибудь тегу одновременно все три придуманных вами класса.

    Пусть у нас есть несколько CSS классов:

    1 абзац 1 абзац 1 абзац


     

    2 абзац 2 абзац 2 абзац


     

    3 абзац 3 абзац 3 абзац


     

    4 абзац 4 абзац 4 абзац


    Слайд 23

    Использование id на CSS Пример 1. При использовании id доступны

    Использование id на CSS

    Пример 1. При использовании id доступны все манипуляции с селекторами,


    Пусть у нас есть следующий код:


    заголовок


    текст


    текст



    Выберем h2 из элемента с  id="block",
    и покрасим его в красный цвет:
    #block h2 { color: red; }
    Выберем p из элемента с  id="block",
    и покрасим его в зеленый цвет:
    #block p { color: green; }


    заголовок


    текст


    текст


    заголовок


    текст


    текст



    Выберем элементы с class="header", находящийся внутри элемента с id, равным block, и покрасим их в красный цвет:
    #block .header { color: red; }
    Выберем заголовки h2 с class="header", , находящийся внутри элемента с  id="block", и покрасим их в красный цвет:
    #block h2.header { color: red; }

    Пример 2. Пусть теперь у нас есть следующий код:

    Слайд 24

    Использование id на CSS Задача 1 Напишите селектор, который выберет

    Использование id на CSS

    Задача 1 Напишите селектор, который выберет все h2, находящиеся в

    элементе с id="elem".
    Проверьте ваш селектор на следующем коде:

    выбрать


    не выбирать


    выбрать


    не выбирать



    не выбирать


    не выбирать


    Задача 2 Напишите селектор, который выберет все элементы с class="text", находящиеся в элементе с  id="elem". Проверьте ваш селектор на следующем коде:


    выбрать


    выбрать



    • выбрать

    • выбрать

    • выбрать

    • не выбирать

    • не выбирать



    не выбирать


    Задача 3 Напишите селектор, который выберет все абзацы с классом  class="text", находящиеся в элементе с  id="elem". Проверьте ваш селектор на следующем коде:


    выбрать


    выбрать



    • не выбирать

    • не выбирать

    • не выбирать

    • не выбирать

    • не выбирать



    не выбирать


    Задача 4 Напишите селектор, который выберет все li с class="text", находящиеся в элементе с  id="elem".
    Проверьте ваш селектор на следующем коде:


    не выбирать


    не выбирать



    • выбрать

    • выбрать

    • выбрать

    • не выбирать

    • не выбирать



    не выбирать


    #elem h2 {color: red;}

    #elem .text { color: red;}

    #elem p.text{
    color: red;}

    #elem  li.text {
    color: red;}

    Слайд 25

    Выбор элемента по нескольким классам на CSS Пример1. Можем выбрать

    Выбор элемента по нескольким классам на CSS

    Пример1. Можем выбрать элемент, имеющий

    одновременно два класса, не затронув элементы с одним из этих классов. Пусть у нас есть следующий код.
    Первый абзац - class="eee",
    второй абзац - class="zzz",
    а третий абзац - одновременно оба этих класса.

    абзац


    абзац


    абзац


    Давайте выберем последний абзац, не затронув остальные. Для этого слитно без пробела напишем имя одного класса и имя второго класса:
    .eee.zzz
    { color: red; }

    Задача 1 Выберите элемент, одновременно имеющий классы eee, zzz и ccc:

    абзац


    абзац


    абзац


    абзац


    .eee.zzz.ccc{color: red;}

    h2.bbb.zzz{...}

    выберет заголовок h2, одновременно имеющий класс bbb и класс zzz

    При этом их порядок используемых селекторов значения не имеет, кроме правила, что селекторы тегов нужно ставить в самом начале.

    Слайд 26

    Несколько селекторов слитно Задача 1 Что выбирает селектор в приведенном

    Несколько селекторов слитно

    Задача 1 Что выбирает селектор в приведенном ниже коде.
    Напишите

    HTML код, подходящий под этот селектор.
    .bbb.zzz { color: red;}

    задача 1 задача 1 задача 1


     

    2 абзац 2 абзац 2 абзац


     

    3 абзац 3 абзац 3 абзац


    Задача 2 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    h2.bbb.zzz { color: red; }

    задача 2 задача 2 задача 2


     

    2 абзац 2 абзац 2 абзац


     

    3 абзац 3 абзац 3 абзац


     

    Заголовок 2


    Задача 3 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    #elem.bbb { color: red; }

    задача 3 задача 3 задача 3


     

    2 абзац 2 абзац 2 абзац


     

    3 абзац 3 абзац 3 абзац


     

    Заголовок 2


    Задача 4 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    #elem.bbb.zzz { color: red; }

     

    задача 4 задача 4 задача 4


     

    2 абзац 2 абзац 2 абзац


     

    3 абзац 3 абзац 3 абзац


     

    Заголовок 2


    Задача 5 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    h2#elem.bbb { color: red; }

    задача 5 задача 5 задача 5


    2 абзац 2 абзац 2 абзац


     

    3 абзац 3 абзац 3 абзац


     

    Заголовок 2


    Слайд 27

    Итак, селектор .bbb.zzz - ищет элемент, имеющий одновременно два класса,

    Итак, селектор .bbb.zzz - ищет элемент, имеющий одновременно два класса, селектор .bbb .zzz  -

    ищет элемент с классом zzz, находящийся внутри класса bbb.

    Практика

    Задача 6 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    h2.zzz { color: red; }

    Задача 7Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    h2 .zzz { color: red; }

    Задача 8
    Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    .bbb.zzz { color: red; }

    Задача 9
    Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    .bbb .zzz { color: red; }

    Задача 10 Что выбирает селектор в приведенном ниже коде. Напишите HTML код, подходящий под этот селектор.
    .bbb.zzz.xxx { color: red; }

    Задача 11
    Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    .bbb .zzz.xxx { color: red; }

    Задача 12 Что выбирает селектор в приведенном ниже коде. Напишите HTML код, подходящий под этот селектор.
    .bbb.zzz .xxx { color: red; }

    Задача 13 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    .bbb .zzz .xxx { color: red; }

    Задача 14 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    #elem.bbb { color: red; }

    Задача 15 Что выбирает селектор в приведенном ниже коде.
    Напишите HTML код, подходящий под этот селектор.
    #elem .bbb { color: red; }

    Слайд 28

    Группировка сложных селекторов Пусть у нас есть два следующих селектора:

    Группировка сложных селекторов

    Пусть у нас есть два следующих селектора:
    .block

    h2 { color: red; }
    .block h3 { color: red; }

    Так как эти селекторы делают одно и тоже их можно сгруппировать через запятую:
    .block h2, .block h3 { color: red; }

    .block h2, h3 { color: red; } - так будет другой результат

    Задача 1 Упростите код, используя группировку селекторов:
    #block h1 { text-align: center; }
    #block h2 { text-align: center; color: blue; }
    #block h3 { text-align: center; font-size: 16px; color: red; }

    #block h1, #block h2, #block h3 { text-align: center; }
    #block h2 {color: blue; }
    #block h3 {font-size: 16px; color: red; }

    Задача 2 Упростите код, используя группировку селекторов:
    #block h1.eee { text-align: center; font-size: 30px; }
    #block h2.zzz { text-align: center; font-size: 20px; }

    #block h1.eee, #block h2.zzz { text-align: center;}
    #block h1.eee {font-size: 30px; }
    #block h2.zzz {font-size: 20px; }

    Слайд 29

    Группировка сложных селекторов Задача 3 Упростите код, используя группировку селекторов:

    Группировка сложных селекторов

    Задача 3 Упростите код, используя группировку селекторов:
    .xxx .kkk { text-align:

    center; }
    .eee h2.zzz { text-align: center; }
    #eee h2 { text-align: center; }

    .xxx .kkk, .eee h2.zzz, #eee h2 { text-align: center; }

    Задача 4 Упростите код, используя группировку селекторов:
    .eee h2.zzz { text-align: center; }
    .xxx { text-align: center; }

    .eee h2.zzz, .xxx { text-align: center; }

    Слайд 30

    Приоритет селекторов CSS 1. Когда применимы два правила, имеющие одинаковый

    Приоритет селекторов CSS

    1. Когда применимы два правила, имеющие одинаковый приоритет, используется то,

    которое идёт в CSS последним.

    Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение

    2. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его приоритет.

    например
    у селектора h1 приоритет ниже — он выберет все элементы этого типа на странице;
    у селектора класса приоритет выше — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class —

    .main-heading {
    color: red;
    }
    h1 {
    color: blue;
    }

    Заголовок 1


    Заголовок 1

    селектор класса перекроет стили h1

    Слайд 31

    Правила специфичности Если есть два селектора с одинаковым приоритетом, то

    Правила специфичности

    Если есть два селектора с одинаковым приоритетом, то побеждает то

    свойство, которое написано ниже. - см. пред. слайд
    Класс всегда побеждает селектор тега. - см. пред. слайд
    Идентификатор всегда побеждает класс:

    text


    .text { color: red; }
    #elem { color: green; /* применится этот цвет */ }

    text


    p { color: red; }
    div p { color: green; /* применится этот цвет */ }

    4. При равных условиях побеждает тот селектор, у которого больше частей (указан конкретнее), у которого тегов больше:


    text



    Если два селектора классов, то победит тот, в котором указано больше классов (если там будут селекторы тегов, то они не влияют):

    .text { color: red; }
    .block .text { color: green; /* применится этот цвет */ }

    Слайд 32

    Правила специфичности 5. Селектор потомка побеждает селектор родителя – это

    Правила специфичности

    5. Селектор потомка побеждает селектор родителя – это и для

    class

    Может быть такое, что один селектор ловит элемент, а второй селектор ловит родителя этого элемента.
    Если родителю задан, например, цвет, то этот цвет будет наследоваться потомком.
    Но, если потомку также задан цвет, то селектор потомка будет иметь больший приоритет, чем селектор родителя.
    .block { color: red; }
    p { color: green; /* применится этот цвет */ }


    text



    #block { color: red; }
    .text { color: green; /* применится этот цвет */ }


    text



    и для id,

    Слайд 33

    Что бы создать стиль абсолютно для всех элементов веб-страницы, применим

    Что бы создать стиль абсолютно для всех элементов веб-страницы, применим универсальный

    селектор CSS - символ звездочки *:

    * {
        font-family: Geneva, Arial, sans-serif;
    }

    div * {
        font-family: Geneva, Arial, sans-serif;
    }

    для всех дочерних элементов блока

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

    Слайд 34

    Универсальный селектор Пример1 Выберем все элементы и покрасим их в

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

    Пример1 
    Выберем все элементы и покрасим их в красный цвет:
    *

    { color: red; }
    Пример 2 
    Выберем все элементы, находящиеся внутри тега div, и покрасим их в красный цвет:
    div * { color: red; }
    Пример 3
    Выберем все элементы, непосредственно находящиеся внутри тега div, и покрасим их в красный цвет:
    div > * { color: red; }
    Пример 4
    Выберем все элементы, находящиеся внутри тега span, который в свою очередь находится внутри любого тега, который в свою очередь находится внутри тега div:
    div * span { color: red; }

    Задача 1. Напишите селектор, который выберет все абзацы, находящийся внутри любого родителя внутри тега main.
    Дан код:


    -


    -



    +


    +




    +


    +




    main * p { color: red; }

    Слайд 35

    Соседний селектор в CSS + Соседний селектор + позволяет выбрать

    Соседний селектор в CSS +

    Соседний селектор + позволяет выбрать элемент по его соседу

    сверху.

    text


    +


    -


    -


    h2 + p { color: red; }

    Обратимся ко всем тегам p, непосредственно находящимся после тегов h2, и покрасим их в красный цвет:

    text


    +


    -


    Например. Обратимся ко всем тегам p, непосредственно находящимся после элементов с классом .test, и покрасим их в красный цвет:

    .test + p { color: red; }

    Например. Обратимся ко всем элементам с классом .elem, непосредственно находящимся после элементов с классом .test, и покрасим их в красный цвет:

    text


    +


    -


    .test + .elem { color: red; }

    Слайд 36

    Задача 1. Напишите селектор, который выберет элемент, находящийся сразу после

    Задача 1. Напишите селектор, который выберет элемент, находящийся сразу после элемента #elem.


  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9


    • Соседний селектор в CSS +

     ul li#elem  +  li { color: red; }

    Задача 2. Напишите селектор, который выберет элементы, находящиеся сразу после элементов  .elem.


    • 1

    • 2
    • 3

    • 4

    • 5
    • 6

    • 7

    • 8
    • 9


    ul li.elem + li { color: red; }

    Слайд 37

    Родственный селектор в CSS ~ Родственный селектор ~ позволяет выбрать

    Родственный селектор в CSS ~

    Родственный селектор ~ позволяет выбрать все элементы, находящиеся после

    заданного элемента внутри одного родителя.


    text


    +


    +


    +



    -


    h2 ~ p { color: red; }

    обратимся ко всем тегам p, находящимся после тегов h2, и покрасим их в красный цвет:


    text


    +


    +



    -


    .test ~ p { color: red; }

    Например. Обратимся ко всем тегам p, находящимся после элементов с классом .test, и покрасим их в красный цвет:

    Например. Обратимся ко всем элементам с классом .elem, находящимся после элементов с классом .test, и покрасим их в красный цвет


    text


    +


    -


    +



    -


    .test ~ .elem { color: red; }

    Слайд 38

    Пример правила наследованияCSS Когда применимы два правила, имеющие одинаковую специфичность,

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

    Когда применимы два правила, имеющие одинаковую специфичность, используется то,

    которое идёт в CSS последним.


    • Item One

    • Item Two

      • 2.1

      • 2.2



    • Item Three

      • 3.1

        • 3.1.1

        • 3.1.2



      • 3.2




    .main {
    color: purple;
    border: 2px solid;
    }
    .special {
    color: black;
    font-weight: bold;
    }

    Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку 

  •  и к элементам внутри первого вложенного списка.

    Далее мы добавили класс special ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.

    • Слайд 39

    #A, .a { border: none; background: #f0f0f0; color: green; padding:




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


    Стиль классов a и b

    Стиль класса b




    Пример. Сочетание стилей

    Для первого абзаца устанавливается стиль от идентификатора A и класса b, свойства которых противоречат друг другу.
    При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности.
    Для второго абзаца стиль задаётся через классы a и b одновременно.
    Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже.
    К последнему абзацу применяется стиль только от класса b. 

    Слайд 40

    Примеры: ul li a { color: red; } 3 балла,

    Примеры:

    ul li a { color: red; } 3 балла, т.е. только

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

    .content #sidebar { width: 30%;} 110 баллов,

    .post p:first-letter { font-size: 16px;} 12 баллов, так как псевдо-элемент :first-letter и «р» тэг весят по 1му баллу

    p { font-family: Helvetica, arial, sans-serif; } - 1 балл. Такой тип селектора должен быть использован в верхней части страницы при маркировке основных стилей, которые в дальнейшем могут быть переопределены для конкретных областей.

    https://lpgenerator.ru/blog/2016/03/03/specifikaciya-tablic-stilej-css/

    #content .sidebar .module li a - общий вес составит 122 балла
    (100 + 10 + 10 + 1 +1), которым является ID, два класса и два элемента

    Слайд 41

    Наследование CSS-свойств Большинство свойств не передают дочернему элементу свои значения

    Наследование CSS-свойств

    Большинство свойств не передают дочернему элементу свои значения от родителя

    https://www.w3.org/TR/CSS21/propidx.html

    - здесь можно посмотреть какие св-ва
    наследуются от родителя (yes), а какие нет.

    Например. border - НЕ наследуется дочерним элементом


    Мне дали рамку
    Мне не дали рамку



    Мне дали рамку
    Мне дали рамку


    Например. А background и color – наследуются


    Мой фон сделали бледно-зелёным, цвет текста - красный

    Мой фон прозрачный и через него виден бледно-зелёный фон родителя,
    цвет текста - красный


    Слайд 42

    Псевдоклассы Псевдокласс в CSS — это ключевое слово, добавленное к

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

    Псевдокласс в CSS —  это ключевое слово, добавленное к селектору,  которое определяет его особое

    состояние.

    div:hover { background-color: #F89B4D; }

    link visited focus hover active

    :first-child - обращение к первому элементу в блоке

     .new_list li:first-child{
       color:red;}


         
    • пункт 1

      •    
    • пункт 2

      •    
    • пункт 3

      •    
    • пункт 4

      •    
    • пункт 5

      •    
    • пункт 6

      •    
    • пункт 7

      •    
    • пункт 8

      •  

    :last-child - обращение к последнему элементу в блоке

    .new_list li:last-child{
       color:blue;}

    :nth-child() - обращение к любому элементу в блоке

    .new_list li:nth-child(4){
       color: green;}

    Слайд 43

    :nth-child Псевдокласс находит один или более элементов, основываясь на их

    :nth-child

    Псевдокласс

    находит один или более элементов, основываясь на их позиции среди группы

    соседних элементов.

    .new_list li:nth-child(even){ -каждый чётный
       text-transform: uppercase;}

    .new_list li:nth-child(odd){ -каждый нечётный
       text-transform: uppercase;}

    .new_list li:nth-child(3n){ -каждый третий
    text-transform: uppercase;}

    :nth-child(3n+4) Описывает элементы с номерами 4, 7, 10, 13…

     .block  p:nth-child(2):hover{
      background-color: coral; }

    Слайд 44

    Псевдоэлемент в CSS — это ключевое слово, собираемое к селектору,

    Псевдоэлемент  в CSS —  это ключевое слово, собираемое к селектору,  которое позволяет стилизовать определенную

    часть выбранного элемента. 

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

    .text::first-line{ стиль первой стрлоки
    color:green;}

    .text::first-letter{ стиль первой буквы
      color:red;
      font-size: 50px;
      }

    Слайд 45

    Псевдоэлементы Псевдоэлемент ::before - применяется для отображения желаемого контента до

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

    Псевдоэлемент ::before - применяется для отображения желаемого контента до содержимого элемента,

    к которому он добавляется.

    элемент::before { content: "текст" }


    Не дают результата для ,  и ряда других элементов.

    Псевдоэлемент ::after - применяется для отображения желаемого контента после содержимого элемента, к которому он добавляется.

    Работают только совместно со свойством content.

    элемент::after { content: "текст" }


    Ловля льва в пустыне с помощью метода золотого сечения.

    Метод ловли льва простым перебором.




    Слайд 46

    Псевдоэлементы Псевдоэлементы ::before и ::after подходят для оформления цитат, Например

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

    Псевдоэлементы ::before и ::after подходят для оформления цитат,
    Например для увеличения

    кавычек.

    Чаще всего выход там, где был вход.


    Слайд 47

    Псевдоэлементы Псевдоэлементы ::before и ::after - можно стилизовать для списков

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

    Псевдоэлементы ::before и ::after - можно стилизовать для списков маркеры

    .list li:before{
     

    content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: red;
      display: inline-block;
      margin: 0px 10px 0px 0px;
    }
    Слайд 48

    CSS filter

    CSS filter

    Слайд 49

    CSS filter Например. img:nth-child(1):hover{ filter:blur(2px);

    CSS filter

    Например. img:nth-child(1):hover{
    filter:blur(2px);

    Имя файла: Четыре-вида-селекторов-CSS.pptx
    Количество просмотров: 18
    Количество скачиваний: 0
    - Предыдущая
    Организация движения поездов. ПТЭ, инструкции и безопасность движения
    Следующая -
    Планирование и прогноз на 2024 год

    Похожие презентации

    Текстовый процессор MS Word
    Ввод информации в память компьютера
    Отслеживание событий: Назначение и использование, код отслеживания событий
    Инструментальные средства программирования
    Математические и инструментальные методы в экономике
    Применение компьютерной графики в XXI веке
    Основы геоинформатики и ГИС-технологий
    Инструкция по работе с мобильным приложением E-Salyq Azamat в части подачи ФНО 250.00
    Локальные и глобальные компьютерные сети. Коммуникационные технологии
    История развития интернета
    Программирование на языке Паскаль
    Мировые информационные ресурсы
    Строковые литералы
    Структуры данных
    Бот в помощь! Виды чат-ботов
    Табличные информационные модели. 7 класс
    Test automation
    ИКТ на уроках информатики. Электронная почта
    Задача физической передачи данных. Основные методы доступа
    Понятие как форма мышления
    Создание сайта Детская изостудия
    Бази даних. Access 2007. Використання майстра
    Конспект урока по теме Компьютерные сети
    Как поговорить с ребёнком об Интернете
    Структура ученической научно-исследовательской работы. Новые требования ГОСТа и правила составления библиографических записей
    Технологии контекстной рекламы
    Кодирование графической информации
    Construct 2. Урок # 2