Октябрь 22, 2019 Запись была обновлена
Урок 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 для каждого блока зададим ширину в 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; /* зеленая граница */ } |
Посмотрим как это выглядит в браузере:
Как видите мы задали определенную высоту и ширину. Если бы мы задали высоту меньше, чем помещается текст, тогда бы текст вылез за пределы блока. Поэкспериментируйте с высотой и шириной. Сначала тяжело будет на глаз определять необходимый размер в пикселях, но со временем привыкнете.
Это небольшой и простой урок. Попробуйте сами изменять размеры блока и посмотрите что получиться. Практика — самый быстрый способ научиться чему-либо!
Больше практикуйтесь!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Благодарю вас за понятные уроки!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Привет!
Не могу задать размер для группы Фб, таков скрипт- 2 кода:
1)
2)
data-width=»157″ не слушается, 180 всё время размер-меньше не идет-а вот больше размер идет…
Добрый день!
Чтобы разместить код в комментариях, заключите в тег:
<pre class="EnlighterJSRAW" data-enlighter-language="html">
HTML code
</pre>
<pre class=»EnlighterJSRAW» data-enlighter-language=»html»>
</pre>
Все верно, только кавычки скопируйте из моего примера, тогда получится разместить код.
код между кавычек?
У вас было все верно, кроме кавычек, скопируйте, как в этом примере:
<pre class="EnlighterJSRAW" data-enlighter-language="html">
Здесь разместить HTML код
</pre>
<pre class=»EnlighterJSRAW» data-enlighter-language=»
«>
HTML code
</pre>
нее, не понятно
тогда просто заключите код в тег <code>Здесь HTML код</code>