Сибирский федеральный университет
Опубликован: 01.09.2010 | Доступ: свободный | Студентов: 3929 / 383 | Оценка: 4.08 / 3.78 | Длительность: 11:06:00
Лекция 3:

Атрибуты стиля (CSS attributes)

Рамки, поля, отступы, фон

Рамки

border-style определяет стиль для всех границ блока. Допустимые значения: solid, dotted, dashed, double, groove, ridge, inset, outset, none, и hidden.

Пример: p { border-style: solid; }

Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения.

Пример: p { border-top-style: double; }

border-width определяет толщину для всех границ блока, указанную в любой из единиц измерения CSS, кроме процентов (как правило, в пикселах). Пример: p { border-width: 2px; }

То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.

border-color определяет цвет границ блока. Значение цвета указывается любым допустимым способом.

Пример: p { border-color: Green; }

Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color.

border - сокращенное свойство, объединяющее border-width, border-style и border-color.

Пример: p { border: 2px solid #f33; }

Поля

Пустое пространство между содержимым блока и его рамкой (или если, рамки нет, то границей фона) - поле - задается свойством padding. Его размер можно указать в любых единицах измерения.

Свойства padding-top, padding-right, padding-bottom и padding-left задают соответственно верхнее, правое, нижнее и левое поля. Пример: p { padding-left: 20px; }

Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left.

Примеры:

p { padding: 20px; } 
    /* все поля равны 20 пикс */
    p { padding: 5px 20px; }
    /* вертикальные поля равны 5 пикс, а горизонтальные 20 пикс */
    p { padding: 5px 20px 5px 10px; }
    /* сверху 5, справа 20, снизу 5, а слева 10 пикс */
Отступы

Пустое пространство между границей блока и другими блоками задается свойством margin. Оно полностью аналогично свойству padding, с тем отличием, что пространство добавляется не внутри блока, а снаружи.

Пример: p { margin: 20px; }

Фон

Цвет фона блока устанавливается при помощи свойства background-color.

Пример: p { background-color: #765; }

body {
      margin: 5px;
      padding: 5px 10px;
      border: 5px solid gray;
      background-color: #2ae;
    }
  ...
  <div>
    <p>
      В данном примере к элементу body применены свойства margin, padding, border
      и background-color. В упражнении предлагается назначить эти же свойства
      другим элементам страницы - абзацу, списку (и его элементам), а также
      изображению.
    </p>
    <ul>
      <li>margin - отступ</li>
      <li>padding - поле</li>
      <li>border - рамка</li>
      <li>background-color - цвет фона</li>
    </ul>
    <img src="Rock.jpg" alt="Rock" />
  </div>
Листинг 4.3. Поля, рамки, отступы и фон
Поля, отступы, рамки и фон

Рис. 4.2. Поля, отступы, рамки и фон
Упражнение. В данном примере все свойства применены к элементу body. Примените их вместо этого поочередно к остальным имеющимся в примере элементам ( div, p, ul, li и т.д.). Попробуйте задавать различные значения для разных границ, разных полей и отступов.
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990
Сергей Мороз
Сергей Мороз
Беларусь