Similar presentations:
leqcia 8
1.
<html><head>
<style type="text/css">
caption {caption-side:bottom;}
</style></head><body>
<table border="1">
<caption>Таблица 1.1 Книги и авторы</caption>
<tr><th>Книга</th><th>Автор</th><th>Категория</th></tr>
<tr><td>Приключения Тома Сойера</td><td>Марк Твен</td><td>Художественная</td></tr>
<tr class="alt"><td>Гордость и предубеждение</td><td>Джейн Остен</td>
<td>Художественная</td></tr>
<tr><td>Происхождение видов</td><td>Чарльз Дарвин</td><td>Научная</td></tr>
<tr class="alt"><td>Лавка древностей</td><td>Чарльз Диккенс</td>
<td>Художественная</td></tr><tr><td>Ромео и Джульетта</td><td>Вильям Шекспир</td>
<td>Пьеса</td></tr>
<tr class="alt"><td>Вий</td><td>Максим Гоголь</td><td>Мистика</td></tr><tr>
<td>Кинжал челлини</td>
<td>Джеймс Х. Чейз</td>
<td>Детектив</td>
</tr>
</table>
<p><b>Замечание:</b> IE8 поддерживает свойство caption-side
только если указан тип документа (!DOCTYPE).</p>
</body>
</html>
1
2.
23.
<html><head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1.0em;
border:1px solid #005efe;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.2em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#90b0dd;
color:#fff;}
3
4.
#customers tr.alt td{
color:#000;
background-color:#EAF2D3;
}
</style></head><body><table id="customers">
<tr><th>Книга</th><th>Автор</th><th>Категория</th></tr>
<tr><td>Приключения Тома Сойера</td><td>Марк Твен</td>
<td>Художественная</td></tr>
<tr class="alt"><td>Гордость и предубеждение</td><td>Джейн Остен</td>
<td>Художественная</td></tr>
<tr><td>Происхождение видов</td><td>Чарльз Дарвин</td><td>Научная</td>
</tr>
<tr class="alt"><td>Лавка древностей</td><td>Чарльз Диккенс</td>
<td>Художественная</td></tr>
<tr><td>Ромео и Джульетта</td><td>Вильям Шекспир</td><td>Пьеса</td>
</tr><tr class="alt"><td>Вий</td><td>Максим Гоголь</td><td>Мистика</td>
</tr>
<tr><td>Кинжал челлини</td><td>Джеймс Х. Чейз</td><td>Детектив</td>
</tr>
</table>
</body>
</html>
4
5.
56.
<html><head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="250px.gif" width="218" height="48" /><br /><br />
<div class="ex">Линия выше имеет ширину 250px.<br />
Общая ширина этого элемента также составляет 250px.</div>
<p><b>Важно:</b> Этот пример не будет отображаться корректно в
браузере IE8 и более
ранних версиях!<br />
Однако, мы решим эту проблему в следующем примере.</p>
</body>
</html>
6
7.
78.
<html><head>
<style type="text/css">
p.one
{border-style:solid;border-width:5px;
}
p.two
{border-style:solid;border-width:medium;
}
p.three
{border-style:solid;border-width:1px;
}</style></head><body>
<p class="one">Некоторый текст.</p>
<p class="two">Некоторый текст.</p>
<p class="three">Некоторый текст.</p>
<p><b>Замечание:</b> Свойство "border-width" не работает, если
используется в одиночку. Используйте сначала свойство "border-style", чтобы
установить границы.</p>
</body>
</html>
8
9.
910.
<html>9.11<head>
<style type="text/css">
p
{
border-style:solid;
border-top-width:15px;
}
</style>
</head>
<body>
<p><b>Замечание:</b> Свойство
"border-top-width" не работает само по
себе.
Используйте свойство "border-style",
чтобы сначала установить границы.
</p>
</body>
</html>
10
11.
<html>9.21<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-width:15px;
}
</style>
</head>
<body>
<p><b>Замечание:</b> Свойство
"border-bottom-width" не работает само
по себе.
Используйте свойство "border-style",
чтобы сначала установить границы.
</body>
</html>
11
12.
<html><head>
<style type="text/css">
p
{
border-style:solid;
border-left-width:15px;
}
</style>
</head>
<body>
<p><b>Замечание:</b> Свойство
"border-left-width" не работает, если
используется в одиночку. Укажите
сначала свойство "border-style", чтобы
добавить границы.</p>
</body>
</html>
12
13.
<html><head>
<style type="text/css">
p
{
border-style:solid;
border-right-width:15px;
}
</style>
</head>
<body>
<p><b>Замечание:</b> Свойство
"border-right-width" не работает само по
себе.
Используйте свойство "border-style",
чтобы сначала установить границы.
</body>
</html>
13
14.
<html><p class="ridge">Хребтообразная
<head>
граница.</p>
<style type="text/css">
<p class="inset">Вдавленная
p.none {border-style:none;}
граница.</p>
p.dotted {border-style:dotted;}
<p class="outset">Выпуклая граница.</p>
p.dashed {border-style:dashed;}
<p class="hidden">Спрятанная
p.solid {border-style:solid;}
граница.</p>
p.double {border-style:double;}
</body>
p.groove {border-style:groove;}
</html>
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">Нет границы.</p>
<p class="dotted">Граница из точек.</p>
<p class="dashed">Пунктирная
граница.</p>
<p class="solid">Сплошная граница.</p>
<p class="double">Двойная граница.</p>
<p class="groove">Рельефная
14
граница.</p>
15.
1516.
<html>9.12<head>
<style type="text/css">
p {border-style:solid;}
p.none {border-top-style:none;}
p.dotted {border-top-style:dotted;}
p.dashed {border-top-style:dashed;}
p.solid {border-top-style:solid;}
p.double {border-top-style:double;}
p.groove {border-top-style:groove;}
p.ridge {border-top-style:ridge;}
p.inset {border-top-style:inset;}
p.outset {border-top-style:outset;}</style></head>
<body>
<p class="none">Нет верхней границы.</p>
<p class="dotted">Точечная верхняя граница.</p>
<p class="dashed">Пунктирная верхняя граница.</p>
<p class="solid">Сплошная верхняя граница.</p>
<p class="double">Двойная верхняя граница.</p>
<p class="groove">Объемная верхняя граница.</p>
<p class="ridge">Заостренная верхняя граница.</p>
<p class="inset">Вдавленная верхняя граница.</p>
<p class="outset">Выпуклая верхняя граница.</p>
</body></html>
16
17.
1718.
<html><head><style type="text/css"> 9.22p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style></head><body>
<p class="none">Нет нижней границы.</p>
<p class="dotted">Нижняя граница из точек.</p>
<p class="dashed">Пунктирная нижняя граница.</p>
<p class="solid">Сплошная нижняя граница.</p>
<p class="double">Двойная нижняя граница.</p>
<p class="groove">Рельефная нижняя граница.</p>
<p class="ridge">Хребтообразная нижняя граница.</p>
<p class="inset">Вдавленная нижняя граница.</p>
<p class="outset">Выпуклая нижняя граница.</p>
</body>
</html>
18
19.
1920.
<html><head>
<style type="text/css">
p.one{border-style:solid;border-color:#0000ff;}
p.two{border-style:solid;border-color:#ff0000 #0000ff;}
p.three{border-style:solid;border-color:#ff0000 #00ff00 #0000ff;}
p.four{border-style:solid;border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);}
</style></head><body>
<p class="one">Одноцветная граница!</p>
<p class="two">Двухцветная граница!</p>
<p class="three">Трехцветная граница!</p>
<p class="four">Четырехцветная граница!</p>
<p><b>Замечание:</b> Свойство "border-color" не рабоает, если используется
в одиночку. Укажите сначала свойство "border-style",
чтобы установить границы.</p>
</body>
</html>
Ff0000 - წითელი
0000ff - ლურჯი
00ff00 - მწვანე
rgb(250,0,255) - იასამნისფერი
20
21.
2122.
<html>9.13<head>
<style type="text/css">
p
{
border-style:solid;
border-top-color:#ff0000;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
22
23.
<html>9.22<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:#ff0000;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
23
24.
<html><head>
<style type="text/css">
p
{
border-style:solid;
border-left-color:#ff0000;
}
</style>
</head>
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-right-color:#ff0000;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
FF0000 - red
24
25.
<html><head>
<style type="text/css">
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
25
26.
<html><head><style type="text/css">p.one {border-style:dotted solid dashed double;}
p.two {border-style:dotted solid dashed;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}
</style></head><body>
<p class="one">Это некоторый текст в параграфе.</p>
<p class="two">Это некоторый текст в параграфе.</p>
<p class="three">Это некоторый текст в параграфе.</p>
<p class="four">Это некоторый текст в параграфе.</p>
</body></html>
26
27.
<html>9.1<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom:thick dotted #ff0000;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
27
28.
<html>9.23<head>
<style type="text/css">
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
28
29.
<html><head>
<style type="text/css">
p
{
border-style:solid;
border-left:thick double #ff0000;
}
</style>
</head>
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-right:thick double #ff0000;
}
</style>
</head>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
<body>
<p>Это некоторый текст в
параграфе.</p>
</body>
</html>
FF0000 - red
29