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

Границы в CSS

  1. Пример, в котором показано, как задать толщину правой стороны границы.
    <html>
    <head>
    <style type="text/css">
    h1 
    {
    border-style: dashed;
    border-right-width: 7px
    }
    </style>
    </head>
    
    <body>
    <h1>заголовок h1</h1>
    <pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если используется в одиночку.
    Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
    </body>
    
    </html>
  2. Пример, в котором показано, как задать толщину верхней стороны границы.
    <html>
    <head>
    <style type="text/css">
    h4
    {
    border-style: dotted;
    border-top-width: 7px
    }
    </style>
    </head>
    
    <body>
    <h4>заголовок h4</h4>
    <pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает, 
       если используется в одиночку.
    Сначала задайте границу с помощью  свойства <b>"border-style"</b>.</pre>
    </body>
    
    </html>
  3. Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    h1 
    {
    border-bottom: thick double blue
    }
    </style>
    </head>
    
    <body>
    <h1> Заголовок h1.</h1>
    </body>
    
    </html>
  4. Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    pre 
    {
    border-left: thin ridge #f0ffff
    }
    </style>
    </head>
    
    <body>
    <pre>текст текст текст текст текст текст текст</pre>
    </body>
    
    </html>
  5. Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    h4 
    {
    border-right: thick solid rgb(0,200,200)
    }
    </style>
    </head>
    
    <body>
    <h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4 
    Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
    </body>
    
    </html>
  6. Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении.
    <html>
    <head>
    <style type="text/css">
    pre
    {
    border-top: thin dashed yellow
    }
    </style>
    </head>
    
    <body>
    <pre>текст текст текст текст текст текст текст</pre>
    </body>
    
    </html>
  7. Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений.
    <html>
    <head>
    <style type="text/css">
    h1.styleh1 
    {
    border-style: dotted;
    border-width: 7px 12px
    }
    h2.styleh2 
    {
    border-style: dashed;
    border-width: 3px 6px 8px
    }
    h3.styleh3 
    {
    border-style: outset;
    border-width: 7px 
    }
    h4.styleh4 
    {
    border-style: inset;
    border-width: 3px 6px 8px thick
    }
    </style>
    </head>
    
    <body>
    <h1 class="styleh1">Заголовок h1</h1>
    <h2 class="styleh2">Заголовок h2</h2>
    <h3 class="styleh3">Заголовок h3</h3>
    <h4 class="styleh4">Заголовок h4</h4>
    <pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку. 
    Сначала задайте границы с помощью  свойства <b>"border-style"</b>.</pre>
    </body>
    
    </html>
  8. Пример, в котором показано, как задать свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
    <html>
    <head>
    <style type="text/css">
    h1 
    {
    border: thin dotted #ff00ff
    }
    </style>
    </head>
    
    <body>
    <h1>Заголовок h1</h1>
    </body>
    
    </html>
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

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