Lecture
Опубликован: 30.10.2006 | Access: paid | Students: 0 / 0 | Rate: 4.35 / 4.14 | Длительность: 08:43:00
Themes: Интернет-технологии, Программирование
Specialities: Программист, Разработчик интернет-проектов
Lecture 6:
Границы в CSS
Annotation: Рассматриваются параметры границ в CSS и способы описания рамок вокруг элементов.
Keywords: css, 'inset', 'border-right-color', 'border-bottom-color', 'border-bottom-style', 'border-left', 'border-left-width', 'border-left-color', 'border-left-style', 'border-right-style', 'groove', 'outset'
Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.
- Пример в котором показано, как задать стиль для четырех сторон границы.
<html> <head> <style type="text/css"> pre.inset {border-style: inset} li.outset {border-style: outset} h1.dotted {border-style: dotted} h2.dashed {border-style: dashed} h3.solid {border-style: solid} h4.double {border-style: double} h5.groove {border-style: groove} h6.ridge {border-style: ridge} </style> </head> <body> <pre class="inset">рамка inset </pre> <ol> <li class="outset">рамка outset</li> <li class="outset">рамка outset</li> <li class="outset">рамка outset</li> </ol> <h1 class="dotted">рамка dotted</h1> <h2 class="dashed">рамка dashed</h2> <h3 class="solid">рамка solid</h3> <h4 class="double">рамка double</h4> <h5 class="groove">рамка groove </h5> <h6 class="ridge">рамка ridge</h6> </body> </html> - Пример в котором показано, как задать различные стили границы на каждой стороне элемента.
<html> <head> <style type="text/css"> h1.styleh1 {border-style: dashed ridge solid} h2.styleh2 {border-style: solid dashed} h3.styleh3 {border-style: dashed groove} h4.styleh4 {border-style: double solid dashed groove} </style> </head> <body> <h1 class="styleh1">заголовок заголовок заголовок</h1> <h2 class="styleh2"> заголовок заголовок заголовок </h2> <h3 class="styleh3"> заголовок заголовок заголовок </h3> <h4 class="styleh4"> заголовок заголовок заголовок </h4> </body> </html> - Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
<html> <head> <style type="text/css"> h1.styleh1 { border-style: dashed; border-color: green } h2.styleh2 { border-style: dotted; border-color: #ff00ff blue } h3.styleh3 { border-style: solid; border-color: red yellow rgb(12,200,30) } h4.styleh4 { border-style: dashed; border-color: green blue red yellow } </style> </head> <body> <h1 class="styleh1">одноцветная рамка</h1> <h2 class="styleh2">рамка из двух цветов</h2> <h3 class="styleh3">рамка из трех цветов</h3> <h4 class="styleh4">рамка из четырех цветов</h4> <pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает, если используется в одиночку. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre> </body> </html> - Пример, в котором показано, как задать толщину нижней стороны границы.
<html> <head> <style type="text/css"> h1 { border-style: dashed; border-bottom-width: 7px } </style> </head> <body> <h1>заголовок h1</h1> <pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает, если используется в одиночку. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre> </body> </html> - Пример, в котором показано, как задать толщину левой стороны границы.
<html> <head> <style type="text/css"> h2 { border-style: dotted; border-left-width: 7px } </style> </head> <body> <h2>Внимание</h2> <pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает, если используется в одиночку. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre> </body> </html>