CSS. Урок 9 Блоки

Що таке блоки

В сучасному web дизайні контент розташовується не так як в звичайному текстовому документі, а блоками. Блоки - це прямокутні області з контентом (текст, зображення, тощо..).

Для створення блоку застосовують контейнер <div> </div>

Важливо також ознайомитись з основними властивостями блока:

1. розмір блоку - width height
2. рамка border
3. відступ від границі блоку до його вмісту - padding
4. відступ до оточення блока - margin
5. ,Прозорість
6. Тінь

   9.1 Властивості width, height:

   Ці властивості встановлюють розмір блоку - ширину та висоту відповідно.

   Якщо не вказати width, то блок розтягнеться на ширину вікна. Якщо не вказати height, то висота блока юуде залежити від контента.

   Наприклад:

   file css

   div {
   width:200px;
   height:100px;
   background-color:lightblue;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div> Text
   </div>
   </BODY> </HTML>
   • переглянути приклад

   9.2 Властивість border

   Ця властивість дозволяє побудувати рамку навколо блока. Основними характеристиками рамки є ширина, стиль та колір. В

   border: товщина стиль колір;

   Наприклад:
   border: 5px solid lightgreen;

   Популярні стилі рамки:

   solid
   
   

   dashed

   
   

   dotted

   
   

   double

   
   

   Наприклад:

   file css

   div {
   width:200px;
   height:100px;
   border: 3px solid red;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div> Text
   </div>
   </BODY> </HTML>
   • переглянути приклад

   9.3 Властивість padding

   padding - відступ від контенту до границі блока. Він потрібен для того, щоб текст контенту не "приліпав" до рамки.

   Формати використання:

   1. Якщо відступ з усіх боків різний:

   padding:значення1 значення2 значення3 значення4;

   

   Важливо, що порядок значень має бути точно таким.

   2. Якщо з усіх боків відступ однаковий:

   padding:значення;

   Наприклад:

   file css

   div {
   width:30px;
   border: 3px solid red;
   padding:20px;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div>
   Text
   </div>
   </BODY> </HTML>
   • переглянути приклад

   9.4 Властивість margin

   margin встановлює відступ від блока до оточуючого контента та створює поле навколо блоку. Значення встановлюються так як і в padding.

   Наприкалад:

   div {margin: 5px}
   

   Відступ з усіх боків 5 пікселей.

   div {margin: 5px 10px 15px 20px}
   

   Відступи:

   • верхній: 5px
   • правий: 10px
   • нижній: 15px
   • лівий: 20px

   Приклад використання базових властивостей блока

   file css

   div {
   width:400px;
   padding:10px;
   margin:20px;
   border:1px solid #7CFC00;
   background-color:#FFFAF0;
   color:#2E8B57;
   font-size:8pt;
   font-family:verdana;
   text-align:justify;
   }
   
   
   file html

   <HTML>
   <HEAD>
   <link rel="stylesheet" ref="file.css">
   </HEAD>
   <BODY>
   <div> Умань - найбільше після обласного центру місто в Черкаській області (87 тис. жителів) на берегах р. Уманка. Перша письмова згадка - 1616 р. У 2 пол. XVII ст. Умань була полковим містом. У 1768 р. тут розпочалася Коліївщина. Умань є одним з найпопу- лярніших туристичних об'єктів України завдяки ландшафтному парку "Софіївка", заснованому у 1796 р. Станіславом Потоцьким. Також Умань є місцем паломництва хасидів (тут розташована могила цадика Р. Нахмана).
   </div>
   </BODY> </HTML>
   • переглянути приклад

   9.5 Прозорість блоку opacity

   Блоки можна зробити прозорими. Осорбливо це корисно при накладанні блоку на текст чи зображення. Властивість opacity дозволяє встановити ступень прозорості від 0 до 1. Де 1 - це непрозоре тло, а 0 - повністю прозоре.

   Наприклад:

   {
   opacity 0.5; /*напівпрозоре тло*/
   }

   9.6 Тінь

   Для того, щоб налаштувати тінь в блоці, необхідно у стилі використати властивість box-shadow box-shadow має 5 параметрів:

   

   
   

   Приклад 1:

   div {
   box-shadow: 2px 2px 5px 0px;
   }

   Example

   
   

   Приклад 2:

   div {
   box-shadow: 0px 0px 10px 5px green;
   }

   Example

   Виконайте вправу №7 в зишиті..

   Виконайте вправу в редакторі html

   1. Завантажте файл з невеликим текстом про Болгарію
   2. Створіть новий HTML документ. В цьому документі створіть блок div з текстом про Болгарію.
   3. Збережить html документ у файл tur.html
   4. Створіть файл tur.css з такими правилами для блока:
      • ширина блока 250px
      • відстань від тексту до рамки 10px
      • штрихова рамка, товщиною 2px
      • поля навколо блоку 15px
      • шрифт Arial, розмір 9pt
      • Колір шрифта, фона, рамки підібрати за власним вподобанням.
   5. Підключить файл tur.css до файла tur.html

   Приблизний результат: