Главная | Обратная связь | Поможем написать вашу работу!

Свойства, связанные с размером и рамкой

Справочник свойств листов стилей

Свойства цвета и фона

1. background-color – это свойство меняет цвет фона элемента. Его значением может быть одно из имен цветов или его RGB- значение. Поддерживается всеми элементами.

Пример: body{background-color: black}

2. background-image – устанавливает фон элемента в виде изображения. Адрес может быть задан абсолютным или относительным, но обязательно заключается в скобки и идет за словом url. Поддерживается всеми элементами.

Пример: h1 {background-image: url (\picture\line.gif)}

3. color – определяет цвет текста элемента (цвет переднего плана элемента). Используется любое из имен цветов или его RGB-значение. Поддерживается всеми элементами.

Пример:
p{color:red}
p{color:rgb(255,0,0)}
p{color:#ff0000}

4. background-attachment – определяет, будет ли фоновое изображение зафиксировано в окне браузера или будет прокручиваться вместе с документом. Значения:

· scroll - фоновое изображение прокручивается вместе с документом (по умолчанию)

· fixed - фоновое изображение фиксируется в окне браузера.

· inherit - применяется значение родительского элемента.

Пример: body{background-image: url(pictures.gif); background-attachment: fixed;}

Свойства, связанные с размером и рамкой

Каждый элемент Web-страницы располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Например, можно заключить в рамку заголовок или изменить поля для тега <p>, в результате чего каждый новый абзац, помеченный этим тегом, будет иметь заданный отступ.

1. Установка ширины поля для определенной стороны элемента.

· margin-bottom – устанавливает нижнее поле блока текста.

· margin-left – устанавливает левое поле блока текста.

· margin-right – устанавливает правое поле блока текста.

· margin-top – устанавливает верхнее поле блока текста.

Значения:

· любая соответствующая стандарту длина – число, представляющее ширину поля. Значением по умолчанию является 0.

· любое соответствующая стандарту процентное значение – отношение в процентах ширины поля к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).

Пример: p {margin-top: 10px;}

2. Установка ширины промежутка между содержимым элемента и определенным участком его границы

· padding-bottom – устанавливает пространство между содержимым элемента и его нижней границей.

· padding-left – устанавливает пространство между содержимым элемента и его левой границей.

· padding-right – устанавливает пространство между содержимым элемента и его правой границей.

· padding-top – устанавливает пространство между содержимым элемента и его верхней границей.

Значения:

· none - отсутствие изменения параметра (по умолчанию).

· любая соответствующая стандарту длина – число, представляющее ширину промежутка. Значением по умолчанию является 0.

· любое соответствующее стандарту процентное значение – отношение в процентах ширины промежутка к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).

Пример: p {padding-top: 20px}

3. Установка толщины рамки для определенной стороны (соответственно верхней, правой, нижней и левой)

· border-top-width – устанавливает толщину верхней границы рамки.

· border-right-width –устанавливает толщину правой границы рамки.

· border-bottom-width – устанавливает толщину левой границы рамки.

· border-left-width – устанавливает толщину нижней границы рамки.

Значения:

· любая соответствующая стандарту длина – число, представляющее толщину рамки.

· thin – рамка в виде тонкой линии.

· medium – рамка в виде линии средней толщины. (по умолчанию)

· thick – рамка виде толстой линии.

· inherit – применяется значение родительского элемента.

Пример: p { border-top-width: 5px }

4. Установка цвета рамки для определенной стороны элемента

· border-top-color – цвет верхней рамки элемента.

· border-right-color – цвет правой рамки элемента.

· border-bottom-color – цвет нижней рамки элемента.

· border-left-color – цвет левой рамки элемента.

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

Значение: любое соответствующее стандарту значение цвета.

Примеры:

p { border-top-color: red}

p{ border-color: red, blue, red, blue}

5. Установка стиля рамки для определенной стороны

· border-top-style – стиль верхней стороны.

· border-right-style – стиль правой стороны.

· border-bottom-style – стиль нижней стороны

· border-left-style – стиль левой стороны.

· border-style – определяет стиль рамки сразу для всех сторон элемента.

Значения:

· none - рамка отсутствует.

· dotted – пунктирная линия.

· dashed – штрих-пунктирная линия.

· solid – Сплошная линия.

· double – Двойная линия.

· groove – трехмерная борозда.

· ridge – Трехмерный гребень.

· inset – Трехмерная врезка.

· outset – Трехмерный орнамент.

Пример: p{ border-top-style: double; }

6. height – устанавливает общую высоту элемента. Это свойство может быть использовано для текстовых элементов, но чаще – для замещаемых, таких как изображения. Если необходимо, высота изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранена, если для свойства "ширина" указано значение 'auto'. Значениия:

· любое соответствующее стандарту число, представляющее высоту элемента.

· значение в процентах по отношению к высоте родительского элемента.

Пример: img { height: 100px }

7. width - – устанавливает общую ширину элемента. Это свойство может быть использовано для текстовых элементов, но чаще – для замещаемых, таких как изображения. Если необходимо, ширина изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранена, если для свойства "высота" указано значение 'auto'.

Значения:

· любое соответствующее стандарту число, представляющее ширину элемента.

· значение в процентах по отношению к ширине родительского элемента.

Пример: img { width: 100px }

12 Следующая ⇒