ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Занятия по "Каскадным стилевым таблицам" | Блочная модель

Блочная модель

Каждый элемент с содержанием в языке HTML можно рассматривать как блок. Каждый блок включает в себя (изнутри наружу): внутреннее поле или поле содержания; поля отступов (padding); поле границы (border); и внешнее поле (margin). Более подробную схему посмотрите в разделе 8.1. Размеры блока.

Цвет фона для содержания, полей отступов и границ определяется свойствами: background, background и border, соответственно. Внешнее поле всегда прозрачное.

Свойства для внешнего поля (margin) хорошо раскрыты в разделе 8.3. Свойства полей: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

Свойства полей отступов (padding) посмотрите в разделе 8.4. Свойства отступов: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

Очень важен раздел о свойствах границ 8.5. Свойства границ. Эти свойства определяют стиль и цвет границ не только для текстовых блоков, но и для изображений и таблиц.

После внимательного прочтения соответствующих ссылок на свойства и значения, рассматриваемых полей, вы легко поймете вносимые изменения в стилевые таблицы. Конечно, все изменения могут показаться вычурными, но наша задача посмотреть изменения, вносимые данными свойствами.

ПРИМЕР 11
BODY {color:black;
      background: white;
      font-family:Times;
      font-size:13pt;}

/*изменим фон содержания для H1, H2, H3 с помощью background*/
/*изменим размер внешних полей с помощью свойства 'margin-top', 
'margin-right', 'margin-bottom', 'margin-left'*/
/*изменим ширину границы вокруг этих заголовков с помощью 'border-top-width', 
'border-right-width', 'border-bottom-width', 'border-left-width'; 
и стиль границы: 'border-style' */

H1,H2,H3 {color:red;
          background: #6495ED;
          font-family:Arial;
          margin-top: 5px;
          margin-right: 10px;
          margin-bottom: 3px;
          margin-left: 6px;
          border-style: solid;
          border-top-width: 1px;
          border-right-width: 2px;
          border-bottom-width: 1px;
          border-left-width: 2px;
          }

H4 {font-family: Times;}

H5 {color: green;
    font-family: Verdana;}
H6 {color: blue;
    font-family: san-serif;}

P {font-size:12pt;
   font-stretch: semi-condensed;}

P.green {color:green;}

.gray{color:gray;}

TABLE {   }
CAPTION {font-weight:bold;}
TH {font-variant: small-caps;}
TD {font-style:italic;}

HR {color: yellow;}

A {color:red;
   font-family: Arial;
   font-size: 11pt;
   font-weight: bold;
   font-stretch: semi-expanded;}
   
A:hover {color:white;
         background:red;}

OL LI {font-style:italic}

#other {font-style:normal;
        font-weight:bold;}
        
/*опишем границу только под каждой строкой ненумерованного 
списка: border-bottom-style, border-bottom-width, border-bottom-color*/
UL LI {font-style:normal;
       color: white;
       background: navy;
       border-bottom-style: dotted;
       border-bottom-width: 3px;
       border-bottom-color: #DC143C
      }

← Назад | Вперед →
Copyright ©  aranea.ru