Блоки в CSS. Основы CSS для начинающих. Урок №13

RUS | ANG |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Блоки в CSS. Основы CSS для начинающих. Урок №13

13.03.2017

21:24

24657

Блоки в CSS. Основы CSS для начинающих. Урок №13

Всем привет!
В сегодняшнем уроке я расскажу о том, что такое блоки и как в CSS можно ими управлять, например, задавать отступы, менять внутри фон и цвет и т.д.
Итак, что называется блоками?

Блоки – это элементы, которые не могут находиться на одной строке с другими блоками и они отделяются абзацами.
К блочным элементам относят:

<h1>...<h6> - заголовки
<p> - параграфы
<div> - блок для верстки веб-страницы (каркас сайта). Вовнутрь блока DIV можно вложить картинки, другие блочные и неблочные элементы.

Что такое блочные элементы вы поняли, а что же тогда неблочные?

Неблочные элементы – это элементы, которые могут находиться на одной строке с другими неблочными элементами и они не отделяются абзацами.

К неблочным элементам относят:

<strong> - выделить текст жирным;
<em> - выделить текст курсивом;
<u> - подчеркнуть текст
и т.д.

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

<html>
<head>
<title>Блок в css</title>
</head>
<body>
<div class="blok1">Блок в css -1. </div>
<h2 class="blok2">Блок в css - 2. </h2>
<p class="blok3">Блок в css - 3. </p>
</body>
</html>

В результате:

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

Рамка блока в CSS

Свойство «BORDER»
Я частенько использую рамку, когда создаю веб-страницы. Рамки мне помогают увидеть, где начинается блок и где заканчивается. Это мне упрощает работу. Также рамку можно использовать для оформления блоков.
Чтобы создать к блокам рамки, пропишите уже известное вам правило «border».

Синтаксис:

border: толщина_рамки вид_рамки цвет_рамки;

Пример:

<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
border:5px dotted #cc0000; /* рамка блока */
}
.blok2
{
border:5px dashed green; /* рамка блока */
}
.blok3
{
border:5px double #000; /* рамка блока */
}
</style>
</head>
<body>
<div class="blok1">Блок в css -1. </div>
<h2 class="blok2">Блок в css - 2. </h2>
<p class="blok3">Блок в css - 3. </p>
</body>
</html>

Если вы не поняли, где и куда я вписал CSS, то обратите внимание на строки от 4 до 17. И если у вас появился все же такой вопрос, что это я сделал, тогда повторите урок №3 – «Как подключить CSS».

Результат:

Теперь можно видеть границы блока, а когда видны границы, тогда легче с блоками работать.

Отступы от блока в CSS

Свойство «MARGIN»
Чтобы задать расстояние (отступ) от блока используют правило «margin».
Обратите внимание на схему. Параметры задаются от блока:

Свойства:

top – верхняя сторона
right – правая сторона
bottom – нижняя сторона
left – левая сторона

Пример:

margin-top:30px; /* верхняя сторона */
margin-right:70px; /* правая сторона */
margin-bottom:90px; /* нижняя сторона */
margin-left:120px; /* левая сторона */

Сокращенная форма записи

Можно все, что я прописал для отступа при каждом блоке записать отдельно сокращенной формой:

Синтаксис:

margin: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

Пример:

margin:30px 70px 90px 120px; /* сокращенная форма записи */

Пропишите в HTML файле вот так:

<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
border:5px dotted #cc0000; /* рамка блока */
margin-top:30px; /* верхняя сторона */
margin-right:70px; /* правая сторона */
margin-bottom:90px; /* нижняя сторона */
margin-left:120px; /* левая сторона */

}
.blok2
{
border:5px dashed green; /* рамка блока */
margin:30px 70px 90px 120px; /* сокращенная форма записи */
}
.blok3
{
border:5px double #000; /* рамка блока */
margin: 100px; /* сокращенная форма записи */
}
</style>
</head>
<body>
<div class="blok1">Блок в css -1. </div>
<h2 class="blok2">Блок в css - 2. </h2>
<p class="blok3">Блок в css - 3. </p>
</body>
</html>

Результат:

Если задать один параметр к правилу «margin» (Строка №22):

margin:100pх; /* сокращенная форма записи */

то расстояние от блока со всех сторон будет 100 px.

Отступы внутри блока в CSS

Свойство «PADDING»
Чтобы задать расстояние (отступ) внутри блока, используют правило «padding».
Обратите внимание на схему:

Свойства:

top – верхняя сторона
right – правая сторона
bottom – нижняя сторона
left – левая сторона

Пример:

padding-top:30px; /* верхняя сторона */
padding-right:70px; /* правая сторона */
padding-bottom:90px; /* нижняя сторона */
padding-left:120px; /* левая сторона */

Сокращенная форма записи

Можно все, что я прописал выше записать сокращенной формой.

Синтаксис:

padding: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;

Пример:

padding:30px 70px 90px 120px; /* сокращенная форма записи */

Пропишите в HTML файле вот так:

<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
border:5px dotted #cc0000; /* рамка блока */
padding-top:30px; /* верхняя сторона */
padding-right:70px; /* правая сторона */
padding-bottom:90px; /* нижняя сторона */
padding-left:120px; /* левая сторона */
}
.blok2
{
border:5px dashed green; /* рамка блока */
padding:30px 70px 90px 120px; /* сокращенная форма записи */
}
.blok3
{
border:5px double #000; /* рамка блока */
padding:50px; /* сокращенная форма записи */
}
</style>
</head>
<body>
<div class="blok1">Блок в css -1. </div>
<h2 class="blok2">Блок в css - 2. </h2>
<p class="blok3">Блок в css - 3. </p>
</body>
</html>

Результат:

Если задать один параметр к правилу «padding» (строка № 21):

padding:50px; /* сокращенная форма записи */

то расстояние внутри блока со всех сторон будет 50 px.

Ширина и высота блока в CSS

Свойство «WIDTH» и «HEIGHT»
Вы можете создать ширину и высоту блока. Для этого используйте правила «width» - ширина и «height» - высота.

Синтаксис:

height - высота блока;
width- ширина блока;

Значение:
Значение задается в px или %.

Пример:

width: 600px; /* ширина блока */
height: 250px; /* высота блока */

Я думаю, как вставлять правило в CSS объяснять не нужно, заодно проверю, как вы освоили урок №3 о том, как подключить CSS.

Результат:

У блока будет фиксированная ширина и высота.

Если вам нужен нефиксированный, а резиновый блок (блок который растягивается по длине монитора), тогда вместо px, нужно указать %. Только помните: весь монитор – это 100%.

Пример:

width: 90%; /* ширина резинового блока */

Фон блока в CSS

Свойство «BACKGROUND»
Правило «background» вы уже знаете, потому не вижу смысла повторяться.
А кто не знает, милости просим на страницу с уроком №9.

Пример:

<html>
<head>
<title>Блок в css</title>
<style type="text/css">
.blok1
{
background: #00FF00;
height: 50px;
width: 250px;
border:2px dotted #cc0000;
padding:20px;
margin:50px 20px 80px 150px;
}
</style>
</head>
<body>
<div class="blok1">
Блок 1.
</div>
</body>
</html>

Строка № 7 – правилом «background» мы заменили фон зеленным цветом

Результат:

Можно залить фон не только цветом, но и картинкой:

background-image: url(bg.gif); /* Фоновая картинка */

Пример:

<html>
<head>
<title>Блок в css</title>
<style type="text/css">
.blok1
{
background-image: url(bg.gif); /* Фоновая картинка */
height: 50px; /* высота*/
width: 250px; /* ширина */
border:2px dotted #cc0000; /* рамка */
padding:20px; /* отступы внутри блока*/
margin:50px 20px 80px 150px; /*отступы от блока*/
}
</style>
</head>
<body>
<div class="blok1">
Блок 1.
</div>
</body>
</html>

Строка № 7 – правилом «background-image» мы заменили фон фоновой картинкой.
bg.gif – это картинка фона.

Результат:

ДОПОЛНЕНИЕ

Прозрачность блока в CSS

Свойство «OPACITY»
Блок можно сделать прозрачным, используя CSS правило «opacity».

Синтаксис:

opacity: значение;

Значение:
в значениях задается число в диапазоне от 0 до 1.

Значение 0 – полная прозрачность блока.
Значение 1 – непрозрачность блока (блок останется такой как есть).
Значение в дробях (0.5) – полупрозрачность блока.

Пример:

<html>
<head>
<title>Блок в css</title>
<style type="text/css">
body
{
background-image: url(bg.gif); /* Фоновая картинка */
}
.blok1
{
height: 50px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
padding:20px; /* отступ внутри*/
margin:50px 20px 80px 150px; /* отступ от блока*/
background: #ccc; /* Фоновый цвет */
opacity: 0.5; /* прозрачность блока*/
}
</style>
</head>
<body>
<div class="blok1">
<p>Блок 1.</p>
</div>
</body>
</html>

Результат:

Скрыть блок в CSS

Свойство «DISPLAY»
Правило «display» поможет скрыть блок веб странице. Зачастую это правило используется в выпадающем меню или когда нужно скрыть некоторые блоки в мобильной версии сайта.

.blok1{display:none;}

Свойство «OPACITY»
Правило «opacity» поможет тоже скрыть блок веб-странице.

.blok1{opacity: 0;}

Свойство «VISIBILITY»
«visibility» – это еще одно правило, которое тоже поможет скрыть блок веб- страници. К правилу «visibility» пропишите значение «hidden»:

.blok1{visibility: hidden;}

Свойство overflow

Свойство «OVERFLOW»
С правилом «overflow» можно определить, что будет предприниматься, если содержимое элемента превзойдет его размер. Например, картинка или текст больше, чем сам блок.

Синтаксис:

overflow: значение;

Значение:

Visible - указывает, что при переполнении элемента содержимым, оно не будет обрезаться, а просто выйдет за рамки (значение по умолчанию).
Hidden - указывает, что контент, который не помещается в элемент, будет обрезан (обрезанная часть будет невидимая).
Scroll- указывает, что контент, который не помещается в элемент, будет обрезан, но для просмотра обрезанной части, можно будет воспользоваться полосой прокрутки.
Auto - при переполнении элемента содержимым, полосы прокрутки добавляются автоматически.

Пример с «Visible» (значение по умолчанию):


<html>
<head>
<title>Блок в css</title>
<style>
.blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: visible;
}

</style>
</head>
<body>
<div class="blok1">
<p>Блок 1.</p>
<img src="heder.png">
</div>
</body>
</html>

Результат:

Пример с «Hidden»:

.blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: Hidden;
}

Результат:

Пример с «Scroll»:

.blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: Scroll;
}

Результат:

Пример с «Auto»:

.blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: auto;
}

Результат:

Тень блока в CSS

Свойство «BOX-SHADOW»
Можно от блока сделать тень. Правило «box-shadow».

Синтаксис:

- inset – тень внутри элемента, без inset тень будет наружу;
box-shadow: 0 0 5px – тень вокруг элемента

box-shadow: inset 0 0 5px; - тень внутри
сдвиг тени по горизонтали (6 px — вправо, 6 px — влево);
сдвиг по вертикали (6 px — вниз, 6 px — вверх);
размытие тени (0 — четкая тень);
растяжение тени (3 px — растяжение, 3 px — сжатие);
цвет тени

Пример:

.blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:1px solid #ccc; /*рамка */
box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*тень блока*/
}

Результат:

Выравнивание блока по центру

Свойство «MARGIN»
Чтобы выровнять блок по центру, пропишите для правила «margin» значение «0 auto»:

margin: 0 auto;

Пример:

.blok1
{
height: 100px; /* высота */
width: 100px; /* ширина */
border:1px solid #ccc; /*рамка */
margin: 0 auto;
}

Вот и все! Пора заканчивать этот урок, а то великоват он получился! Да и храпы за пределами монитора уже слышу .
Еще чуть-чуть и мы закончим изучать основы CSS.

Подписывайтесь на обновление!

Случайные записи:

Последние записи рубрики:

3 ответа(ов) на статью: “Блоки в CSS. Основы CSS для начинающих. Урок №13”

Lia says:

20.04.2019 в 05:55

Спасибо! Очень понятные уроки! Подпишусь и буду изучать

Ответить
Степка ответил(а) на комментарий:
22 апреля, 2019 at 16:17

Пожалуйста, Lia!!! Приятно, что Вам понравились мои уроки .

Ответить
Саша says:

14.04.2020 в 20:30

все круто, но вот с тенями я если честно не совсем понял. пришлось читать дополнитльно

Ответить

StepkinBlog.ru

Блоки в CSS. Основы CSS для начинающих. Урок №13

Рамка блока в CSS

Отступы от блока в CSS

Отступы внутри блока в CSS

Ширина и высота блока в CSS

Фон блока в CSS

ДОПОЛНЕНИЕ

Прозрачность блока в CSS

Скрыть блок в CSS

Свойство overflow

Тень блока в CSS

Выравнивание блока по центру

Случайные записи:

Последние записи рубрики:

3 ответа(ов) на статью: “Блоки в CSS. Основы CSS для начинающих. Урок №13”

Добавить комментарий

Подписаться на обновления:

Разные темы:

Реклама на блоге:

Последние записи на блоге:

Мои цели на
2019 год:

Облако меток:

Статистика:

StepkinBlog.ru

Блоки в CSS. Основы CSS для начинающих. Урок №13

Рамка блока в CSS

Отступы от блока в CSS

Отступы внутри блока в CSS

Ширина и высота блока в CSS

Фон блока в CSS

ДОПОЛНЕНИЕ

Прозрачность блока в CSS

Скрыть блок в CSS

Свойство overflow

Тень блока в CSS

Выравнивание блока по центру

Случайные записи:

Последние записи рубрики:

3 ответа(ов) на статью: “Блоки в CSS. Основы CSS для начинающих. Урок №13”

Добавить комментарий

Подписаться на обновления:

Разные темы:

Реклама на блоге:

Последние записи на блоге:

Мои цели на 2019 год:

Облако меток:

Статистика:

Мои цели на
2019 год: