-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Все на карте

 -Поиск по дневнику

Поиск сообщений в Net-man

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 20.04.2010
Записей: 814
Комментариев: 5985
Написано: 11575


CSS: Урок 14. CSS border | Границы элементов

Вторник, 21 Декабря 2010 г. 18:06 + в цитатник

CSS атрибуты и значения, определяющие границы

Рассмотрим все свойства элемента border:

<head>
<style type="text/css">
.punktir {
width: 450px;
height: 280px;
border-top: 3px dashed Blue;
border-right: 10px double Red;
border-bottom: 3px solid DarkBlue;
border-left: 5px dotted DarkOrange
}
</style>
</head>
<body>
<div class="punktir"> &nbsp; </div>
</body>

Результат: CSS границы элементов

Рассмотрим строчку border-right:10px double Red. Первое значение устанавливает толщину границы в 10 пиксел, double определяет двойную сплошную линию в качестве границы, Red – цвет.

Атрибут border соединяет в себе:

  • border-top
  • border-right
  • border-bottom
  • border-left

Запись border:1px solid #000000 равносильна:

  • border-top:1px solid #000000;
  • border-right:1px solid #000000;
  • border-bottom:1px solid #000000;
  • border-left:1px solid #000000

Строка border:1px solid #000000 может быть представлена таким образом:

  • border-width:1px;
  • border-style:solid;
  • border-color:#000000

Такой вариант менее рационален, так как требует больше времени на написание кода.

Еще примеры:

border-bottom: 1px solid #00cc00

 

border-bottom: 3px dotted DarkOrange

 

border-bottom: 3px dashed Blue

 

border-bottom: 7px double Red

 

border-bottom: 8px groove Red

 

border-bottom: 8px ridge Red

 

border-bottom: 8px inset Red

 

border-bottom: 8px outset Red

 

Заметьте, что в последних пяти примерах установлен цвет Red.

При border:none видимая граница элемента отсутствует.

ab-w.net
Рубрики:  Полезное
Уроки CSS
Метки:  

Процитировано 1 раз
Понравилось: 1 пользователю

Millio   обратиться по имени Среда, 22 Декабря 2010 г. 10:51 (ссылка)
Привет! Я зашла на сайт, что в источнике у тебя записан. Очень хороший! Начала html изучать и паралельно просматриваю те посты о CSS, у тебя. Много нужного нашла. Спасибо тебе!
Ответить С цитатой В цитатник
Перейти к дневнику

Среда, 22 Декабря 2010 г. 11:52ссылка
Millio, рад, что пригодилось)
осень_осень   обратиться по имени Приятного вечера, хорошего настроения) Среда, 22 Декабря 2010 г. 17:12 (ссылка)
Ох, ну, да, но я буду стараться)
Уютного общения)
Ответить С цитатой В цитатник
Перейти к дневнику

Среда, 22 Декабря 2010 г. 19:36ссылка
осень_осень, спасибо! Я думаю, всё у Вас получится)
Tiffany1   обратиться по имени Среда, 22 Декабря 2010 г. 17:28 (ссылка)
Привет, Серёжа! Спасибо за полезные посты и с приближающимися праздниками!!!!!!!!!!!!!!!!!!!!
 (550x344, 65Kb)
Ответить С цитатой В цитатник
Net-man   обратиться по имени Среда, 22 Декабря 2010 г. 19:40 (ссылка)
Tiffany1, спасибо, Аня! И тебя с Новым годом!:heart:
 (321x462, 32Kb)
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку