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

Блочная структура документа предполагает, что каждый элемент располагается в блоке, который состоит из содержимого блока, рамки, области между рамкой и содержимым элемента, и полей.

26. свойства margin-top, margin-right, margin-bottom, margin-left определяют ширину поля для каждой из сторон элемента и могут принимать следующие значения:

  • любое значение, представляющее ширину поля. Значением по умолчанию является 0.
  • любое значение, выраженное в процентном отношении ширины поля к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
  • inherit - применяется значение родительского элемента.
Пример использования: p {margin-top: 10px;}

27. свойство margin позволяет установить ширину сразу всех полей. У этого свойства может быть от 1 до 4 значений. При одном значении, его величина присваивается сразу всем полям. В случае если имеются 2 значения, то первое из них присваивается верхнему и нижнему полю, а второе - левому и правому. Если у свойства определено 3 параметра, то первое значение присваивается верхнему полю, второе - левому и правому, а третье - нижнему.

Пример использования: p {margin: 20px 30px 5px}

28. свойства padding-top, padding-right, padding-bottom, padding-left позволяют установить ширину промежутка между содержимым элемента и его границей, и может принимать следующие значения:

  • none - отсутствие изменения регистра (по умолчанию).
  • любое значение, представляющее ширину поля.
  • любое значение, выраженное в процентном отношении ширины поля к ширине элемента (для левого и правого поля) и его высоте (для верхнего и нижнего поля).
  • inherit - применяется значение родительского элемента.
Пример использования: p {padding-top: 20px}

29. свойство padding позволяет установить ширину промежутка сразу для всех сторон элемента. Свойство может иметь от 1 до 4 значений. При одном значении, его величина присваивается сразу всем полям. В случае если имеются 2 значения, то первое из них присваивается верхнему и нижнему полю, а второе - левому и правому. Если у свойства определено 3 параметра, то первое значение присваивается верхнему полю, второе - левому и правому, а третье - нижнему.

Пример использования: h1{padding: 5px 5px 3px}

30. установить ширину рамки с определенной стороны можно при помощи свойств:

border-top-width, border-right-width, border-bottom-width, border-left-width.

Рамка располагается между основной частью элемента и полем. Параметры значений могут определятся кодовыми словами, или числовыми значениями , выраженными в пикселах.

Кодовые слова, для выражения толщины рамки:

  • thin - рамка в виде тонкой линии.
  • medium – средняя толщина рамки (значение, принятое по умолчанию).
  • thick - рамка виде толстой линии.
  • inherit - применяется значение родительского элемента.
Пример использования: p {border-top-width: 5px }

31. свойство border-width позволяет установить ширину рамки для всех сторон элемента блока одновременно. Это делается с помощью задания от одного до четырех значений.

В случае если имеются 2 значения, то первое из них присваивается верхнему и нижнему полю, а второе - левому и правому. Если у свойства определено 3 параметра, то первое значение присваивается верхнему полю, второе - левому и правому, а третье - нижнему.

Пример использования: p{ border-width: 2px,2px,1px,1px}

32. используя свойства таблицы стилей такие как: border-top-color, border-right-color, border-bottom-color, border-left-color , вы можете устанавливать цвет каждой. Отдельно взятой стороны рамки, задавая параметры в виде стандартных для CSS значений цвета.

Пример использования: {border-top-color: red}

33. для определения цвета сразу всех сторон рамки элемента применяется свойство - border-color, которое, принимая значение параметров в виде стандартных для таблиц стилей. Значений цвета или кодовых слов, позволяет определить цвет сторон рамки в следующей последовательности: первое значение – верхняя сторона, второе значение – нижняя сторона, третье значение – левая сторона, четвертое значение – правая сторона рамки элемента.

Пример использования: p{border-color: red, blue, red, blue} 34. Стиль рамки устанавливается при помощи свойств: border-top-style, border-right-style, border-bottom-style, border-left-style. Свойства могут принимать следующие параметры в виде кодовых слов:

  • none - линия отсутствует.
  • hidden - линия тоже отсутствует
  • dotted - пунктирная линия.
  • dashed - штрихпунктирная линия.
  • solid - непрерывная сплошная линия.
  • double - сплошная двойная линия.
  • groove - борозда трехмерная борозда.
  • ridge - гребень трехмерный.
  • inset - вырезка трехмерная.
  • outset – орнамент трехмерный.
  • inherit - применяется значение родительского элемента.
Следует отметить, что в зависимости от браузера отображение может не соответствовать указанным значениям.

Пример использования: p{ border-top-style: double; }

35. сойство таблицы стилей border-style позволяет установить стиль рамки для всех сторон элемента. При одном значении, стиль устанавливается сразу для всех сторон.

Значения, в виде кодовых слов, указываются через запятую. Последовательность, определяющая стили сторон: первое значение – верхняя сторона, второе значение – нижняя сторона, третье значение – левая сторона, четвертое значение – правая сторона рамки элемента.

Пример использования: p{ border-style: double, solid}

36. установить несколько свойств для каждой стороны рамки позволяют: border-top, border-right, border-bottom, border-left Каждое отдельное свойство применяется к указанной для него стороне.

Значения рамки указываются в следующей последовательности:

  • border-width - толщина границ.
  • border-style - стиль границ.
  • border-color - цвет границ.
Пример использования: {border-top: 1px solid red;}

37. свойство таблицы стилей border позволяет определить значения рамки со всех строн элемента, при этом, указанные значения устанавливаются для всех сторон рамки. Значения рамки указываются в следующей последовательности:

  • border-width - толщина границ.
  • border-style - стиль границ.
  • border-color - цвет границ.
Пример использования: p{border:1px solid red;}

38. в CSS3введено новое свойство border-radius, которое позволяет задать радиус закругления углов элементов. В настоящее время это свойство таблицы стилей поддерживается браузерами Mozilla Firefox и Webkit.

Значения для Mozilla Firefox задаются следующим образом:

  • -moz-border-radius – закругляет все углы элемента.
  • -moz-border-radius-topleft – радиус в верхнем левом углу
  • -moz-border-radius-topright - радиус в верхнем правом углу
  • -moz-border-radius-bottomleft - радиус в нижнем левом углу
  • -moz-border-radius-bottomright - радиус в нижнем правом углу
Пример использования: div{border:1px solid black; -moz-border-radius:5px;}

Для браузера Webkit применяются следующие свойства:

  • -webkit-border-radius - закругляет все углы элемента.
  • -Webkit-border-top-left-radius - радиус в верхнем левом углу
  • -Webkit-border-top-right-radius - радиус в верхнем правом углу v-Webkit-border-bottom-left-radius - радиус в нижнем левом углу
  • -Webkit-border-bottom-right-radius - радиус в нижнем правом углу
Пример использования: div
{
Border: 1px solid black;
- Webkit-border-top-left-radius: 5px;
- Webkit-border-bottom-right-radius: 5px;
}

39. ширина границ сразу всех сторон элемента уровня блока устанавливается при промощи ствойства outline-width. Если используется одно значение, то оно задается сразу для всех сторон рамки элемента. В качестве одиночного значения можгут применятся кодовые слова:

  • thin – тонкая линия границы
  • medium – средняя линия границы (это значение устанавливается по умолчанию)
  • thick – толстая линия
В случае если ширина границ устанавливается в виде принятых значений, то они определяют свойства сторон в следующей последовательности:
первое значение – верхняя сторона, второе значение – нижняя сторона, третье значение – левая сторона, четвертое значение – правая сторона рамки элемента.

Пример использования: body{outline-width:10px 30px 5px}

40. стиль сразу для всех сторон рамки элемента можно установить, используя свойство outline-style. Значения задаются одним из кодовых слов:

  • none - линия отсутствует.
  • hidden - линия тоже отсутствует
  • dotted - пунктирная линия.
  • dashed - штрихпунктирная линия.
  • solid - непрерывная сплошная линия.
  • double - сплошная двойная линия.
  • groove - борозда трехмерная борозда.
  • ridge - гребень трехмерный.
  • inset - вырезка трехмерная.
  • outset – орнамент трехмерный
  • inherit - применяется значение родительского элемента.
В том случае, когда свойству задается только одно значение, оно присваивается всем сторонам рамки.
Если имеется два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой.
При определении трех значений, первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки.

Пример использования: body{outline-style: double;}

41. установить цвет рамки для всех сторон элемента, можно используя свойство таблицы стилей outline-color. В качестве параметров свойства применяется принятые в CSS значения цвета. Последовательность, определяющая цвет рамки элемента:

  • первое значение – верхняя сторона
  • второе значение – нижняя сторона
  • третье значение – левая сторона,
  • четвертое значение – правая сторона рамки элемента.
В том случае, когда свойству задается только одно значение, оно присваивается всем сторонам рамки.
Если имеется два значения, то первое из них присваивается верхней и нижней стороне, а второе - левой и правой.
При определении трех значений, первое значение присваивается верхней стороне, второе - левой и правой, а третье - нижней стороне рамки.

Пример использования: body{outline-color:red;}

42. для определения параметров общей границы можно с успехом использовать свойство таблицы стилей – outline. Значения, определяющие общую границу элемента, записываются в следующем порядке:

  • outline-width - толщина границы.
  • outline-style - стиль границы.
  • outline-color - цвет границы.
Прпимер использования: body{outline: 1px solid red}