Как стилями сделать блок

Как стилями сделать блок 783


Как стилями сделать блок 50


Как стилями сделать блок 562


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


13.03.2017


21:24


5943


пока нет


Блоки в 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.

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

 

Предыдущая запись
Рамка в CSS. Основы CSS для начинающих. Урок №12 Следующая запись
Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14

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



Как стилями сделать блок 198


Как стилями сделать блок 203


Как стилями сделать блок 780


Как стилями сделать блок 746


Как стилями сделать блок 749


Как стилями сделать блок 129


Как стилями сделать блок 914


Как стилями сделать блок 690


Как стилями сделать блок 216


Как стилями сделать блок 483


Как стилями сделать блок 66


Как стилями сделать блок 505


Как стилями сделать блок 413


Как стилями сделать блок 41


Как стилями сделать блок 823



Похожие новости:

  • Китайские шелковые нитки для вышивки
  • Как сделать свой праздник
  • У меня 32 битная система как сделать 64
  • Поздравление с днём рождением женьку
  • Игрушки для дня рождения своими руками