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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №1CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №2CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №3CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №4CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №5CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №6CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №7CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №8CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №9CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №10CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №11CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №12CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №13CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №14CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №15CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №16CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №17CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №18CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №19CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №20CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №21CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №22CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №23CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №24CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №25CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №26CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №27CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №28CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №29CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №30CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №31CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы, слайд №32
Скачать

Содержание ▲

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

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

Слайд 1


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

Слайд 2


Группирование Стиль для каждого селектора Селектор { свойство1: значение; свойство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; }
Описание слайда:
Пример 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: значение; ……………………….. }
Описание слайда:
Сгруппированные селекторы Селектор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; }
Описание слайда:
Пример 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 – общую фурнитуру текста; цвет текста должен быть разный <a href=”назва мітки”> Текст посилання </a> <p> Текст абзаца </p>
Описание слайда:
Задание: Задайте для тегов a, p – общую фурнитуру текста; цвет текста должен быть разный <a href=”назва мітки”> Текст посилання </a> <p> Текст абзаца </p>

Слайд 7


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

Слайд 8


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

Слайд 9


Обращение к идентификатору <Тэг id = имя_идентификатора>
Описание слайда:
Обращение к идентификатору <Тэг id = имя_идентификатора>

Слайд 10


Пример #blok { position: absolute; left: 30px; top: 150px; width: 300px; height: 200px; background: grey; }
Описание слайда:
Пример #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 = Имя_класса> Пример: <р class = myclass> Для этого абзаца применен класс myclass <р> Для этого абзаца не применен класс <р class = class1 > Этот класс можно применять только для абзацев
Описание слайда:
Обращение к классу < Тег class = Имя_класса> Пример: <р class = myclass> Для этого абзаца применен класс myclass <р> Для этого абзаца не применен класс <р class = class1 > Этот класс можно применять только для абзацев

Слайд 15


Применение нескольких классов одновременно .for_font { font-size: 14pt; } .for_color { color: green; } <p  class = for_font for_color> Текст </p>
Описание слайда:
Применение нескольких классов одновременно .for_font { font-size: 14pt; } .for_color { color: green; } <p  class = for_font for_color> Текст </p>

Слайд 16


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

Слайд 17


Псевдоклассы
Описание слайда:
Псевдоклассы

Слайд 18


:hover tr { background-color: #fff8dc; color: #008;  font-size: 16px;  } tr:hover { background-color: #b8860b; color: #fff; font-size: 25px; }
Описание слайда:
: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; }
Описание слайда:
Ссылки 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 <div> блок родитель <p> первый дочерний элемент</p> <p> второй дочерний элемент</p>  </div>
Описание слайда:
Псевдокласс first-child <div> блок родитель <p> первый дочерний элемент</p> <p> второй дочерний элемент</p>  </div>

Слайд 21


:first-child div { background-color: #c0e4ff; } p { color: #555; background-color: #dcdcdc; } p:first-child { color: #f00; background-color: #c5ffa0; }
Описание слайда:
: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} <form> <input type="text" value="Введите текст" size="30"> </form>
Описание слайда:
:focus input:focus {color: red} <form> <input type="text" value="Введите текст" size="30"> </form>

Слайд 23


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

Слайд 24


p:lang(ru) {color: blue;}  p:lang(en) {color: red;} <body> <p lang="ru">Русский текст выделен синим</p> <p lang="en">English text is chosen red</p> </body>  
Описание слайда:
p:lang(ru) {color: blue;}  p:lang(en) {color: red;} <body> <p lang="ru">Русский текст выделен синим</p> <p lang="en">English text is chosen red</p> </body>  

Слайд 25


Кавычки Псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения quotes - кавычки Пример: q:lang(en) {quotes: "\201C" "\201D"}
Описание слайда:
Кавычки Псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения quotes - кавычки Пример: q:lang(en) {quotes: "\201C" "\201D"}

Слайд 26


Пример: q:lang(en) {quotes: "\201C" "\201D"} q:lang(de) {quotes: "\201E" "\201C"} q:lang(fr) {quotes: "\00AB" "\00BB"} q:lang(ru) {quotes: "лалала" "лололо"} <p>Обратите внимание на вид кавычек для цитат: <p> <q>Цитата по умолчанию</q> <br> <q lang="fr">Французская цитата</q> <br> <q lang="de">Немецкая цитата</q> <br> <q lang="en">Английская цитата</q> <br> <q lang="ru">Русская цитата</q> <br>
Описание слайда:
Пример: q:lang(en) {quotes: "\201C" "\201D"} q:lang(de) {quotes: "\201E" "\201C"} q:lang(fr) {quotes: "\00AB" "\00BB"} q:lang(ru) {quotes: "лалала" "лололо"} <p>Обратите внимание на вид кавычек для цитат: <p> <q>Цитата по умолчанию</q> <br> <q lang="fr">Французская цитата</q> <br> <q lang="de">Немецкая цитата</q> <br> <q lang="en">Английская цитата</q> <br> <q lang="ru">Русская цитата</q> <br>

Слайд 27


Задание: При наведении на ссылку – увеличивать ее в размере Для первого дочернено элемента блока body задать фон и курсивное начертание Придумать свой стиль и кавычки для украиноязычного текста
Описание слайда:
Задание: При наведении на ссылку – увеличивать ее в размере Для первого дочернено элемента блока 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; }

Слайд 32


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

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию