Свойство border и color

Свойство border и color

четыре значения: соответственно толщина верхней, правой, нижней и левой
сторон рамки.
border-color: [цвет] | transparent

Указывает цвет рамки.

Может принимать значение transparent для задания
невидимой, но имеющей толщину, границы.

Свойство border-color определяет
цвет четырех сторон рамки и может иметь от одного до четырех значений,
которые устанавливают цвета сторон рамки аналогично вышеописанному для
толщины рамки.

Если не задано ни одного значения цвета, по умолчанию
присваивается значение свойства color самого элемента.
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Определяет стиль рисования рамки.

Возможны следующие варианты:
none – рамка отсутствует;
hidden – тоже, что и none, но при использовании в таблицах интерпретируется

особым образом;
dotted – рамка из точек;
dashed – пунктирная рамка;
solid – непрерывная линия;
double – рамка из двух линий.

Сумма толщины каждой линии и промежуток
между ними равняется значению border-width;

groove – рамка выглядит так, как будто она вырезана в фоне;
ridge – эффект, противоположный groove – рамка выпуклая;

inset – вне таблиц создает эффект вдавленности всей прямоугольной области,
ограниченной рамкой;

outset – эффект, противоположный inset – выпуклость прямоугольной области,
ограниченной рамкой.

Следует отметить, что не все эти стили реализованы в ведущих браузерах.

Стили
dotted и dashed реализованы только в браузере Opera.

Реализация последних
четырех стилей зависит от конкретного браузера.

Следовательно при их
использовании необходимо все проверять.

Большое значение в этом случае имеют
параметры цвета границы, цвета фона и толщины рамки.

Пример:
h1 {border-width: thick; border-color: navy; border-style: outset}


Свойство описывающие поля и отступы

Методика форматирования Web-страниц и размещения на них содержимого в
отведенном для этого пространстве описывается в CSS в виде пространственной модели

(Box Formatted Model).

Согласно этой модели, пространство, в терминологии создателей

CSS – бокс (box), в котором размещено содержимое или часть содержимого Webстраницы – тексты,

изображения и т.д. – можно представить в виде объекта,
обладающего набором специфических характеристик.

Необходимо подчеркнуть, что
боксом считается не страница или ячейка таблицы, а лишь пространство, отведенное для

содержимого или определенной его части.

Формально каждый бокс имеет ядро,
представляющее собой содержательную часть страницы или ячейки таблицы, и набор
окружающих ядро элементов, характеристики которых определяют внешний вид бокса.

Под этими элементами понимаются поля (margin), отступы (padding), рамки (border) и т. д.

Свойства полей margin-top, margin-right, margin-bottom, margin-left устанавливают
границу элемента.

Поле – это расстояние между краями страницы или ячейки таблицы и
рамкой, если она имеется.

Обобщающее свойство margin устанавливает поле для всех
четырех сторон, в то время как остальные устанавливают поле только для
соответствующей стороны.

Свойства отступа padding-top, padding-right, padding-bottom, padding-left позволяют
регулировать величину отступа между содержимым и рамкой, если таковая имеется.

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

Обобщающее
свойство padding устанавливает отступ для всех четырех сторон, в то время как
остальные устанавливают отступ лишь для соответствующей стороны.

Кроме регулирования параметров окружения содержимого, имеется возможность в
явном виде отводить площадь для того или иного содержимого.

Для этого указываются
размеры прямоугольника – width (ширина) и height (высота) – в который должно

«вписаться» содержимое.
margin-top: [длина] | [проценты] | auto

Определяет верхнее поле элемента. По умолчанию – 0.
margin-right: [длина] | [проценты] | auto

Задает правое поле элемента. По умолчанию – 0.
margin-bottom: [длина] | [проценты] | auto

Определяет нижнее поле элемента. По умолчанию – 0.
margin-left: [длина] | [проценты] | auto

Устанавливает левое поле элемента. По умолчанию – 0.
margin: [длина] | [проценты] | auto

Обобщающее свойство margin используется для одновременной установки
свойств верхнего, правого, нижнего и левого полей в одном месте таблицы
стилей.

При явном указании четырех значений длины они соответственно
применяются к верхней, правой, нижней и левой сторонам.

Если явно указано
одно значение, оно применяется ко всем сторонам, если два или три значения, то

отсутствующие значения берутся по значению противоположной стороны.
padding-top: [длина] | [проценты]

Определяет величину верхнего отступа элемента.

По умолчанию – 0. Процентное
выражение – по отношению к ширине родительских элементов.

Отрицательные
значения для отступа не допускаются.
padding-right: [длина] | [проценты]

Задает величину правого отступа элемента. По умолчанию – 0.

padding-bottom: [длина] | [проценты]

Указывает величину нижнего отступа элемента. По умолчанию – 0.
padding-left: [длина] | [проценты]

Устанавливает величину левого отступа элемента. По умолчанию – 0.
padding: [длина] | [проценты]

Свойство padding является обобщающим для установки свойств верхнего,
правого, нижнего и левого отступа в одном правиле таблицы стилей.

Если явно
указаны четыре значения, они применяются соответственно к верхнему, правому,
нижнему и левому отступу.

Если явно указано только одно значение, оно
применяется ко всем сторонам, если два или три, то отсутствующие значения
принимаются по значениям противоположной стороны.
width: [ширина] | [проценты] | auto

Устанавливает ширину элемента.

По умолчанию – auto.

Это свойство может быть
использовано для текстовых элементов, но чаще – для замещаемых, таких, как
изображения.

Если необходимо, ширина изображения может быть изменена
масштабированием.

При этом отношение ширины изображения к высоте будет
сохранено, если для свойства указано значение auto. Отрицательные значения для
данного свойства не допускаются.
height: [высота] | auto

Определяет высоту поля.

Это свойство может быть использовано для текстовых
элементов, но чаще – для замещаемых, таких, как изображения.

Если необходимо,
высота изображения может быть изменена масштабированием.

При этом отношение
ширины изображения к высоте будет сохранено, если для свойства указано значение
auto.

Отрицательные значения для данного свойства не допускаются.

Пример:
h1 {margin-top: 2em; padding-top: 0.3em; width: 50%; height: 70px}
body {margin: 2em; padding: 1em 2em}


Свойство описывающие объекты

Свойства float (плавающий) и clear (очистка) позволяют изменять позицию элементов.
float: left | right | none

Позволяет изменять положение объекта.

По умолчанию – none.

При установке
значения none (нет) элемент отображается там, где он присутствует в тексте.

При значении left (влево) и right (вправо) объект смещается соответственно влево или
вправо, а перенос текста производится по правой или левой его стороне.
сlear: none | left | right | both

Это свойство устанавливается, если объект допускает размещение на своих
сторонах плавающих элементов.

Если точнее, то значение данного свойства
указывает стороны, где плавающие элементы не ставятся.

Если для свойства
элемента сlear указать значение left, то для такого элемента все плавающие

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

Если указано значение none, то
плавающие элементы устанавливаются на всех сторонах.

По умолчанию – none.
Пример:
img {float: left}
h1 {clear: left}


Свойство описывающие таблицы

Для всех элементов таблицы применяются описанные выше свойства, определяющие
шрифт, текст, цвет, фон, поля, отступы, рамки и т.д.

Но кроме того, имеется ряд
специфических свойств, относящихся только к таблицам.
caption-side: top | bottom | left | right

Определяет положение табличного заголовка относительно самой таблицы:
вверху (top) – по умолчанию, внизу (bottom), слева (left), справа (right).
table-layout: auto | fixed

Определяет алгоритм, используемый для отображения ячеек, строк и столбцов
таблицы: fixed – алгоритм фиксированной раскладки таблицы; auto – алгоритм
автоматической раскладки таблицы.

При использовании алгоритма
фиксированной раскладки (fixed), наиболее быстрого, горизонтальная раскладка

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

По умолчанию auto.
border-collapse: collapse | separate

Позволяет определить модель рамки таблицы.

Значение separate устанавливает
для каждой ячейки собственную рамку.

Значение collapse задает общую рамку
для всех ячеек таблицы.

По умолчанию – collapse.
border-spacing: [длина]

Определяет расстояние между рамками смежных ячеек в том случае, когда для
свойства border-collapse установлено значение separate.

Значение включает два
числа. Первое значение устанавливает горизонтальный интервал, второе –
вертикальный.

Если установлено одно значение, то оно применяется к обоим
интервалам.

Данные значения не могут быть отрицательными.
empty-cells: show | hide

Определяет, прорисовываются ли рамки вокруг пустых ячеек.

Если установлено
значение show, рамки вокруг пустых ячеек отображаются.

При установленном
значении hide рамки вокруг пустых ячеек не показываются.

Пример:
caption {caption-side: bottom; width: auto; text-align: left}
table {border: outset 10pt; border-collapse: separate; borderspacing: 15pt; empty-cells: show}


Свойство описывающие списки

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upperroman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew |

armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakanairoha | none

Назначает стандартные типы маркеров элементам списка:

disc – маркер в виде заполненного круга;
circle – маркер в виде окружности;
square – маркер в виде квадрата;
decimal – десятичная нумерация, начинающаяся с 1;
decimal-leading-zero – десятичная нумерация с предшествующим нулем: 01, 02,
03, ..., 98, 99 и т.д.;

lower-roman – римские цифры в нижнем регистре: i, ii, iii, iv, v и т.д.;
upper-roman – римские цифры в верхнем регистре: I, II, III, IV, V, и т.д.;
lower-latin или lower-alpha – буквы из набора символов ASCII в нижнем регистре:
a, b, c, ... z;

upper-latin или upper-alpha – буквы из набора символов ASCII в верхнем
регистре: A, B, C, ... Z;
lower-greek – символы греческого алфавита;
hebrew – традиционная нумерация иврита;
georgian – традиционная грузинская нумерация;
armenian – традиционная армянская нумерация.
list-style-image: url ([url]) | none

Задает изображение, которое будет использоваться в качестве маркера списка.

По умолчанию none.
list-style-position: inside | outside

Определяется положение содержимого пунктов списка в пространстве,
отведенном для всего списка: outside – маркеры, помечающие список, находятся

вне пространства, отведенного под сам список (по умолчанию), inside – маркеры,
помечающие список, находятся внутри пространства, отведенного под сам
список.

list-style: [list-style-type] || [list-style-position] || [list-style-image]
Обобщающее свойство для определения list-style-type, list-style-position и liststyle-image в одном месте таблицы стилей.

Пример:
ul {list-style-image: url («bullit.gif»); list-style-position:
inside}
ol {list-style: upper-roman inside}

Понравилась статья? Поделиться с друзьями:
Блог  Измайлова Павла
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: