-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCSS-5.htm
More file actions
111 lines (102 loc) · 7.22 KB
/
CSS-5.htm
File metadata and controls
111 lines (102 loc) · 7.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body leftmargin=0 topmargin=0 marginheight="0" marginwidth="0" bgcolor="#ffffff">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="50%" background="images/bg.png"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
<td valign="bottom" background="images/bg_left.png"><img src="images/bg_right.gif" alt="" width="17" height="0" border="0"></td>
<td valign="top">
<table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="29" background="images/fon06.gif">
</div>
</td>
</tr>
<tr>
<td><img src="images/main05.png" width="950" height="160"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="950" background="images/fon_top.gif">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" background="images/fon_top.gif" width="100%">
<tr align="center">
<td><p class="menu01"><a href="index.htm">ГЛАВНАЯ</a></p></td>
<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
<td><p class="menu01"><a href="HTML.htm">HTML</a></p></td>
<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
<td><p class="menu01"><a href="CSS.htm">CSS</a></p></td>
<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
<td><p class="menu01"><a href="IMG.htm">Картинки</a></p></td>
<td><img src="images/e01.gif" width="2" height="20" alt="" border="0"></td>
<td><p class="menu01"><a href="Dowland.htm">DOWNLOAD</a></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tr valign="top">
<td background="images/fon02.gif" width="230">
<!-- LEFT -->
<table border="0" cellpadding="0" cellspacing="0" width="230" height="46" background="images/fon01.gif">
<tr>
<td><p class="title"><img src="images/e03.gif" width="14" height="16" alt="" border="0" align="absmiddle"> МЕНЮ CSS</p></td>
</tr>
</table>
<p class="px5">
<div align="center"><img src="images/hr01.gif" width="227" height="2" alt="" border="0"></div>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-1.htm">Таблица связанных стилей</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-2.htm">Таблица глобальных стилей</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-3.htm">Классы</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-4.htm">Контекстные селекторы</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-5.htm">Соседние селекторы</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-6.htm">Дочерние селекторы</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-7.htm">Группирование</a></p>
<p class="right"><img src="images/dot_w.gif" width="5" height="5" alt="" border="0"> <a href="CSS-8.htm">Правила создания стиля</a></p>
<div align="center"><img src="images/hr01.gif" width="227" height="2" alt="" border="0"></div>
<br>
</td>
<td width="720">
<!-- main -->
<table border="0" cellpadding="0" cellspacing="0" width="720" height="45" background="">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="45" background="images/fon03.gif">
<tr>
<td><p class="title" style="margin-top: 11px;"> Соседние селекторы</p></td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" align="center" width="100%">
<tr align="center">
</tr>
</table>
<p>Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.</p>
<div align="center"><img src="images/css-2.8.png"></div>
<p>Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>.
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами.</p>
<p><b>Пример 2.9. Использование соседних селекторов</b></p>
<div align="center"><img src="images/css-2.9.png"></div>
<p>В данном примере происходит изменение цвета текста для содержимого контейнера <I>, когда он располагается сразу после контейнера <B>. В первом абзаце такая ситуация реализована, поэтому слово «consectetuer» в браузере отображается красным цветом. Во втором абзаце, хотя и присутствует тег <I>, но по соседству никакого тега <B> нет, так что стиль к этому контейнеру не применяется.
Разберем более практичный пример. Часто возникает необходимость в текст статьи включать различные сноски и примечания. Обычно для этой цели создают новый стилевой класс и применяют его к абзацу, таким способом можно легко изменить вид текста. Но мы пойдем другим путем и воспользуемся соседними селекторами. Для выделения замечаний создадим новый класс, назовем его sic, и станем применять его к тегу <H2>. Первый абзац после такого заголовка выделяется цветом фона и отступом . Вид остальных абзацев останется неизменным.</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="950" height="47" background="images/fon04.gif">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="90%" background="" align="center">
<tr>
<td><p>by LEV13 ©2010</p></td>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<td valign="bottom" background="images/bg_right.png"><img src="images/bg_right.png" alt="" width="17" height="16" border="0"></td>
<td width="50%" background="images/bg.png"><img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</body>
</html>