Границы в CSS: подробное рассмотрение

Параметр 'border'

Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
border-width	Задает свойства для четырех сторон границы
border-style
border-color

Примеры:

h1{ border: medium solid #FFFF00} h2{ border: dotted green}

Параметр 'border-bottom'

Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.

Наследование: нет.

Возможные значения:

Значение	Описание
border-bottom-width	Задает свойства для нижней стороны границы
border-style
border-color

Примеры:

span{ border-bottom: thick solid #800080} li{ border-bottom: dotted #800000}

Параметр 'border-bottom-color'

Данный параметр задает цвет нижней границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Color	Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

Примеры:

p{ border-bottom-color: rgb(20,200,250)} span{ border-bottom-color: blue}

Параметр 'border-bottom-style'

Этот параметр задает стиль нижней границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы

Пример:

p{ border-bottom-style: dotted}

Параметр 'border-bottom-width'

Данный параметр задает толщину нижней границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
thin	Определяет тонкую нижнюю границу
medium	Определяет нижнюю границу средней толщины
thick	Определяет толстую нижнюю границу
length	Позволяет определить толщину нижней границы

Примеры:

p{ border-bottom-width: 1px} p{ border-bottom-width: thick}

Параметр 'border-color'

Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.

Наследование: нет.

Возможные значения:

Значение	Описание
Color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)
Transparent	Граница является прозрачной

Примеры:

p {border-color: blue}все четыре стороны границы будут синие. p {border-color: blue yellow}верхняя и нижняя стороны границы будут синие, левая и правая стороны границы будут желтые. p {border-color: blue yellow green}верхняя сторона граница будет синей, левая и правая сторона границы будут желтые, нижняя сторона границы будет зеленая. p {border-color: blue yellow green red}верхняя сторона границы будет синей, правая сторона границы будет желтой, нижняя сторона границы будет зеленой, левая сторона границы будет красной.

Параметр 'border-left'

Данный параметр позволяет определить все свойства левой стороны границы в одном объявлении.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
border-left-width	Задает свойства левой стороны границы
border-style
border-color

Примеры:

p{ border-left: medium dashed green} p{ border-left: thin dotted #FF00FF}

Параметр 'border-left-color'

Данный параметр задает цвет левой стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
Color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

Примеры:

h1{ border-left-color: green} h2{ border-left-color: #00FF00}

Параметр 'border-left-style'

Данный параметр задает стиль левой стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы

Пример:

p{ border-left-style: dotted}

Параметр 'border-left-width'

Данный параметр задает толщину левой стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
thin	Определяет тонкую левую сторону границы
medium	Определяет левую сторону границы средней толщины
thick	Определяет толстую левую сторону границы
length	Позволяет определить толщину левой стороны границы

Примеры:

p{ border-left-width: 7px} p{ border-left-width: thick}

Параметр 'border-right'

Этот параметр используется для определения всех свойств правой стороны границы в одном объявлении.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
border-right-width	Задает свойства правой стороны границы
border-style
border-color

Примеры:

h1{ border-right: medium dotted #FFFF00} h2{ border-right: thin dashed green}

Параметр 'border-right-color'

Данный параметр задает цвет правой стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

Примеры:

p{ border-right-color: rgb(250,200,250)} p{ border-right-color: blue}

Параметр 'border-right-style'

Данный параметр задает стиль правой стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы

Пример:

p{ border-right-style: dashed}

Параметр 'border-right-width'

Данный параметр задает толщину правой стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
thin	Определяет тонкую правую сторону границы
medium	Определяет правую сторону границы средней толщины
thick	Определяет толстую правую сторону границы
length	Позволяет определить толщину правой стороны границы

Примеры:

h1{ border-right-width: 2cm} h2{ border-right-width: medium}

Параметр 'border-style'

Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы

Примеры:

p {border-style: dashed}все четыре стороны границы будут штрих-пунктирными. p {border-style: solid double}верхняя и нижняя стороны границы будут сплошными, левая и правая сторона граница будут двойными. p {border-style: solid double dotted}верхняя сторона границы будет сплошной, левая и правая сторона границы будут двойными, нижняя сторона границы будет пунктирной. p {border-style: dashed double dotted solid}верхняя сторона граница будет штрих-пунктирной, правая сторона границы будет двойной, нижняя сторона границы будет пунктирной, левая сторона границы будет сплошной.

Параметр 'border-top'

Данный параметр определяет все свойства верхней стороны границы в одном объявлении.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
border-top-width	Задает свойства верхней стороны границы
border-style
border-color

Примеры:

p{ border-top: thick dashed green} p{ border-top: dotted #FF0000}

Параметр 'border-top-color'

Этот параметр задает цвет верхней стороны границы элемента.

Наследование: нет.

Может принимать следующие значения:

Значение	Описание
color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)

Примеры:

h1{ border-top-color: blue} h2{ border-top-color: rgb(200,10,250)}

Параметр 'border-top-style'

Параметр задает стиль верхней стороны границы элемента.

Наследование: нет.

Возможные значения:

Значение	Описание
None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы

Примеры:

p{ border-top-style: dotted}

Параметр 'border-top-width'

Данный параметр задает толщину верхней стороны границы элемента.

Наследование: нет.

Возможные значения:

Значение	Описание
thin	Определяет тонкую верхнюю сторону границы
medium	Определяет верхнюю сторону границы средней толщины
thick	Определяет толстую верхнюю сторону границы
length	Позволяет определить толщину верхней стороны границы

Примеры:

p{ border-top-width: medium} p{ border-top-width: 1cm}

Параметр 'border-width'

Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.

Наследование: нет.

Возможные значения:

Значение	Описание
thin	Определяет тонкую границу
medium	Определяет границы средней толщины
thick	Определяет толстую границу
length	Позволяет определить толщину границ

Примеры:

p {border-width: thick}все четыре стороны границы будут толстыми. p {border-width: thick thin}верхняя и нижняя стороны границы будут толстыми, левая и правая сторона границы будут тонкими. p {border-width: medium thick thin}верхняя сторона границы будет иметь среднее значение, левая и правая стороны границы будут толстыми, нижняя сторона границы будет тонкой. p {border-width: thick thin thin medium}верхняя сторона границы будет толстой, правая сторона границы будет тонкой, нижняя сторона границы будет тонкой, левая сторона границы будет иметь среднее значение.

Лекция 7. Отступы в СSS

Отступы в CSS определяют пространство вокруг элементов.

Примеры

Этот пример показывает, как задать для текста левый отступ.

2. <html>3. <head>4. <style type="text/css">5. h1.lf {margin-left: 1cm}6. </style>7. </head>8. 9. <body>10. <h1>Заголовок h1 без отступов</h1>11. <h1 class="lf">Заголовок h1 с отступами</h1>12. </body>13. </html>

Этот пример показывает, как задать для текста правый отступ.

15. <html>16. <head>17. <style type="text/css">18. h2.rg {margin-right: 400px}19. </style>20. </head>21. 22. <body>23. <h2> Заголовок h2 без отступов </h2>24. <h2 class="rg"> Заголовок h2 с заданным правым отступом</h2>25. </body>26. </html>

Этот пример показывает, как задать для текста верхний отступ.

28. <html>29. <head>30. <style type="text/css">31. h1.tp {margin-top: 50px}32. </style>33. </head>34. 35. <body>36. <h1>Заголовок h1 без отступов </h1>37. <h1 class="tp"> Заголовок h1 с заданным верхним отступом</h1>38. </body></html>

Этот пример показывает, как задать нижний отступ текста.

40. <html>41. <head>42. <style type="text/css">43. h2.btm {margin-bottom: 1cm}44. </style>45. </head>46. 47. <body>48. <h2>Заголовок h2 без отступов</h2>49. <h2 class="btm">Заголовок h2 с заданным нижним отступом</h2>50. <h2>Заголовок h2 без отступов</h2>51. </body>52. </html>

Этот пример показывает, как задать параметры всех отступов в одном объявлении.

54. <html>55. <head>56. <style type="text/css">57. h1.all {margin: 1cm 2cm 1cm 2cm}58. </style>59. </head>60. 61. <body>62. <h1>Заголовок h1 без отступов</h1>63. <h1 class="all">Заголовок h1 с заданными отступами</h1>64. <h1>Заголовок h1 без отступов</h1>65. </body>66. </html>