Лого www.SiteHere.ru

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

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

Здравствуй, уважаемый читатель.

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

Перед изучением данного урока пройдите предыдущие уроки:

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

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

В прошлом уроке мы рассмотрели что такое блочная модель, внутренние и внешние отступы. В этом мы рассмотрим лишь два свойства: высоту и ширину блока. Высота в CSS задается свойством height, а ширина свойством width. Сразу посмотрим в коде на реальном примере(возьмем пример из прошлого урока):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        <div class="firstPar">
            <p>Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</p>
            <p>Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</p>
        </div>
        <div class="secondPar">
            <p>Cras</p>
            <ul>
                <li>amet condimentum</li>
                <li>aliquam volutpat</li>
                <li>elementum interdum</li>
            </ul>
        </div>
    </div>
</body>
</html>

А в CSS для каждого блока <div class="firstPar"> зададим ширину в 200 пикселей(px):

1
2
3
4
5
6
7
8
9
10
11
12
13
#content{
    border:2px solid #FF0000; /* красная граница */
}
 
.firstPar{
    border:2px solid #0000FF; /* синяя граница */
    width:200px; /* ширина блока */
    height:280px; /* высота блока */
}
 
.secondPar{
    border:2px solid #00FF00; /* зеленая граница */
}

Посмотрим как это выглядит в браузере:

Высота и ширина блока

Как видите мы задали определенную высоту и ширину. Если бы мы задали высоту меньше, чем помещается текст, тогда бы текст вылез за пределы блока. Поэкспериментируйте с высотой и шириной. Сначала тяжело будет на глаз определять необходимый размер в пикселях, но со временем привыкнете.

Это небольшой и простой урок. Попробуйте сами изменять размеры блока и посмотрите что получиться. Практика — самый быстрый способ научиться чему-либо!

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

Урок 11. Высота и ширина блока 5.00/5 (100.00%) 5 голос(ов)

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • Иван

    Благодарю вас за понятные уроки!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

     

     

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *