CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы презентация
Содержание
- 2. Группирование Стиль для каждого селектора Селектор { свойство1: значение;
- 3. Пример h1 { font-family: Arial, sans-serif; font-size: 12pt;
- 4. Сгруппированные селекторы Селектор1, Селектор2, ... СелекторN { свойство1: значение;
- 5. Пример h1, h2, h3 { font-family: Arial, sans-serif; } h1{
- 6. Задание: Задайте для тегов a, p – общую фурнитуру текста; цвет
- 7. Идентификация элементов Определение иденификатора #имя_id { свойство1: значение; свойство2:
- 8. Определение идентификатора для тега Тег#Имя_id { свойство1: значение; свойство2:
- 9. Обращение к идентификатору <Тэг id = имя_идентификатора>
- 10. Пример #blok { position: absolute; left: 30px; top:
- 11. Задание Создайте уникальные стили, для каждого из заголовков, например разные цвета
- 12. Классы Определение класса .имя_класса { свойство1: значение; свойство2: значение;
- 13. Определение класса для тега Тэг.Имя_класса { свойство1: значение; свойство2:
- 14. Обращение к классу < Тег class = Имя_класса> Пример: <р
- 15. Применение нескольких классов одновременно .for_font { font-size: 14pt; } .for_color
- 16. Задание: Задать стиль для первой буквы в абзаце (размер, начертание, цвет
- 17. Псевдоклассы
- 18. :hover tr { background-color: #fff8dc; color: #008; font-size: 16px; } tr:hover {
- 19. Ссылки a { color: blue; } a:link { color: green;
- 20. Псевдокласс first-child <div> блок родитель <p> первый дочерний элемент</p> <p> второй
- 21. :first-child div { background-color: #c0e4ff; } p { color: #555;
- 22. :focus input:focus {color: red} <form> <input type="text" value="Введите текст" size="30"> </form>
- 23. :lang Язык может быть: ru - Русский en - Английский de - Немецкий
- 24. p:lang(ru) {color: blue;} p:lang(en) {color: red;} <body> <p lang="ru">Русский текст
- 25. Кавычки Псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения
- 26. Пример: q:lang(en) {quotes: "\201C" "\201D"} q:lang(de) {quotes: "\201E" "\201C"} q:lang(fr) {quotes:
- 27. Задание: При наведении на ссылку – увеличивать ее в размере Для
- 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. Задание: Задать стиль для первой буквы ссылки – установить цвет Задать
- 33. Скачать презентацию
Слайды и текст этой презентации
Слайд 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 – общую фурнитуру текста; цвет текста должен быть разный
<a href=”назва мітки”> Текст посилання </a>
<p> Текст абзаца </p>
Слайд 7
Описание слайда:
Идентификация элементов
Определение иденификатора
#имя_id {
свойство1: значение;
свойство2: значение;
………………………..
}
Пример:
#my_id {
color: green;
}
Слайд 8
Описание слайда:
Определение идентификатора для тега
Тег#Имя_id {
свойство1: значение;
свойство2: значение; ...
}
Пример:
Слайд 9
Описание слайда:
Обращение к идентификатору
<Тэг id = имя_идентификатора>
Слайд 10
Описание слайда:
Пример
#blok {
position: absolute;
left: 30px;
top: 150px;
width: 300px;
height: 200px;
background: grey; }
Слайд 11
Описание слайда:
Задание
Создайте уникальные стили, для каждого из заголовков, например разные цвета
Слайд 12
Описание слайда:
Классы
Определение класса
.имя_класса {
свойство1: значение;
свойство2: значение;
………………………..
}
Пример:
.myclass {
color: #FFBB00;
}
Слайд 13
Описание слайда:
Определение класса для тега
Тэг.Имя_класса {
свойство1: значение;
свойство2: значение;
……………………….....
}
Пример:
Слайд 14
Описание слайда:
Обращение к классу
< Тег class = Имя_класса>
Пример:
<р class = myclass> Для этого абзаца применен класс myclass
<р> Для этого абзаца не применен класс
<р class = class1 > Этот класс можно применять только для абзацев
Слайд 15
Описание слайда:
Применение нескольких классов одновременно
.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;
}
Слайд 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
<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;
}
Слайд 22
Описание слайда:
:focus
input:focus {color: red}
<form>
<input type="text" value="Введите текст" size="30">
</form>
Слайд 23
Описание слайда:
: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>
Слайд 25
Описание слайда:
Кавычки
Псевдокласс 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>
Слайд 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
Описание слайда:
Задание:
Задать стиль для первой буквы ссылки – установить цвет
Задать стиль для первой строки абзаца – задать цвет фона
Выделенный текст для элемента списка увеличить в размере
Скачать презентацию на тему CSS. Группировка. Идентификаторы. Классы. Псевдоклассы и псевдоэлементы можно ниже:
