Подписка
Email
Fb
RSS
Twitter
Email

Видео уроки CSS. Часть7

В эфире очередной урок CSS от сайта DenWeb.Ru. В данном уроке будем учиться задавать элементам внешние и внутренние отступы, а так же границы (рамки).

Все основные свойства и значения я разобрал в видео уроке. Текстовый вариант будет полезен для закрепления.

Отступы в CSS.

Начнем с внешних отступов. Задается свойством margin. Устанавливает величину отступа от края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента или до ближайшего элемента. Размерность может быть как в значениях длины (px, pt, em и т.д.), так и в значении auto.

Внутренние отступы (padding) устанавливают значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Чтобы устанавливать отступы и поля соответственно сверху, справа, снизу, слева нужно использовать ключевые слова top, right, bottom, left.

Например: margin-top: 5px; или padding-bottom:25px;

Значение внешних отступов в некоторых случаях может быть и отрицательным, например: margin-left: −25px;

Существует сокращенная запись:

  • margin: 5px; — применяется ко всем полям;
  • margin: 5px 10px; — первое число означает отступ снизу и сверху, второе — слева и справа;
  • margin: 5px 10px 4px; — первое число означает отступ сверху, второе — слева и справа, третье — снизу;
  • margin: 5px 10px 4px 6px; — по порядку — сверху, справа, снизу, слева.

Аналогично с padding.

Быстрее разобраться с отступами и полями поможет схема:

Границы в CSS

Для того, чтобы задать рамку (границу), в CSS существует три свойства:

  • border-width — задает толщину границы. Обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px).
  • border-color — определяет цвет границы. О том, как задается цвет, я рассказывал в этом уроке html.
  • border-style — определяет стиль границы. Они могут быть следующими:
SOLID Сплошная
DOTTED Точечная
DASHED Пунктирная
DOUBLE Двойная
GROOVE Из вдавленной линии, с имитацией объема
RIDGE Из выпуклой линией с имитацией объема
INSET Блок кажется вдавленным
OUTSET Блок кажется выпуклым

Существует сокращенная запись. Вначале пишется толщина границы, затем после пробела стиль, а затем после пробела цвет. Например, свойства рамки для изображения:

  img {
  border-width: 3px;
  border-style: solid;
  border-color:#900;
  }

можно записать так:

img { border: 3px solid #900;}
Вы можете оставить комментарий.

13 комментариев к записи “Видео уроки CSS. Часть7”

  1. Igorrr:

    благодарю за Ваши блоги, они очень интересны и познавательны, но нельзя ли помимо видео урока так же продублировать все в виде слов, поскольку не везде на работе открыт доступ к потоковому видео. Учеба жене может ждать, тем боле когда есть время...

  2. Парни, толковый блог. Можно поклацать на контекстную рекламу и помочь автору.

  3. Олег:

    А можно заделать пользовательский вид рамки?

  4. sarmail:

    Не знаю, что имел в виду Олег, скорее всего то, о чем я тоже хотел спросить: можно ли делать рамки не в виде пунктир, а свои? Снежинки, звездочки... Или даже масенькие gif-ки.

  5. Павел:

    вообщем Дэн,прошу ответить на этот вопрос пожалуйста!http://photoshopius.ucoz.ru/index/fotoshop_onlajn/0−4 подойдет ли такой онлайн фотошоп для дальнейшей работы с сайтостроением???просто нет возможности у меня купить адоб фотошоп(

    • Не обязательно покупать лицензию, поищите на торрентах)

      Можно в принципе попробовать и в онлайн, но я с такими версиями не работал — не знаю какой там функционал.

      • Павел:

        Спасибо,что-то в мейле нарыл, адоб CS5 ,ничем не отличается от вашего из видио-lessons) спасибо вам за  такие уроки! Раньше и понятия не имел о HTML и CSS, теперь многого узнал!

  6. Matvey88:

    Здравствуйте, спасибо за урок. Но у  меня возник вопрос немного не по теме. Содержит ли элемент img свойство флоат ?Просто пробовал структуру «<p>text<img/>text</p>» текст не обтекал картинку Заранее спасибо.

  7. Аida:

    Ден, а как сделать так, чтобы рамки с одной стороны не было?

  8. Василий:

    Спасибо автору сайта за его труды, изучил уроки по HTML теперь приступил к

    урокам по CSS. Хотелось

    бы отметить актуальность короткого конспекта  после видео, очень помогает при повторении

    материала!!! 

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

Spam Protection by WP-SpamFree

Яндекс.Метрика