StepkinBlog.top
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
13.03.2017
21:24
26333
3
Блоки в 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.
Подписывайтесь на обновление!
Случайные записи:
- Как прописать мета теги. Основы HTML для начинающих. Урок №21
- Тег div в HTML. Основы HTML для начинающих. Урок №17
- Вкладки. Основы bootstrap 3 для начинающих. Урок №21
- Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
- Сворачивание (аккордеон). Основы bootstrap 3 для начинающих. Урок №22
Спасибо! Очень понятные уроки! Подпишусь и буду изучать
Пожалуйста, Lia!!! Приятно, что Вам понравились мои уроки
.
все круто, но вот с тенями я если честно не совсем понял. пришлось читать дополнитльно