Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Свойства CSS блоков

Это наверное, самый сложный и нужный раздел CSS. Мы посвятим ему несколько небольших уроков.
Итак, блоки CSS.

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

С помощью CSS можно существенно расширить возможности блочной структуры HTML. Также в блоках могут распологаться картинки, ссылки и т.п.

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

Разберём основные свойства блоков.

border

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

-width - определяет толщину рамки в пикселях
-color - задаёт цвет рамки
-style - определяет стиль рамки.

Стили указываются так:

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

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

h1
{border: 6px 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: 10px solid red;
border-top: 5px dashed black;
border-bottom-color: blue; }

 



padding

Это поля внутри блока. Расстояние в пикселях от рамки до содержимого блока.
Пример, поля будут по 50 пикселей со всех сторон:

CSS Блоки

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

h2{
padding: 50px;
padding-top: 10px; }


 


margin

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

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

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

Блоки в CSS

Примечание :

В CSS отступы соседних элементов не складываются! Например два соседних блока имеют отступы (margin). Один имеет 30px, другой 20px. Расстояние между ними будет
не 30+20=50рх, а 30рх. Учитывается наибольший отступ.

 

Первый урок по блокам мы завершили. Тут в принципе не сложно. Главное тренироваться.

Перейти к следующему уроку
Высота и ширина блоков CSS.

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!