Элементы CSS, описание свойств. Продолжение.
4 211 просмотровПродолжаем разбирать элементы CSS и их свойства. В предыдущей статье мы разобрали следующие элементы CSS:
— свойства шрифта
— свойства текста
— свойства цвета и фона
Итак приступаем к продолжению.
Свойства границ
Свойства margin-left, margin-right, margin-top, margin-bottom
Определяют величину отступа вокруг содержащего их элемента. Значения указываются в пикселях, сантиметрах или миллиметрах. Отступ представляет собой пустое пространство, не заполненное никакими элементами вокруг изображений, абзацев, таблиц или других компонентов веб-страницы. Могут применяться и вместе и по отдельности.
Пример:
P {margin-left: 20px; }
IMG {
margin-top: 10mm;
margin-left: 15mm;
margin-top: 20mm;
margin-bottom: 20mm;
}
Свойства padding-left, padding-right, padding-top, padding-bottom
Аналогично предыдущему свойству указывает значения отступов от видимых рамок объектов HTML, таблиц, изображений. Тоже могут применяться как вместе, так и по отдельности.
Пример:
TABLE {
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px
}
Свойства border-top-width, border-bottom-width, border-left-width, border-right-width
Определяют толщину обрамления объектов HTML. Правила аналогичны вышеописанным свойствам.
Пример:
TD {
border-top-width: 1mm;
border-bottom-width: 1mm;
border-left-width: 2px;
border-right-width: 2px;
}
Свойства списков
Эти параметры определяют отображение элементов нумерованных и маркированных списков. Списки в HTML обозначаются тегом <LI>.
Свойство list-style-type
Определяет внешний вид маркера списка.
Параметры для маркированного списка:
— none, маркер списка не отображается
— disk, маркер в виде черного круга
— circle, маркер в виде полой окружности
— square, маркер в виде черного квадрата
Параметры для нумерованного списка:
— decimal, отображается в виде последовательности арабских чисел
— lower-roman, в виде последовательности римских цифр в строчном регистре
— upper-roman, в виде последовательности римских цифр в заглавном регистре
— lower-alpha, в виде последовательности строчных букв
— opper-alpha, в виде последовательности заглавных букв
Пример:
LI { list-style-type: disk; }
Свойство list-style-image
Устанавливает в качестве метки маркированного списка произвольное изображение.
Пример
LI{ list-style-image: URL(/images/marker1.gif); }
Свойство list-style-position
Описывает позиционирование элементов списка.
— outside, позиционирование по умолчанию
— inside, позиционирование без отступа от левой границы
Пример:
LI { list-style-position: inside; }
Вспомогательные свойства элементов CSS
Свойство width и height
Определяет ширину и высоту объекта в пикселях, сантиметрах, миллиметрах или процентах от значения, принятого по умолчанию. Преимущественно применяются при размещении графики.
Пример:
IMG {
height: 100px;
width: 200px;
}
Свойство float
Указывает положение объекта относительно других объектов, размещенных рядом.
— none, расположение объекта по умолчанию
— left, расположение объекта слева
— right, расположение объекта справа
Пример:
TD { float:none; }
Свойство clear
Устанавливает правила расположения других объектов вокруг данного
— none, расположение по умолчанию
— left, расположение слева
— right, расположение справа
— both, расположение с двух сторон
Пример:
IMG { clear:both; }
Свойство white-space
Применяется для управления отображения пробелов и переносов..
— normal, стандартное отображение текста, при котором несколько подряд пробелов преобразуются в один
— pre, допускается отображение нескольких пробелов подряд
— nowrap, запрещен перенос строки в пределах действия элемента
Пример:
P {white-space: pre; }
Свойство display
Устанавливает правила расположения текста на экране.
— block, отображает перенос строки до и после объекта
— list-item, перносит строку до и после объекта и добавляет маркер в начало строки
— inline, допускает отображение объекта на одной строке с другими элементами
— none, объект не отображается
Пример:
IMG { display: block; }
На этом описание свойcтв элементов CSS можно считать законченными. Осталось описать классы (селекторы классов) и идентификаторы ( селекторы идентификаторов). Думаю, что напрягусь и дам несколько примеров по подключению CSS к HTML страницам.
Для меня это очень сложно..) Но если начать разбираться то может и вникну..)
Вот именно, Мадина, если начать разбираться, то все проясняется.
Очень интересно написано, с удовольствием почитала, спасибо!
Спасибо, заходите еще.
Уже пыталась копаться в стилях. Попробую поэкспериментировать со списком.
Если профессионально делать сайт самому с нуля, то без стилевого оформления, т.е. стилей, не обойтись!!! Спасибо за уроки, они помогут всем больше разобраться в тех кодах, которые написаны кем-то до нас, да и самим исправить то, что не нравится!
Заходите еще, продолжим и разберем эту тему до конца.
Полезная статья. Пытаюсь разобраться — в интернете искала эту информацию, а тут и искать не надо. Беру Ваш сайт в закладки и продолжу разбираться -кое что не нравится в своих темах на сайтах, хочу разобраться и поправить.
Заходите, Елена, всегда буду рад. Дизайн ведь такая штука, сегодня нравится, завтра хочется что-то подправить, изменить, а послезавтра вообще все перевернуть. Это жизнь, движение.
Да, информация полезная, но пока сложновато для меня, постараюсь изучить. Спасибо.
Если сложно, начните с малого, чего-нибудь простого. Например, структура страницы на HTML. Теги HEAD, BODY и так далее.
Я вообще — «чайник». Выставила свой блог на конкурс, а надпись
(описание блога) настроить не могу. Так как в этой настройке, кроме цвета, ничего нет. Что же мне делать?