|
Web-программирование: CSS: границы (border) |
|
|
|
Автор megabax
|
|
09.01.2010 г. |
|
Урок 19. Управление шрифтами в CSS
New Page 1
Тема сегодняшнего урока: «CSS:
границы» (border).
Аналогично
полям, в CSS можно задать границы. Синтаксис задания
границы такой:
border-{top,left,right,bottom}:[стиль] [толщина]
[цвет]
Толщину линий
можно задать ключевыми словами:
Толщину линий можно задать и числом. Правда, в процентах толщину линий задать
нельзя.
Рассмотрим пример:
<HTML>
<HEAD>
<TITLE>Урок 19. CSS: границы</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
div {
border-top:solid thin black;
border-right:solid medium black;
border-bottom:solid thick black;
border-left:solid 15px black;
background-color:yellow;
color:red;
border-color:black;
}
-->
</STYLE>
<BODY>
<div>Некий текст</div>
</BODY>
</HTML> |
Данный пример
выведет вот такую страницу:
Некий текст
Теперь
перейдем к стилям линий:
-
none - нет линии.
-
solid
- сплошная линия.
-
dotted
- короткая пунктирная линия (состоит почти из точек).
-
dashed
- обычная пунктирная линия.
-
double
- двойная сплошная линия.
-
groove
- "вдавленная" линия.
-
ridge
- "выпуклая" линия.
-
inset
- весь блок выглядит как бы "вдавленный" как будь-то кнопка нажата.
-
outset
- противоположно inset - как будь-то кнопка отпущена.
Рассмотрим
еще один пример:
<HTML>
<HEAD>
<TITLE>Урок 19. CSS: границы</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
#div1 {
border-top:none thin black;
border-right:solid thin black;
border-bottom:dotted thin black;
border-left:dashed thin black;
background-color:yellow;
color:red;
border-color:black;
}
#div2 {
border-top:double medium black;
border-right:double medium black;
border-bottom:double medium black;
border-left:double medium black;
background-color:yellow;
color:red;
border-color:black;
}
-->
</STYLE>
<BODY>
<div id="div1">Некий текст<br>
Некий текст
</div>
<br><br>
<div id="div2">Некий текст<br>
Некий текст
</div>
</BODY>
</HTML> |
Вот так будет
выглядеть этот пример:
Некий текст
Некий текст
Некий текст
Некий текст
|
