Блоки в CSS. Позиционирование блоков css. CSS ширина блока

CSS

Блоки в CSS.В HTML к блочной структуре относят: заголовки h1, h2, h3, h4, h5, h6, параграфы <p> и элементы <div> и т.д.
В блоках могут располагаться картинки, ссылки и т.п.

Содержание
  1. border
  2. padding
  3. margin

border

Рамка блока. Чтобы сделать рамку видимой и красивой, нужно указать её стиль.

Имеет такие свойства:
-width — толщину рамки
-color — цвет рамки
-style — стиль рамки.

Стили указываются так:
solid — сплошная рамка
dotted — точечная рамка
dashed — пунктирная рамка
double — из двойной сплошной линии (минимальная толщина 3 пикселя)
groove — рамка с имитацией объемной вдавленной линии
ridge — рамка с выпуклой линией
inset — рамка имитирующая вдавленный блок
outset — рамка делает блок так, что он кажется выпуклым.

Можно писать сокращённой формой. Последовательность такая:
толщина стиль цвет.  Все пишется через пробел, например:

h1
{border: 4px dotted red; }

Пример рамки:

CSS Блоки

Также можно задавать разный стиль для каждой стороны рамки. Подставьте к border -top,
-left,
-right,
-bottom

(верх,лево,право,низ),
этим вы уточняете какую именно сторону рамки вы бы хотели заменит в стиле.

>> Пример CSS :

h2{
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 3px;
border-right-style: dotted;
border-right-color: green;
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color: black; }

В сокращённом виде:

h2{
border-top: 10px solid red;
border-left: 3px dotted green;
border-right: 3px dotted green;
border-bottom: 5px dashed black;}

Можно задать стиль всей рамки, а нужные стороны прописать отдельно.

h2{
border: 20px solid red;
border-top: 5px dashed black;
border-bottom-color: blue; }

padding

Это поля внутри блока. Размер от рамки до содержимого в блоке ( размер в пикселях ).

Пример:

Читайте также:  CSS селекторы

CSS Блоки

Здесь также можно задавать значения для отдельных полей, подставляя слова -top, -left, -right, -bottom.

Пример:

h2{
padding: 50px;
padding-top: 10px;
padding-lef: 10px;
padding-right: 10px;
padding-bottom: 10px; }

margin

Задаёт расстояние отступа от блока до других элементов на странице.
Вы можете задавать расстояние на каждую сторону, подставляя слова -top, -left, -right, -bottom.
Пример, общий отступ 100 пикселей, а сверху 10 пикселей.

h2{
margin: 100px;
margin-top: 10px; }

Вот что получится:

CSS Блоки

дальше. — Высота и ширина блоков в CSSчайник, CSS ДЛЯ ЧАЙНИКОВ

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий