Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Параметры рамки

Толщина рамки

CSS3 дает возможность веб-дизайнеру создавать рамку по границе элемента html-страницы. Для этих целей предназначены следующие атрибуты стиля:

Толщину рамки можно задавать либо абсолютным числовым значением, либо относительным, либо одним из предопределенных значений:

Атрибут стиля border-width указывает значения толщины сразу для всех сторон рамки:

border-width: <thickness 1>[<thickness 2>[<thickness 3>[<thickness 4>]]]
ПРИМЕР:

.class1 {border-width: 1px 1px 1px 1px} - первое значение задает толщину верхней линии; второе - правой линии; третье - нижней линии; четвертое - левой линии;
.class2 {border-width: 1px 1px 1px} - первое значение задает толщину верхней линии; второе - левой и правой линий; третье - нижней линии;
.class3 {border-width: 1px 1px} - первое значение задает толщину верхней и нижней линий; второе - левой и правой линий;
.class4 {border-width: 1px} - единственное значение задает толщину всех линий границ веб-элемента.

Цвет рамки

Цвет линии границы веб-элемента html-страницы задается атрибутами стиля:

Цвет рамки задается "явно", иначе она может быть не нарисована. Значение transparent задает "прозрачный" цвет рамки.

Атрибут стиля border-color задает цвет всех сторон рамки:

border-color: <color 1>[<color 2>[<color 3>[<color 4>]]]

Действие атрибута стиля border-color аналогично действию border-width.

ПРИМЕР:

H2	{
	border-bottom-width: 3px;
	border-bottom-color: yellow
	}
	
TD 	{
	border-width: medium;
	border-color: olive
	}

Вид рамки

Вид рамки задается атрибутами стиля:

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

Атрибут стиля border-style указывает вид линии для всех сторон рамки:

border-style: <style 1>[<style 2>[<style 3>[<style 4>]]]

Действие атрибута стиля border-style аналогично действию border-width и border-color.

ПРИМЕР:

H2	{
	border-bottom-width: 3px;
	border-bottom-color: yellow;
	border-bottom-style: dashed
	}
	
TD 	{
	border-width: medium;
	border-color: olive;
	border-style: dotted
	}

CSS3 позволяет веб-дизайнеру задавать сразу все параметры (толщину, вид, цвет) для левой, верхней, правой и нижней стороны рамки. Это делается при помощи атрибутов стиля: border-left; border-top; border-right; border-bottom.

Атрибут стиля border дает возможность задавать все параметры сразу для всех сторон рамки.

ПРИМЕР:

H2	{
	border-bottom: 3px dashed yellow 
	}
	
TD 	{
	border: medium dotted olive
	}

Веб-мастер должен помнить, что рамки, как и отступы, изменяют размеры элемента html-страницы.


TOP ↑