-Цитатник

uBlock Origin - Блокировка рекламы везде - (0)

Урок 2123: uBlock Origin - Блокировка рекламы везде P.S. Друзья Гугл заблокировал установку uBl...

экран монитора сдвинулся вправо/влево — что делать? - (0)

Урок 2110: экран монитора сдвинулся вправо/влево — что делать? Бывают ситуации, при которых экра...

как перенести корзину на панель задач Windows 10 - (0)

Урок 2091: как перенести корзину на панель задач Windows 10 В некоторых случаях пользователю мож...

что делать если отказала компьютерная мышь и как обойтись без неё - (0)

Урок 2065: что делать если отказала компьютерная мышь и как обойтись без неё Если у Вас внезапно...

компьютер не видит флешку — что делать? - (0)

Урок 2061: компьютер не видит флешку — что делать? В этой инструкции подробно о том, что делать,...

 -Рубрики

 -Приложения

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

 -Всегда под рукой

 RenderedImage (2).png

 RenderedImage (1).png

          RenderedImage.png      

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

Поиск сообщений в LoRaLaRa

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

 

 -Интересы

 -Сообщества

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 11.10.2009
Записей: 47584
Комментариев: 16254
Написано: 69124


Границы HTML: свойство border

Четверг, 19 Сентября 2024 г. 09:49 + в цитатник
Цитата сообщения БЕЛОЯР_2 Границы HTML: свойство border




Границы html задаем при помощи свойства border. Border задает границы элемента (рамочки, блока). Он может принимать следующие значения:


  1. по ширине (border-width) - thin (тонкая), medium (средняя), thick (толстая).

  2. по типу (border-style)

    • none - запрет рисования границы;

    • dotted - граница точками;

    • dashed - граница штрихами;

    • solid - сплошной линией;

    • double - двойной линией;

    • groove - трехмерная вдавленная;

    • ridge - трехмерная выпуклая;

    • inset - трехмерная ступенька вверх;

    • outset - трехмерная ступенька вниз.


  3. border-color определяет цвет рамки. Может принимать значение transparent, что означает невидимую рамку.

  4. border-top, border-bottom, border-left, border-right - задают расположение рамки.

Формула, которой необходимо воспользоваться для того, чтобы задать границу:

<# style="border-значения;border-width:значения:border-style:значения;border-color:значения"></#>,
где вместо слов "значения" подставляем параметры, задающие расположение, ширину, стиль и цвет рамки. они могут располагаться в произвольном порядке.

Вместо "#" подставляем атрибуты table, blockquote, span, fieldset, img, div или др.


рамка штрихами с тегом div растягивается во всю ширину экрана

Код: <div style="border-top;border-width:thin;border-style:dotted ;color:blue">
рамка штрихами с тегом div растягивается во всю ширину экрана</div>


обвести текст можно при помощи тега Span


Код:<span style="border-bottom;border-width:medium;border-style:dashed;border-color:red;">обвести текст можно при помощи тега Span</span>


С помощью тега fieldset и задания трехмерной вдавленной рамки получаем следующий вид


Код: <fieldset style="border-top;border-width:thick;border-style:groove;border-color:green">С помощью тега fieldset и задания трехмерной вдавленной рамки получаем следующий вид</fieldset>
Таким образом, можете и далее поэкспериментировать с различными рамочками.
И последнее: расскажу о том, как сделать рамочку с разноцветными сторонами. Пример:


ВАШ ТЕКСТ

Вот её код:
<table style="border-style: solid; border-width: thick; border-top-color: blue;
border-right-color: red; border-bottom-color: green; border-left-color: Yellow;"><tr> <td>ВАШ ТЕКСТ</td> </tr>
</table>
, где

  • border-top-color верхняя граница,
  • border-right-color правая,
  • border-bottom-color нижняя,
  • border-left-color левая.

 

Рубрики:  БЛОГИ И СТРАНИЧКИ/уроки и советы блогерам