Дочерние свойства margin и padding.
Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.
У margin зто:
- margin-top - Поле от верхней границы элемента родителя,
- margin-left- Поле от левой границы элемента родителя,
- margin-right - Поле от правой границы элемента родителя,
- margin-bottom - Поле от нижней границы элемента родителя.
И у padding соответственно:
- padding-top - Отступ от верхней границы элемента до его содержания,
- padding-left - Отступ от левой границы элемента до его содержания,
- padding-right - Отступ от правой границы элемента до его содержания,
- padding-bottom - Отступ от нижней границы элемента до его содержания.
Ну думаю понятно.. если возникает необходимость определить отступ или поле от одной единственной стороны элемента лучше воспользоваться одним из вышеперечисленных свойств.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Поля и отступы</title>
</head>
<body>
<div style="width: 250px; background-color: #c5ffa0; border: 2px solid #a68754">
<div style="background-color: #c0e4ff; border: 2px solid #a68754; margin-left:40px; padding-right: 50px">
<samp>Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом!</samp>
</div>
<br>
<div style="background-color: #c0e4ff; border: 2px solid #a68754; margin-right:40px; padding-left: 50px">
<samp>Мало кто знает, как много надо знать, для того чтобы знать, как мало мы знаем!</samp>
</div>
</div>
</body>
</html>
Смотреть пример
Полезные советы:
Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций.
· Избегайте коротких, и уж тем более, нулевых отступов от содержимого к границам элемента, особенно это касается текстовых блоков. Текст с маленькими полями и отступами читается трудно и "вязко".
· Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.
· Один из способов акцентирования внимания посетителя страницы на нужном Вам месте - это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к "особым" местам в тексте..
Глава 9
Курсоры.
Свойство CSS cursor позволяет установить нестандартный вид курсора для того или иного элемента - блока, текста, рисунка.. то есть когда пользователь наведет курсор на такой элемент он, курсор то бишь, поменяет свой вид.
Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры - файлы в форматеcur, ani или svg.
Теперь по порядку..
Дата добавления: 2016-02-16; просмотров: 578;