Загрузка

RUS | ANG | |

StepkinBlog.ru

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

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

13.03.2017


21:24


6888


пока нет


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

Блоки в 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. Основы CSS для начинающих. Урок №13

Теперь в 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. Основы CSS для начинающих. Урок №13

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

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

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

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

Свойства:

  • 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>

Результат:

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

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

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

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

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

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

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

Свойства:

  • 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>

Результат:

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

Если задать один параметр к правилу «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» мы заменили фон зеленным цветом

Результат:

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

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

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. Основы CSS для начинающих. Урок №13

ДОПОЛНЕНИЕ

Прозрачность блока в 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. Основы CSS для начинающих. Урок №13

Скрыть блок в 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>

Результат:

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

Пример с «Hidden»:

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

Результат:

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

Пример с «Scroll»:

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

Результат:

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

Пример с «Auto»:

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

Результат:

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

Тень блока в CSS

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

Синтаксис:

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

Пример:

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

Результат:

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

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

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

margin: 0 auto;

Пример:

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

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

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

 



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

  1. Таблицы. Основы bootstrap 3 для начинающих. Урок №13
  2. Как прописать мета теги. Основы HTML для начинающих. Урок №21
  3. Бегущая строка на HTML. Основы HTML для начинающих. Урок №9
  4. Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
  5. PHP операторы. Основы PHP с нуля. Урок №8

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

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Подпишись на обновления моего блога через e-m@il:

@

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

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245