подчеркнуть текст – и т.д.
С помощью CSS блочную структуру HTML можно расширить и вы в этом убедитесь, дочитав статью до конца.
Для создания верстки сайта я использую блок DIV
, хотя другие веб-мастера используют и другие теги. А в блок DIV, как в контейнере, я размещаю необходимые мне элементы, такие как картинки, текст, заголовки, ссылки и т. д. Мне кажется, так удобней.
Для расширения возможностей блока для тега DIV добавляют атрибут class
или id
с именем селектора.
Ладно, все это теория, которая тяжело воспринимается без практики. Предлагаю сразу приступить к примерам и разъяснениям.
Блок создается двумя способами.
○ 1-ый способ:
в HTML (class
)
здесь содержание блока
Blok1
{
/* Здесь стили в CSS */
}
○ 2-ой способ:
в HTML (id
)
здесь содержание блока
#blok1
{
/* Здесь стили в CSS */
}
На практике я использую первый способ.
Чтобы увидеть границы блока или выделить блок, используют рамку. Подробней о рамках в CSS я написал .
border:толщина рамки
вид рамки
цвет рамки
;
Пример
:
border:5px
dotted
#cc0000
;
Итак, создадим в HTML блок с классом «blok1».
Верь в лучшее, ожидай худшее.
Теперь в CSS зададим стиль блоку с классом «blok1»
Blok1
{
border:5px dotted #cc0000;
}
Пример
:
Блок в css
Результат
:
Как видите, блок стал видим для глаза – мы выделили его точечной рамкой.
Чтобы задать расстояние от блока, в CSS используют MARGIN
.
Пример
:
margin:50px
;
Это значит, что расстояние от блока со всех сторон будет 50px.
Чтобы задать расстояние от блока к каждой стороне с разными значениями, используют:
top
– верхняя сторона
right
– правая сторона
bottom
– нижняя сторона
left
– левая сторона
Пример
:
margin-top
:50px;
margin-right
:20px;
margin-bottom
:80px;
margin-left
:150px;
Упрощенный способ
:
margin
:50px
20px
80px
150px
;
Схема
:
margin
Чтобы задать расстояние внутри блока, в CSS используют PADDING
.
Пример
:
padding
:50px
;
Это значит, что внутри блока со всех сторон будет отступ от границы 50px.
Чтобы задать расстояние внутри блока к каждой стороне с разными значениями, используют:
top
– верхняя сторона
right
– правая сторона
bottom
– нижняя сторона
left
– левая сторона
Пример
:
padding-top
:50px;
padding-right
:20px;
padding-bottom
:80px;
padding-left
:150px;
Упрощенный способ
:
padding
:50px
20px
80px
150px
;
Схема
:
padding
: верхний
правый
нижний
левый
;
Давайте теперь все соберем вместе и посмотрим, что в итоге у нас получится:
Блок в css
Верь в лучшее, ожидай худшее. (Блок№1)
Верь в лучшее, ожидай худшее. (Блок№2)
Результат
:
Высота и ширина блоков автоматически (по умолчанию) выставляется по размеру картинки или текста. Но высоту и ширину блока в CSS можно регулировать при помощи свойств height
и width
.
HEIGHT
- высота блока (задается в px или %);
WIDTH
- ширина блока (задается в px или %).
Так как я уже говорил выше, я использую в качестве блоков элемент DIV
, и потому все примеры я буду применять только к элементу DIV.
Blok1
{
height: 150px; /* высота блока */
width: 500px; /* ширина блока */
border:2px dotted #cc0000;
}
Теперь блок с классом «blok
1» будет с фиксированной шириной в 500 px
и высотой 150 px
.
Пример
:
Блок в css
Верь в лучшее, ожидай худшее.
Результат
:
Если вы хотите сделать резиновый блок
, так, чтобы он растягивался по длине монитора, тогда вместо px
, нужно указать %. Только помните: весь монитор – это 100%.
Blok1
{
width: 90%; /* ширина блока */
border:2px dotted #cc0000;
}
Теперь блок с классом «blok
1» будет резиновая ширина в 90% от размера монитора.
Пример
:
Блок в css
Верь в лучшее, ожидай худшее.
Результат
:
Как сделать фон в CSS я писал . Фон блока
делается аналогично.
background: #00FF00;
Пример
:
Блок в css
Верь в лучшее, ожидай худшее.
Результат
:
Чтобы создать тень блока, воспользуйтесь таким правилом
Схема
:
1 – сдвиг тени по горизонтали. Минусовое значение – это влево. Плюсовое значение – это вправо.
2- сдвиг тени по вертикали. Минусовое значение – это вверх. Плюсовое значение – это вниз.
3 – распыление тени. Значение «0» - это самая четкая тень. Значение «100» - сильно распыленная тень.
4 – размер тени. Минусовое значение – это тень в меньшую сторону. Плюсовое значение – это тень на увеличение.
5 – цвет тени.
Пример
:
Blok1
{
box-shadow: -2px 23px 42px -26px #000000;
}
Результат
:
Если добавить inset
, тогда тень
станетвнутренней
Пример
:
Blok1
{
box-shadow: -2px -34px 77px -42px #000000 inset;
}
Результат
:
Пример
:
Блок в css
Верь в лучшее, ожидай худшее.
Вкратце про тень блока я рассказал. Думаю, теме «Тень блоков» нужно будет посвятить целую статью с оригинальными примерами и с готовым кодом.
Чтобы выровнять блок по центру, я всегда использую свойство margin
.
Margin: 0 auto;
Пример
:
Блок в css
Верь в лучшее, ожидай худшее.
Результат
:
Вот вы и научились создавать блоки.
В следующем уроке поговорим о позиционировании блоков в CSS.
Рис. 1. Основные секции страницы