Универсальный селектор презентация

Содержание

Слайд 2

h1{color: navy;}
body {
background-color: white  color: black; }
aside { …}
footer p {

h1{color: navy;} body { background-color: white color: black; } aside { …} footer
text-align: right;
font-size: 11px;
}

Селекторы элемента


2


Слайд 3

.bold {color: yellow;}
h1.yellow{color: yellow;}
.class1 {font-weight: bold;}
.class2 {font-style: italic;}

Текст


.class1 {font-weight:

.bold {color: yellow;} h1.yellow{color: yellow;} .class1 {font-weight: bold;} .class2 {font-style: italic;} Текст .class1
bold;}
.class2 {font-style: italic;}
.class3 {background: green;}
.class1.class2 {background: silver;}

Текст


Текст


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


3


Слайд 4

#header {color: blue;}
#header.header {color: blue;}
#header .header {color: blue;}
p {color: green; font-style:

#header {color: blue;} #header.header {color: blue;} #header .header {color: blue;} p {color: green;
italic;}
p#p {color: red;}
p.p {color: yellow;}

Абзац 1


Абзац 2


Абзац 3


h1, p, .copyright, #banner {… }

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


4


Слайд 5



Простой документ


Простой документ Заголовок Абзац с важным текстом. Предок, потомок, родительский элемент, дочерний элемент,

Заголовок


Абзац с
важным
текстом.




Предок, потомок, родительский элемент, дочерний элемент, сестринский элемент.

Селекторы, имеющие отношение к дереву документа  


5


Слайд 6

h1 strong { color: red; }
.StrongHeader{ color: red; }
.intro a {

h1 strong { color: red; } .StrongHeader{ color: red; } .intro a {
color: yellow; }
footer p {
text-align: right;
font-size: 11px;
padding-right: 20px; }
#featured .innerblock a{color: red;}

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


6


Слайд 7


Заголовок


Текст


Заголовок


Текст

Заголовок Текст Заголовок Текст Заголовок Текст … … .news h2 { color: red;

Заголовок


Текст




.news h2 { color: red; }
.news p { color: blue; }

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


7


Слайд 8


Иван Иванов Иванович


12345

Иван Иванов Иванович 12345 45000, К. Маркса 12 .contact.name { font-weight: bold; }

45000, К. Маркса 12



.contact.name { font-weight: bold; }
.contact.phone { color: blue ;}
.contact.address { color: red; }

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


8


Слайд 9

Селекторы смежных элементов одного уровня  


9


– элемент_1 +элемент_2;
– элемент_1

Селекторы смежных элементов одного уровня 9 – элемент_1 +элемент_2; – элемент_1 ~ элемент_2.
~ элемент_2.
    

Заголовок

   
 

Текст первого блока

 
    

Текст второго блока

 


Слайд 10

Селекторы смежных элементов одного уровня  


10


h2+div { color: red;

Селекторы смежных элементов одного уровня 10 h2+div { color: red; } Название статьи
}            
          
 

Название статьи

  

Ключевые слова

  
 

Аннотация

    

h2~div { color: red; }

Слайд 11

Дочерние селекторы  


11


    

Заголовок

   
 

Текст



Дочерние селекторы 11 Заголовок Текст .article p { color: red;} .article > p
.article p { color: red;}
.article > p { color: green;}  

Аннотация к статье

 

Ключевые слова


Текст статьи



   
 
  

Слайд 12

:first-child {color: green;} :last-child {color: green;}
p:first-child{color:red;}
.contact p:first-child{color:red;}


:first-child {color: green;} :last-child {color: green;} p:first-child{color:red;} .contact p:first-child{color:red;} Иван Иванов Иванович 12345

Иван Иванов Иванович


12345


45000, К. Маркса 12




Петров Петр Петрович


12345


45000, К. Маркса 12



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


12


Слайд 13

.contact p:only-child{color:red;}


Иван Иванов Иванович


.contact p:only-child{color:red;} Иван Иванов Иванович 12345 45000, К. Маркса 12 Петров Петр Петрович
class="phone">12345


45000, К. Маркса 12




Петров Петр Петрович


12345


45000, К. Маркса 12


Данные 2010 года



Текст


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


13


Слайд 14

:nth-child {…}
Значения:
– odd;
p:nth-child(odd) {background-color: green;}
– even;
p:nth-child(even) {background-color: blue;}
– <число>;

:nth-child {…} Значения: – odd; p:nth-child(odd) {background-color: green;} – even; p:nth-child(even) {background-color: blue;}

p:nth-child(5) {color: green;}
– <выражение> (an+b)
p:nth-child(2n+1) {background-color: blue;}
p:nth-child(-n+3) {color: green;}
p:nth-child(3n+3) {color: green;}
p:nth-child(n+3) {color: green;}

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


14


Слайд 15

:first-of-type {…}
:last-of-type {…}
only-of-type {…}
:nth-of-type {…}

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


15


:first-of-type {…} :last-of-type {…} only-of-type {…} :nth-of-type {…} Псевдоклассы дочерних элементов 15

Слайд 16

.contact strong:only-of-type {color: red;}


Иван Иванов Иванович

.contact strong:only-of-type {color: red;} Иван Иванов Иванович 12345 45000, К. Маркса 12 Петров

12345


45000, К. Маркса 12




Петров Петр Петрович


12345


45000, К. Маркса 12


Данные 2010 года

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


16


Слайд 17

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


17


Псевдоклассы дочерних элементов 17

Слайд 18

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


18



Синтак­сис селектора атрибутов: элемент[атрибут]:
img[title]{};
.photo[title] {};


Селекторы атрибутов 18 Синтак­сис селектора атрибутов: элемент[атрибут]: img[title]{}; .photo[title] {}; Элемент 1 Элемент
title>Элемент 1

Элемент 2


Элемент 3


Элемент 1


Элемент 2


Элемент 3



Слайд 19

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


19


Синтак­сис селектора атрибутов: элемент [атрибут="значение"]:
a[href="http://www.example.ru"]{}
input[type="text"]{border: 4px double black;}


Селекторы атрибутов 19 Синтак­сис селектора атрибутов: элемент [атрибут="значение"]: a[href="http://www.example.ru"]{} input[type="text"]{border: 4px double black;}





Слайд 20

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


20


Селектор атрибутов с совпадениями по подстроке «начинается

Селекторы атрибутов 20 Селектор атрибутов с совпадениями по подстроке «начинается с…». Синтак­сис селектора
с…». Синтак­сис селектора атрибутов: элемент[атрибут^="значение"]:
a[href^="http://"]{}
a[href^="http://ugatu/ac.ru/"]{ color: red;}
УГАТУ |
ВЕСТНИК УГАТУ |
УГНТУ

Слайд 21

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


21


Селектор атрибутов с совпадениями по подстроке «содержит экземпляр…».

Селекторы атрибутов 21 Селектор атрибутов с совпадениями по подстроке «содержит экземпляр…». Синтаксис селектора
Синтаксис селектора атрибутов следующим образом: элемент[атрибут*="значение"]
a[href*="ugatu"]{ color: green;}
УГАТУ |
ВЕСТНИК УГАТУ |
УГНТУ
ВЕСТНИК УГАТУ_УГНТУ

Слайд 22

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


22


Синтаксис селектора атрибутов: элемент[атрибут$="значение"]:
a[href$=".pdf"] {}
a [href$=".mov"]

Селекторы атрибутов 22 Синтаксис селектора атрибутов: элемент[атрибут$="значение"]: a[href$=".pdf"] {} a [href$=".mov"] {} a [href$=".doc"] {}
{}
a [href$=".doc"] {}

Слайд 23

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


23



:root
:active;
:link;
:visited;
:hover;
:focus;
:not;
:lang;
:empty

Псевдоклассы 23 :root :active; :link; :visited; :hover; :focus; :not; :lang; :empty

Слайд 24

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


24




УГАТУ

 

Слайд 25

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


25


p:not(.phone):not(.address) { color: red; }


Псевдоклассы 25 p:not(.phone):not(.address) { color: red; } Иван Иванов Иванович 12345 45000, К.
class="name">Иван Иванов Иванович


12345


45000, К. Маркса 12




Петров Петр Петрович


12345


45000, К. Маркса 12


Данные 2010 года

Слайд 26

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


26


:lang(ru) {color: red; }


УГАТУ


USATU


Псевдоклассы 26 :lang(ru) {color: red; } УГАТУ USATU ---
lang="de">---



Слайд 27

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


27


::first-letter; 
::first-line; 
::before; 
::after; 
::selection  

Псевдоэлементы 27 ::first-letter; ::first-line; ::before; ::after; ::selection

Слайд 28

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


28


p.tip:before {content: "ПОДСКАЗКА!" }
.contact::before{content:"\2709";font-size: 30px;}
.warning::before{ content: "Важно! "; font-weight:

Псевдоэлементы 28 p.tip:before {content: "ПОДСКАЗКА!" } .contact::before{content:"\2709";font-size: 30px;} .warning::before{ content: "Важно! "; font-weight:
bold; }
.warning::after { content: " Важно!"; font-weight: bold;}

Вестник УГАТУ включен в перечень рецензируемых научных изданий.


Слайд 29

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


29


::selection {color: white; background-color: black;}
p::selection {color: white; background-color:

Пседвоэлементы 29 ::selection {color: white; background-color: black;} p::selection {color: white; background-color: black;} Пседвоэлемент selection Пседвоэлемент selection
black;}

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


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


Слайд 30

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


30


:valid:{};  
:invalid:{};  
:enabled:{};  
:disabled :{};  
:checked :{};  
:valid:{};  
:invalid:{};

Псевдоклассы 30 :valid:{}; :invalid:{}; :enabled:{}; :disabled :{}; :checked :{}; :valid:{}; :invalid:{}; :in-range:{}; :out-of-range:{}; :required:{}; :optional:{}; :read-only:{};
 
:in-range:{};  
:out-of-range:{};  
:required:{};  
:optional:{};
:read-only:{};

Слайд 31

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


31


input:invalid {background: white; border: 2px solid red; }
input:valid

Псевдоклассы 31 input:invalid {background: white; border: 2px solid red; } input:valid {background: red;
{background: red; border: 2px solid green;}





Слайд 32

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


32


:disabled {opacity: 0.3;}


Псевдоклассы 32 :disabled {opacity: 0.3;}
disabled value="Disabled" />


Слайд 33

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


33


:checked + span {color: red; font-weight: bold; }

Выберите

Псевдоклассы 33 :checked + span {color: red; font-weight: bold; } Выберите технологию HTML5
технологию
HTML5
CSS3
PHP
XML

Выберете уровень


CSS2
CSS3

 

Слайд 34

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


34


:in-range {border: 2px solid green;}
:out-of-range {border: 2px solid

Псевдоклассы 34 :in-range {border: 2px solid green;} :out-of-range {border: 2px solid red; } Ваш возраст:
red; }


 

Слайд 35

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


35


:optional {border: 2px solid blue; }
:required { border:

Псевдоклассы 35 :optional {border: 2px solid blue; } :required { border: 2px solid
2px solid red; }





Слайд 36

Принципы каскадных правил 


36


Тип таблицы стилей.
Последнее правило.
Специфичность.
Правило !important.

Принципы каскадных правил 36 Тип таблицы стилей. Последнее правило. Специфичность. Правило !important.

Слайд 37

Принципы каскадных правил 


37


Селекторы тегов оцениваются в 1 балл
Селекторы классов, атрибутов оцениваются

Принципы каскадных правил 37 Селекторы тегов оцениваются в 1 балл Селекторы классов, атрибутов
в 10 баллов
Селекторы псевдоклассов оцениваются в 10 баллов
Селекторы идентификаторов оцениваются в 100 баллов

Слайд 38

Принципы каскадных правил 


37


#css {color: red;}
.green {color: green;}
p

Принципы каскадных правил 37 #css {color: red;} .green {color: green;} p {color: black;
{color: black; font-weight: bold;}

Основы CSS 3

Слайд 39

Принципы каскадных правил 


37


#css {color: red;}
.green {color: green;}
p

Принципы каскадных правил 37 #css {color: red;} .green {color: green;} p {color: black
{color: black !important; }

Основы CSS 3

Слайд 40

Селекторы 


1




Селекторы 1 P ~ I {color: red;} Селекторы формальное описание элемента или группы


Селекторы формальное описание элемента или группы элементов для которых применяютсястилевые правила


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

Имя файла: Универсальный-селектор.pptx
Количество просмотров: 147
Количество скачиваний: 0