Ajax Loader
×
HTML
<div class="feedback">
1
<div class="feedback">
2
  <img src="http://htmlbook.ru/files/feedback.jpg">
3
  <b>если у вас возникли вопросы по этому коду, звонити по телефону 937-99-92</b>
4
</div>
5
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
6
 
7
Для обозначения универсального селектора применяется символ звёздочки (*) и в общем случае синтаксис будет следующий.
8
 
9
* { Описание правил стиля }
10
 
11
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
12
 
13
В примере 14.1 показано одно из возможных приложений универсального селектора — выбор шрифта и размера текста для всех элементов документа.
14
 
15
Пример 14.1. Использование универсального селектора
16
HTML5CSS 2.1IECrOpSaFx
17
<!DOCTYPE HTML> 
18
<html> 
19
 <head> 
20
  <meta charset="utf-8"> 
21
  <title>Универсальный селектор</title> 
22
  <style> 
23
   * { 
24
    font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ 
25
    font-size: 96%; /* Размер текста */ 
26
   } 
27
  </style> 
28
 </head> 
29
 <body> 
30
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
31
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
32
 </body> 
33
</html>
34
Посмотреть пример
35
Посмотреть пример
36
Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.
37
 
38
Вопросы для проверки
39
1. Какой стиль установит красный цвет текста в абзаце?
40
 
41
* HTML P { color: red; }
42
HTML * P { color: red; }
43
P * { color: red; }
44
BODY * P { color: red; }
45
BODY P * { color: red; }
46
2. Что означает следующая запись в стилях?
47
 
48
* DIV * { background: green; }
49
 
50
Установить фоновый цвет для всех элементов веб-страницы.
51
Задать цвет для всех текстовых элементов документа.
52
Установить фоновый цвет для всех элементов внутри контейнера <DIV>.
53
Установить фоновый цвет только для тегов <DIV>, вложенных в другие контейнеры.
54
Зеленый цвет фона для всех тегов <DIV> в коде.
55
3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?
56
 
57
<div>
58
 <h1><em>Lorem</em> ipsum</h1>
59
 <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit.</p>
60
 <ul>
61
  <li><em>Ut</em> wisis enim ad</li> 
62
  <li>Quis <em><span>nostrud</span></em> exerci</li>
63
  <li>Tution ullamcorper suscipit</li>
64
 </ul>
65
 <em>Nisl</em> ut aliquip exea commodo consequat.
66
</div>
67
Lorem
68
consectetuer
69
Ut
70
nostrud
71
Nisl
72
Ответы
73
1. HTML * P { color: red; }
74
 
75
2. Установить фоновый цвет для всех элементов внутри контейнера <DIV>.
76
 
77
3. nostrud
 
CSS
body{width:300px;
1
body{width:300px;
2
margin:20px}
3
.feedback{background:#333;
4
  color:#fff;
5
  padding:20px;
6
  font-size:0.8em;
7
  line-height:2em;
8
  text-align:center;
9
  width:300px;
10
height:100px;
11
position:fixed;
12
top:60%;
13
  left: -340px;
14
 border-right: 20px solid #fc0;
15
border-radius:0px 10px 10px 0px;
16
  -webkit-transition: left 1s;}
17
.feedback img{float:left;
18
  margin-right:10px}
19
  .feedback:after{content:"Обратная связь";
20
  color:#000;
21
  position:absolute;
22
  right:-55px;
23
  top:60px;
24
  transform: rotate (90deg); 
25
  -webkit-transform: rotate(90deg)}
26
.feedback:hover{left: 0}
27
  
 

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

CSSDeck G+