Продолжаем разбирать элементы 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 страницам.

Комментарии (12) на “Элементы CSS, описание свойств. Продолжение.”

  • Мадина пишет:

    Для меня это очень сложно..) Но если начать разбираться то может и вникну..)

  • Виктория пишет:

    Очень интересно написано, с удовольствием почитала, спасибо!

  • Татьяна пишет:

    Уже пыталась копаться в стилях. Попробую поэкспериментировать со списком.

  • Виктория пишет:

    Если профессионально делать сайт самому с нуля, то без стилевого оформления, т.е. стилей, не обойтись!!! Спасибо за уроки, они помогут всем больше разобраться в тех кодах, которые написаны кем-то до нас, да и самим исправить то, что не нравится!

  • Елена пишет:

    Полезная статья. Пытаюсь разобраться – в интернете искала эту информацию, а тут и искать не надо. Беру Ваш сайт в закладки и продолжу разбираться -кое что не нравится в своих темах на сайтах, хочу разобраться и поправить.

    • Юрий пишет:

      Заходите, Елена, всегда буду рад. Дизайн ведь такая штука, сегодня нравится, завтра хочется что-то подправить, изменить, а послезавтра вообще все перевернуть. Это жизнь, движение.

  • lyubov пишет:

    Да, информация полезная, но пока сложновато для меня, постараюсь изучить. Спасибо.

    • Юрий пишет:

      Если сложно, начните с малого, чего-нибудь простого. Например, структура страницы на HTML. Теги HEAD, BODY и так далее.

  • Татьяна пишет:

    Я вообще – “чайник”. Выставила свой блог на конкурс, а надпись
    (описание блога) настроить не могу. Так как в этой настройке, кроме цвета, ничего нет. Что же мне делать?

Оставить комментарий

Популярные записи