Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 6:

Границы в CSS

Аннотация: Рассматриваются параметры границ в CSS и способы описания рамок вокруг элементов.

Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.

  1. Пример в котором показано, как задать стиль для четырех сторон границы.
    <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>
  2. Пример в котором показано, как задать различные стили границы на каждой стороне элемента.
    <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>
  3. Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
    <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>
  4. Пример, в котором показано, как задать толщину нижней стороны границы.
    <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>
  5. Пример, в котором показано, как задать толщину левой стороны границы.
    <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>
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия