Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы

Содержание

ГруппированиеСтиль для каждого селектора Селектор { свойство1: значение; свойство2: значение; ……………………….. }
CSSГруппировкаИдентификаторыКлассыПсевдоклассы и псевдоэлементы ГруппированиеСтиль для каждого селектора Селектор { свойство1: значение; свойство2: значение; ……………………….. } Пример h1 { font-family: Arial, sans-serif; font-size: 12pt; color: yellow; } h2 Сгруппированные селекторы Селектор1, Селектор2, ... СелекторN { свойство1: значение; свойство2: значение; ……………………….. } Примерh1, h2, h3 { font-family: Arial, sans-serif; } h1{ font-size: 12pt; color: Задание:Задайте для тегов a, p – общую фурнитуру текста; цвет текста должен Идентификация элементов Определение иденификатора #имя_id { свойство1: значение; свойство2: значение; ……………………….. } Пример: #my_id { color: green; } Определение идентификатора для тегаТег#Имя_id { свойство1: значение; свойство2: значение; ... } Пример: Обращение к идентификатору Пример: Для этого абзаца применен идентифиатор my_id Для этого Пример#blok { position: absolute; left: 30px; top: 150px; width: 300px; height: 200px; background: Задание Создайте уникальные стили, для каждого из заголовков, например разные цвета КлассыОпределение класса .имя_класса { свойство1: значение; свойство2: значение; ……………………….. } Пример: .myclass { color: #FFBB00; } Определение класса для тегаТэг.Имя_класса { свойство1: значение; свойство2: значение; ………………………..... } Пример: Обращение к классу< Тег class = Имя_класса> Пример: Для этого абзаца Применение нескольких классов одновременно.for_font { font-size: 14pt; }.for_color { color: Задание: Задать стиль для первой буквы в абзаце (размер, начертание, цвет и вес) Псевдоклассы :hovertr { background-color: #fff8dc; color: #008;  font-size: 16px;  }tr:hover { background-color: #b8860b; color: Ссылкиa { color: blue; } a:link { color: green; } a:visited { Псевдокласс first-child блок родитель первый дочерний элемент второй дочерний элемент  :first-childdiv { background-color: #c0e4ff; } p { color: #555; background-color: #dcdcdc; } :focusinput:focus {color: red} Псевдокласс может быть применен, :langЯзык может быть:ru - Русскийen - Английскийde - Немецкийfr - Французскийit - Итальянский p:lang(ru) {color: blue;}  p:lang(en) {color: red;} Русский текст выделен синим English text is КавычкиПсевдокласс lang позволяет определять вид кавычек для цитат (тег ) с помощью значения quotes - кавычки Пример:q:lang(en) {quotes: Пример: q:lang(en) {quotes: Задание:При наведении на ссылку – увеличивать ее в размереДля первого дочернено элемента Псевдоэлементы :first-letter p:first-letter { font: bold 24px Verdana; color:#ff0000; } :first-line p:first-line { font: 16px Arial;  color: #f00; } ::selection p::selection { color: #f00; background: #0f0; } Задание:Задать стиль для первой буквы ссылки – установить цветЗадать стиль для первой
Слайды презентации

Слайд 2 Группирование
Стиль для каждого селектора

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

ГруппированиеСтиль для каждого селектора Селектор { свойство1: значение; свойство2: значение; ……………………….. }


свойство2: значение;
………………………..
}

Слайд 3 Пример
h1 {
font-family: Arial, sans-serif;
font-size: 12pt;

Пример h1 { font-family: Arial, sans-serif; font-size: 12pt; color: yellow; }


color: yellow;
}

h2 {
font-family: Arial, sans-serif;
font-size:

110%;
color: green;
}

h3 {
font-family: Arial, sans-serif;
font-size: 12px;
color: red;
}

Слайд 4 Сгруппированные селекторы

Селектор1, Селектор2, ... СелекторN { свойство1:

Сгруппированные селекторы Селектор1, Селектор2, ... СелекторN { свойство1: значение; свойство2: значение; ……………………….. }

значение;
свойство2: значение;
………………………..
}

Слайд 5 Пример
h1, h2, h3 { font-family: Arial, sans-serif; }

Примерh1, h2, h3 { font-family: Arial, sans-serif; } h1{ font-size: 12pt;


h1{
font-size: 12pt;
color: yellow;
}

h2 {
font-size: 110%;


color: green;
}

h3 {
font-size: 12px;
color: red;
}

Слайд 6 Задание:
Задайте для тегов a, p – общую фурнитуру

Задание:Задайте для тегов a, p – общую фурнитуру текста; цвет текста

текста; цвет текста должен быть разный

Текст

посилання

Текст абзаца



Слайд 7 Идентификация элементов
Определение иденификатора
#имя_id {
свойство1: значение;
свойство2: значение;

Идентификация элементов Определение иденификатора #имя_id { свойство1: значение; свойство2: значение; ……………………….. } Пример: #my_id { color: green; }


………………………..
}
Пример:
#my_id {
color: green;
}

Слайд 8 Определение идентификатора для тега
Тег#Имя_id {
свойство1: значение;
свойство2:

Определение идентификатора для тегаТег#Имя_id { свойство1: значение; свойство2: значение; ... } Пример:

значение; ...
}
Пример:

Слайд 9 Обращение к идентификатору

Пример:

Обращение к идентификатору Пример: Для этого абзаца применен идентифиатор my_id Для

= my_id> Для этого абзаца применен идентифиатор my_id

Для

этого абзаца никакой идентифиатор не применен

<р id = id2> Идентифиатор id2 можно применять только для абзацев

Слайд 10 Пример
#blok {
position: absolute;
left: 30px;
top: 150px;

Пример#blok { position: absolute; left: 30px; top: 150px; width: 300px; height: 200px;


width: 300px;
height: 200px;
background: grey; }

blok> КОНТЕНТ БЛОКА

Слайд 11 Задание
Создайте уникальные стили, для каждого из заголовков, например

Задание Создайте уникальные стили, для каждого из заголовков, например разные цвета

разные цвета

Слайд 12 Классы
Определение класса
.имя_класса {
свойство1: значение;
свойство2: значение;
………………………..
}
Пример:
.myclass

КлассыОпределение класса .имя_класса { свойство1: значение; свойство2: значение; ……………………….. } Пример: .myclass { color: #FFBB00; }

{
color: #FFBB00;
}

Слайд 13 Определение класса для тега
Тэг.Имя_класса {
свойство1: значение;
свойство2:

Определение класса для тегаТэг.Имя_класса { свойство1: значение; свойство2: значение; ………………………..... } Пример:

значение;
……………………….....
}
Пример:


Слайд 14 Обращение к классу
< Тег class = Имя_класса>

Обращение к классу< Тег class = Имя_класса> Пример: Для этого абзаца



Пример:
Для этого абзаца применен класс

myclass

<р> Для этого абзаца не применен класс

<р class = class1 > Этот класс можно применять только для абзацев


Слайд 15 Применение нескольких классов одновременно
.for_font {
font-size: 14pt; }

.for_color

Применение нескольких классов одновременно.for_font { font-size: 14pt; }.for_color { color: green; } Текст

{
color: green; }

for_color> Текст


Слайд 16 Задание:
Задать стиль для первой буквы в абзаце (размер,

Задание: Задать стиль для первой буквы в абзаце (размер, начертание, цвет и вес)

начертание, цвет и вес)

Слайд 17 Псевдоклассы

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

Слайд 18 :hover
tr { background-color: #fff8dc; color: #008;  font-size: 16px;  }

tr:hover { background-color: #b8860b; color: #fff; font-size: 25px; }

:hovertr { background-color: #fff8dc; color: #008;  font-size: 16px;  }tr:hover { background-color: #b8860b;

Слайд 19 Ссылки
a { color: blue; }

a:link { color:

Ссылкиa { color: blue; } a:link { color: green; } a:visited

green; }

a:visited { color: red; }

a:active {

background-color: cyan; }

a:hover {
letter-spacing: 10px;
font-weight: bold;
color: red; }

Слайд 20 Псевдокласс first-child
блок родитель первый дочерний элемент второй

Псевдокласс first-child блок родитель первый дочерний элемент второй дочерний элемент 

дочерний элемент 

Слайд 21 :first-child
div { background-color: #c0e4ff; }
p { color: #555; background-color: #dcdcdc; }
p:first-child { color: #f00; background-color: #c5ffa0; }

:first-childdiv { background-color: #c0e4ff; } p { color: #555; background-color: #dcdcdc;

Слайд 22 :focus
input:focus {color: red}
Псевдокласс может быть

:focusinput:focus {color: red} Псевдокласс может быть применен, например для тегов  , ,  и .

применен, например для тегов 
, ,  и .

Слайд 23 :lang

Язык может быть:
ru - Русский
en - Английский
de - Немецкий
fr - Французский
it - Итальянский


:langЯзык может быть:ru - Русскийen - Английскийde - Немецкийfr - Французскийit - Итальянский

Слайд 24
p:lang(ru) {color: blue;} 
p:lang(en) {color: red;}


Русский текст выделен синим English text

p:lang(ru) {color: blue;}  p:lang(en) {color: red;} Русский текст выделен синим English text is chosen red  

is chosen red
 

Слайд 25 Кавычки
Псевдокласс lang позволяет определять вид кавычек для цитат (тег ) с

КавычкиПсевдокласс lang позволяет определять вид кавычек для цитат (тег ) с помощью значения quotes - кавычки Пример:q:lang(en) {quotes:

помощью значения quotes - кавычки
Пример:
q:lang(en) {quotes: "\201C" "\201D"}

Слайд 26 Пример:
q:lang(en) {quotes: "\201C" "\201D"} q:lang(de) {quotes: "\201E" "\201C"} q:lang(fr) {quotes:

Пример: q:lang(en) {quotes:

"\00AB" "\00BB"} q:lang(ru) {quotes: "лалала" "лололо"}

Обратите внимание на вид кавычек

для цитат:

Цитата по умолчанию
Французская цитата
Немецкая цитата
Английская цитата
Русская цитата


Слайд 27 Задание:
При наведении на ссылку – увеличивать ее в

Задание:При наведении на ссылку – увеличивать ее в размереДля первого дочернено

размере
Для первого дочернено элемента блока body задать фон и

курсивное начертание
Придумать свой стиль и кавычки для украиноязычного текста


Слайд 28 Псевдоэлементы

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

Слайд 29 :first-letter 
p:first-letter { font: bold 24px Verdana; color:#ff0000; }

:first-letter p:first-letter { font: bold 24px Verdana; color:#ff0000; }

Слайд 30 :first-line 
p:first-line { font: 16px Arial;  color: #f00; }

:first-line p:first-line { font: 16px Arial;  color: #f00; }

Слайд 31 ::selection 
p::selection { color: #f00; background: #0f0; }

::selection p::selection { color: #f00; background: #0f0; }
  • Имя файла: css-gruppirovka-identifikatory-klassy-psevdoklassy-i-psevdoelementy.pptx
  • Количество просмотров: 147
  • Количество скачиваний: 0
- Предыдущая Современное киноискусство
Следующая - Особенности пищеварения у собак и котов. Питательные и биологически активные вещества

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

Презентация к уроку по Психологии общения Приемы саморегуляции при осуществлении техник межличностной аттракции Презентация к уроку по Психологии общения Приемы саморегуляции при осуществлении техник межличностной аттракции 197
Доклад на педсовет Активные занятия с родителями - как средство построения эффективного взаимодействия с родителями методическая разработка Доклад на педсовет Активные занятия с родителями - как средство построения эффективного взаимодействия с родителями методическая разработка 157
День Рождения К.И.Чуковского занимательные факты (старшая группа) День Рождения К.И.Чуковского занимательные факты (старшая группа) 172
Астраханский кремль классный час (4 класс) по теме Астраханский кремль классный час (4 класс) по теме 148
5 МЕСЯЦ 5 МЕСЯЦ 142
Перелом шейки бедра Перелом шейки бедра 137
Зубные вкладки Зубные вкладки 138
Сетевое взаимодействие как средство развития профессиональной компетентности воспитателей ДОУ презентация к уроку по теме Сетевое взаимодействие как средство развития профессиональной компетентности воспитателей ДОУ презентация к уроку по теме 133
С 8 марта Полина С 8 марта Полина 128
Брусничка Брусничка 148
Презентация к классному часу Мы -дорожники! Презентация к классному часу Мы -дорожники! 174
Оценка рыночной стоимости недвижимости Оценка рыночной стоимости недвижимости 170
Использование блоков Дьенеша для развития логического мышления детей дошкольного возраста учебно-методическое пособие по математике (младшая, средняя, старшая, подготовительная группа) Использование блоков Дьенеша для развития логического мышления детей дошкольного возраста учебно-методическое пособие по математике (младшая, средняя, старшая, подготовительная группа) 76
Презентация Осуществление коррекционной работы в начальных классах презентация к уроку по теме Презентация Осуществление коррекционной работы в начальных классах презентация к уроку по теме 74
Организация проектной деятельности в образовательном процессе ДОУ. методическая разработка Организация проектной деятельности в образовательном процессе ДОУ. методическая разработка 172
Доклад и презентация по теме “Через любовь к языку приходит любовь к Родине статья ( класс) Доклад и презентация по теме “Через любовь к языку приходит любовь к Родине статья ( класс) 168
Искусственный мозг Искусственный мозг 117
Автомобили Автомобили 183
Информационные ресурсы корпоративных информационных систем Информационные ресурсы корпоративных информационных систем 139
skapets tv yantarnaya sova chast 2 skapets tv yantarnaya sova chast 2 142
Smm-продвижение бренда Ясная горка в социальной сети Одноклассники Smm-продвижение бренда Ясная горка в социальной сети Одноклассники 117
Автоматический радиокомпас KR-87 Автоматический радиокомпас KR-87 170
21 мая - Всемирный день метрологии 21 мая - Всемирный день метрологии 128
Сценарий новогоднего праздника материал (средняя группа) Сценарий новогоднего праздника материал (средняя группа) 121
Бронхиальная астма Бронхиальная астма 115
ПРИЁМКА АВТОМОБИЛЕЙ И АГРЕГАТОВ В РЕМОНТ ПРИЁМКА АВТОМОБИЛЕЙ И АГРЕГАТОВ В РЕМОНТ 145
Презентация Предприятие в системе рыночной экономики Презентация Предприятие в системе рыночной экономики 187
Источники по истории классовой борьбы России xvii – xviii вв. Источники по истории классовой борьбы России xvii – xviii вв. 136
Интегрированное занятие: Как называют Деда Мороза в разных странах мира? Вторая младшая группа. Воспитатель: Котюжанская Ольга Игоревна. презентация к занятию (младшая группа) Интегрированное занятие: Как называют Деда Мороза в разных странах мира? Вторая младшая группа. Воспитатель: Котюжанская Ольга Игоревна. презентация к занятию (младшая группа) 178
Дидактическое пособие Радужные рыбки- застежка презентация к уроку (младшая, средняя, старшая группа) Дидактическое пособие Радужные рыбки- застежка презентация к уроку (младшая, средняя, старшая группа) 163