Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 11. Макетирование в CSS: рамки, внутренние и внешние отступы

Содержание курса

Макетирование в CSS

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

У каждого прямоугольника есть некоторое расстояние от его края до содержимого, это называется padding и имеет соответствующее свойство CSS padding.

Внешние отступы элемента (прямоугольника) от своего контейнера (того прямоугольника, в который он вложен) именуются margin и имеют соответствующее свойство CSS margin.

Кроме того у любого элемента может быть рамка, которая называется border и имеет соответствующее свойство CSS border.

Все прямоугольники вкладываются в один общий прямоугольник - элемент <html></html>.

Как видно из рисунка у контейнера есть четыре стороны, именуемых top, right, bottom и left. Эти названия сторон также будут использоваться в CSS для макетирования.

Рамки (border)

Рамки у элементов задаются свойством CSS border и могут присутствовать у любых элементов. У этого свойства через пробел указываются три параметра (указываются все 3, порядок важен): толщина, стиль и цвет.
Пример: p {border: 3px solid red;}

border - это общее свойство CSS для рамки. Все его значения имеют отдельные свойства: толщина рамки - border-width, стиль рамки - border-style, цвет рамки - border-color.

У стиля рамки есть несколько возможных значений: none (отменяет рамку), solid, dotted, dashed, double, groove, ridge, inset, outset и некоторые другие. Как они выглядят показано в примере ниже.

Как для сокращенного, так и для полного написания можно задать отдельные свойства каждой из 4-х сторон рамки, используя свойства:
Для общего свойства border:
border-top (верхняя линия рамки), border-right (правая линия рамки), border-bottom (нижняя линия рамки), border-top (левая линия рамки).
Пример: div {border-top: 3px solid red; border-bottom: 2px dotted green;}


Для отдельных свойств рамки:
border-top-width, border-top-style, border-top-color (вместо top могут быть значения right, bottom, left).
Пример: div {border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: red;}

Свойство border-radius позволяет скруглить углы прямоугольной рамки. В значении этого свойства через пробел указывается радиус скругления для каждого из 4-х углов рамки, можно указать два значения, в этом случае каждое из них будет применено к двум углам по диагонали, либо одно значение - для всех углов:

<!DOCTYPE html>
	<html>
		<head>
			<title>Свойство border-radius</title>
			<style>
				div {border: 3px solid red; border-radius: 10px;}
			</style>
		</head>
		<body>
			<div>Текст внутри блока DIV</div>
		</body>
	</html>

Вид в браузере:

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

<!DOCTYPE html>
	<html>
		<head>
			<title>Рамки</title>
			<style>
				.sol {border: 3px solid red;}
				.dot {border: 3px dotted red;}
				.das {border: 3px dashed red;}
				.dou {border: 3px double red;}
				.gro {border: 3px groove red;}
				.rid {border: 3px ridge red;}
				.ins {border: 3px inset red;}
				.out {border: 3px outset red;}
			</style>
		</head>
		<body>
			<span class="sol">Строка с рамкой solid</span> <br /><br />
			<span class="dot">Строка с рамкой dotted</span> <br /><br />
			<span class="das">Строка с рамкой dashed</span> <br /><br />
			<span class="dou">Строка с рамкой double</span> <br /><br />
			<span class="gro">Строка с рамкой groove</span> <br /><br />
			<span class="rid">Строка с рамкой ridge</span> <br /><br />
			<span class="ins">Строка с рамкой inset</span> <br /><br />
			<span class="out">Строка с рамкой outset</span>
		</body>
	</html>

Результат отображения в браузере:

Inline элемент <span></span> (промежуток) позволяет обратиться через CSS к отдельной строке, слову и даже символу. Запомните его. Этот элемент несемантичный и его можно использовать в любой части кода.

Внутренние отступы - padding

Как говорилось выше, padding - это внутренние отступы содержимого элемента от краев самого элемента. У свойства padding аналогичная ситуация, что и у border - есть общее свойство padding и есть отдельные свойства padding-top (отступ сверху), padding-right (отступ справа), padding-bottom (отступ снизу) и padding-left (отступ слева).

У общего свойства padding значения задаются через пробел в порядке сверху "по часовой стрелке": верх право низ лево: padding: 1px 5px 0 8px. Обратите внимание, что при значении "0" единица измерения не указывается.
Если указать только одно значение, то оно будет применено ко всем сторонам: p {padding: 5px;}.
Если указанно два значения, то первое - это вертикаль (верх и низ), а второе - горизонталь (право и лево). Пример: p {padding: 10px 5px;}
Если указано три значения, то первый - верх, второй - горизонталь (право и лево), третий - низ. Пример: p {padding: 10px 5px 8px;}

Внешние отступы - margin

Внешние отступы устанавливает свойство CSS margin. Внешний отступ - это отступ текущего элемента ("прямоугольника") от краев родительского элемента (элемент, внутри которого он находится).
Правила задания значений margin точно такие же как и у padding:
p {margin: 5px 2px 4px 10px;}
p {margin: 5px 2px 4px;}
p {margin: 5px 2px;}
p {margin: 15px;}
И также есть отдельные свойства: margin-top (внешний отступ сверху), margin-right (внешний отступ справа), margin-bottom (внешний отступ снизу), margin-left (внешний отступ слева).

Селектор CSS * задает свойства для всех элементов, пример: * {margin: 0; padding: 0;} - это правило отменяет отступы по умолчанию у всех элементов, в большинстве случаев позиционирование нужно начинать именно с этого правила.

Поэкспериментируйте со свойствами padding и margin и посмотрите как ведут себя элементы в браузере.

Кроме положительных значений, значения margin могут быть и отрицательными, например: p {margin: -25px 0 0 0;}

При отрицательных значениях margin элементы могут наезжать друг на друга. Следует отметить, что в браузере нам видны только две оси: X и Y, а между тем, есть еще ось Z и каждый элемент находится на своем слое (как в графических редакторах, например Photoshop, Fireworks и др.).

Центрирование элементов

Для того чтобы отцентровать элемент по центру окна браузера, независимо от размеров окна, можно задать body внешние отступы слева и справа на одинаковое число в процентах - свойство margin-left (внешний отступ слева) и margin-right (внешний отступ справа): body {margin-left: 25%; margin-right: 25%;}. Схематически это будет выглядеть так:


Теперь положение DIV будет всегда по центру, даже при изменении размеров окна браузера. Точно также одни элементы ("дети") центрируются относительно тех элементов, в которые они вложены ("родители").

При заданной фиксированной ширине DIV можно указать его внешний отступ слева и справа в значении auto:
div {width: 500px; margin-left: auto; margin-right: auto;}.

Вариантов центрирования элементов масса. Чаще делают так:

По мере изучения html вы поймете это глубже, потому как мы еще будем рассматривать позиционирование DIV'ов друг относительно друга.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля


Комментарий №1
22-03-2018 13:39:57
Серега
В Internet Explorer почему то border-radius не работает