Свойства цвета текста
При помощи CSS-свойства color задается цвет текста. При этом желательно соблюдать правила изложенные в 4.2.5.
Свойства границ элемента
В этом разделе мы рассмотрим свойства отображения границ элемента: border, border-color, border-style, border-width,border-top,border-bottom,border-left,border-right.
Цвет границы элемента задается при помощи свойства border-color (см. 4.2.5). Можно также использовать значение transparent, однако оно не поддерживается некоторыми браузерами.
Свойство border-style задает стиль отображения границы. Его допустимые значения показаны на рисунке 5-1.
Рисунок 5‑1. Допустимые значения для border-style.
Толщина границы определяется свойством border-width (см. также 5.4). О том, как влияет ширина границы на ширину отображаемого элемента, а также другие особенности модели отображения блочных элементов смотрите в разделе 6.2.2.
Сокращенная запись свойств границы задается при помощи CSS-свойства border:
Сокращенная запись свойств границы элемента
border: 1px solid #f00;
В примере определена сплошная граница элемента толщиной в один пиксель, красного цвета. Порядок указания свойств сокращенной записи может быть произвольным.
Замечание: вIE6 при стилях границыdottedиdashedширины границы в 1pxне существует, браузер самостоятельно ставит ширину в 2px.
Существует возможность определения границы элемента по частям – слева, справа, вверху и внизу. Для этого существуют соответствующие CSS-свойства: border-top-color, border-top-style, border-top-width, border-left-color, border-left-style, border-left-width и т.д. Существуют также соответствующие свойства для сокращенной записи: border-top, border-bottom, border-left и border-right.
Чтобы избавиться от отображения границы элемента, используйте свойство border-width с нулевым значением, например:
Отмена отображения границы элемента
input {border:none;}
Свойства обтекания
К свойствам обтекания относятся float и clear. Эти свойства широко используются в современных HTML-документах, оптимизированных для поисковых систем (см. раздел 7). Они отвечают за обтекание блоков текста и элементов.
Свойство float может иметь одно из следующих значений: left, right или none (значение по умолчанию). Это свойство устанавливает правило обтекания – справа от объекта (значение left) или слева от объекта (значение right).
Свойство clear отменяет обтекание для текущего элемента, при этом может принимать одно из следующих значений: left, right, both и none (значение по умолчанию). Соответственно, значение left отменяет обтекание справа, а значение right – обтекание слева, значение both отменяет обтекание с обеих сторон.
Свойства внешнего отступа
Свойство margin определяет внешний отступ для элемента по четырем сторонам: вверху, внизу, слева и справа. При этом он может быть задан по частям, используя свойства margin-top, margin-bottom, margin-left и margin-right. Существует также сокращенная запись внешних отступов по сторонам. Рассмотрим несколько примеров:
Внешнийотступ
margin: 10px;
margin-top: 10px;
margin: 10px 20px 30px 40px;
margin: 10px 20px 30px;
margin: 10px 20px;
Первая запись в примере определяет внешний отступ, равный 10 пикселям по всем четырем сторонам элемента. Вторая запись определяет внешний отступ сверху, равный 10 пикселям. Следующая запись определяет отступ сверху 10 пикселей, справа – 20 пикселей, внизу – 30 пикселей, слева – 40 пикселей. В сокращенной записи отступа направления перечисляются начиная сверху и далее по часовой стрелке, т.е. справа, внизу и слева. В случае, когда отступ задан не для всех сторон, например как в четвертой и пятой записи, недостающие величины будут равны соответствующим величинам симметричных сторон. Так, в соответствии с четвертой записью, будет установлен внешний отступ сверху, равный 10 пикселям, слева и справа – 20 пикселей, внизу – 30 пикселей. Последняя запись предполагает отступ сверху и снизу по 10 пикселей, слева и справа – по 20 пикселей.