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

  • Мадина says:
    http://vkusnaykuxny.ru

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

    • Юрий says:
      http://inetmkt.ru

      Вот именно, Мадина, если начать разбираться, то все проясняется.

  • Виктория says:
    http://informatikurok.ru

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

    • Юрий says:
      http://inetmkt.ru

      Спасибо, заходите еще.

  • Татьяна says:
    http://ledi-slim.ru

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

  • Виктория says:
    http://informatikurok.ru

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

    • Юрий says:
      http://inetmkt.ru

      Заходите еще, продолжим и разберем эту тему до конца.

  • Елена says:
    http://startmig.ru/obrazovanie/detskie-myisli

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

    • Юрий says:
      http://inetmkt.ru

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

  • lyubov says:
    http://lyubaha.ru

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

    • Юрий says:
      http://inetmkt.ru

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

  • Татьяна says:
    http://tatyana-wwwgoodlecom.blogspot.ru/

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

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

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