Основы работы с CSS


2 - часть 2


<body> <h4>заголовок h4</h4> <pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает, если используется в одиночку. Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre> </body>

</html>

  • Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении. <html> <head> <style type="text/css"> h1 { border-bottom: thick double blue } </style> </head>

    <body> <h1> Заголовок h1.</h1> </body>

    </html>

  • Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении. <html> <head> <style type="text/css"> pre { border-left: thin ridge #f0ffff } </style> </head>

    <body> <pre>текст текст текст текст текст текст текст</pre> </body>

    </html>

  • Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении. <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>

  • Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении. <html> <head> <style type="text/css"> pre { border-top: thin dashed yellow } </style> </head>

    <body> <pre>текст текст текст текст текст текст текст</pre> </body>

    </html>

  • Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений. <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>

  • Пример, в котором показано, как задать задания свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений. <html> <head> <style type="text/css"> h1 { border: thin dotted #ff00ff } </style> </head>

    <body> <h1>Заголовок h1</h1> </body>

    </html>




  • Начало  Назад  Вперед



    Книжный магазин