Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Стиль линии рамки






С помощью атрибутов border-left-style (левая линия), border-right-style (правая линия), border-top-style (верхняя линия) и border-bottom-style (нижняя линия) можно задать тип линии рамки. Могут принимать следующие значения:

  • none — линия не отображается;
  • solid — линия отображается сплошной линией;
  • dotted — пунктирная линия;
  • dashed — штриховая линия;
  • double — линия отображается в виде двойной линии;
  • groove — вдавленная рельефная линия;
  • ridge — выпуклая рельефная линия;
  • inset — весь блок элемента отображается, как будто он вдавлен в лист;
  • outset — весь блок элемента отображается, как будто выдавлен из листа.

В качестве примера укажем стиль рамки для разных элементов страницы.

< html>
< head>
< meta http-equiv=" Content-Type" content=" text/html; charset=UTF-8" >
< title> Тип рамки< /title>
< style type=" text/css" >
table { border-left-style: dashed; border-right-style: dotted; border-top-style: solid; border-bottom-style: groove }
td { border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none; text-align: center }
caption { border-top-style: solid }
p { border-left-style: dotted; border-right-style: dotted; border-top-style: dotted; border-bottom-style: dotted }
< /style>
< /head>

< body>
< table width=" 300" align=" center" >
< caption> Заголовок таблицы < /caption>
< tr>
< td> 1< /td>
< td> 2< /td>
< /tr>
< tr>
< td> 3< /td>
< td> 4< /td>
< /tr>
< /table>
< p> Текст в пунктирной рамке< /p>
< /body>
< /html>

В окне веб-браузера это будет выглядеть ТАК.

Этот пример показывает, что указать тип рамки можно не только для границ таблицы, но и для заголовка таблицы, и даже для абзацев.

Эти атрибуты могут быть объединены в одном атрибуте border-style:

border-style: < top> < right> < bottom> < left>

Если все значения совпадают, можно указать это значение один раз:

table { border-style: dotted }






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.