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

Нажмите для полного просмотра!

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №2

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №3

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №4

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №5

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №6

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №7

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №8

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №9

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №10

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №11

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №12

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №13

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №14

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №15

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №16

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №17

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №18

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №19

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №20

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №21

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №22

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №23

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №24

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №25

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №26

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №27

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №28

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №29

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №30

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №31

CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №32

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы. Доклад-сообщение содержит 32 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

Пример h1 { font-family: Arial, sans-serif; font-size: 12pt; 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: значение; свойство2: значение; ……………………….. }

Слайд 5

Описание слайда:

Пример h1, h2, h3 { font-family: Arial, sans-serif; } h1{ font-size: 12pt; color: yellow; } h2 { font-size: 110%; color: green; } h3 { font-size: 12px; color: red; }

Слайд 6

Описание слайда:

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

Слайд 7

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

Описание слайда:

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

Слайд 8

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

Описание слайда:

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

Слайд 9

Описание слайда:

Обращение к идентификатору

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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

Слайд 12

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

Описание слайда:

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

Слайд 13

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

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

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

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

Ссылки a { color: blue; } a:link { color: green; } a:visited { color: red; } a:active { background-color: cyan; } a:hover { letter-spacing: 10px; font-weight: bold; color: red; }

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

:first-child div { background-color: #c0e4ff; } p { color: #555; background-color: #dcdcdc; } p:first-child { color: #f00; background-color: #c5ffa0; }

Слайд 22

Описание слайда:

:focus input:focus {color: red}

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

Кавычки Псевдокласс lang позволяет определять вид кавычек для цитат (тег ) с помощью значения 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: "\201C" "\201D"} q:lang(de) {quotes: "\201E" "\201C"} q:lang(fr) {quotes: "\00AB" "\00BB"} q:lang(ru) {quotes: "лалала" "лололо"} Обратите внимание на вид кавычек для цитат: Цитата по умолчанию Французская цитата Немецкая цитата Английская цитата Русская цитата

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

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

Слайд 31

Описание слайда:

::selection p::selection { color: #f00; background: #0f0; }

Слайд 32

Описание слайда:

Задание: Задать стиль для первой буквы ссылки – установить цвет Задать стиль для первой строки абзаца – задать цвет фона Выделенный текст для элемента списка увеличить в размере