Урок 11. Висота і ширина блоку

Здрастуй, шановний читачу.

Відео: Урок 11 - Ширина, висота (min, max)

Це одинадцятий урок вивчення CSS. В даному уроці ми розглянемо лише два прості але важливі властивості. Ці властивості відповідають за висоту і ширину блока.

Перед вивченням даного уроку пройдіть попередні уроки:

Відео: Цикл уроків з основ CSS - Ширина і висота блоку, вирівнювання

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель

Теорія та практика

У минулому уроці ми розглянули що таке блокова модель, внутрішні і зовнішні відступи. В цьому ми розглянемо лише два властивості: висоту і ширину блоку. Висота в CSS задається властивістю height, а ширина властивістю width. Відразу подивимося в коді на реальному прикладі (візьмемо приклад з минулого уроку):

1234567891011121314151617181920212223

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Content"gt;lt;div class="FirstPar"gt;lt;pgt; Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.lt;/pgt;lt;pgt; Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.lt;/pgt;lt;/divgt;lt;div class="SecondPar"gt;lt;pgt; Craslt;/pgt;lt;ulgt;lt;ligt; amet condimentumlt;/ligt;lt;ligt; aliquam volutpatlt;/ligt;lt;ligt; elementum interdumlt;/ligt;lt;/ulgt;lt;/divgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

А в CSS для кожного блока поставимо ширину в 200 пікселів (px):

12345678910111213

#content{border:2px solid # FF0000- / * Червона межа * /}.firstPar{border:2px solid # 0000FF- / * Синя границя * /width:200px- / * Ширина блоку * /height:280px- / * Висота блоку * /}.secondPar{border:2px solid # 00FF00- / * Зелена межа * /}

Відео: Урок 11-13. Стилі для блоків. Стиль: width, height

Подивимося як це виглядає в браузері:

Відео: Ширина і висота блоку, виравніваніе.Урок 19

Як бачите ми задали певну висоту і ширину. Якби ми поставили висоту менше, ніж поміщається текст, тоді б текст виліз за межі блоку. Експериментуйте з висотою і шириною. Спочатку важко буде на око визначати необхідний розмір в пікселях, але з часом звикнете.

Це невеликий і простий урок. Спробуйте самі змінювати розміри блоку і подивіться що вийде. Практика - найшвидший спосіб навчитися чогось!

Більше практикуйтеся!