Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow Уроки CSS arrow Web-программирование: CSS: границы (border)
18.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
Web-программирование: CSS: границы (border) Печать E-mail
Автор megabax   
09.01.2010 г.
Урок 19. Управление шрифтами в CSS New Page 1

Тема сегодняшнего урока: «CSS: границы» (border).

 

Аналогично полям, в CSS можно задать границы. Синтаксис задания границы такой:

 

border-{top,left,right,bottom}:[стиль] [толщина] [цвет]

 

Толщину линий можно задать ключевыми словами:

  • Thin - тонкая.

  • Medium - линия средней толщины.

  • Thick - толстая граница.

Толщину линий можно задать и числом. Правда, в процентах толщину линий задать нельзя.

 

Рассмотрим пример:

 

<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>

 

Вот так будет выглядеть этот пример:

 

Некий текст
Некий текст

 

Некий текст
Некий текст

 

 

 
« След.   Пред. »
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги