Курсы HTML/CSS

Урок 13. Свойство display, практическое применение свойств CSS
- Курс 1-1
- Урок 1. Введение
- Урок 2. Атрибуты элементов. Спецсимволы
- Урок 3. Строчные элементы. Валидация документа
- Урок 4. Структура документа. Гиперссылки
- Урок 5. Введение в CSS. Основы
- Урок 6. Селекторы CSS. Псевдокласы и псевдоэлементы.
- Урок 7. CSS: свойства шрифтов, текста, фона и цвета
- Урок 8. изображения, списки и таблицы в html
- Урок 9. Таблицы (продолжение темы). Фреймы. Веб-формы
- Урок 10. Веб-формы. Продолжение темы
- Урок 11. Макетирование в CSS: рамки, внутренние и внешние отступы
- Урок 12. Переполнение контентом, управление потоком элементов
- Урок 13. Свойство display, практическое применение свойств CSS
- Урок 14. Медиатипы, курсоры, вставка аудио и видео
- Курс 1-2
- Урок 15. Символьные данные и разметка документа, правила вложения элементов, кодировки
- Урок 16. Технология SSI, новые элементы html в старых браузерах, селекторы атрибутов
- Урок 17. CSS-спрайты, селекторы псевдоклассов и псевдоэлементов, комбинации селекторов, приоритеты правил css
- Урок 18. Наследование свойств css, блочная модель браузера
- Урок 19. Margin-collapse вложенных элементов, минимальная и максимальная ширина, высота в процентах
- Урок 20. Юзабилити, схема футера, свойство background: мультифон и градиент
- Урок 21. Свойство float, "выпадение" плавающего элемента
- Урок 22. Трёхколоночный макет сайта. Относительное и абсолютное позиционирование элементов
- Урок 23. Прозрачность элементов, свойство z-index, позиционирование fixed, большая картинка на затемнённом фоне
- Урок 24. Создание анимации, сложная нумерация, статичное и выпадающее меню для сайта
- Урок 25. Favicon сайта, трансформация элементов - свойство transform, вставка flash-анимации
- Урок 26. Создание логотипа с ключевой фразой, модель flex-блоков, директива @media
- Курс 1-3
- Урок 27. Общие рекомендации при вёрстке сайтов
- Урок 28. Компонентная модель вёрстки. Веб-компоненты
- Урок 29. Макетирование страниц c применением Flexbox
- Урок 30. 3D графика, эффект Parallax
Строчные и блочные элементы: свойство display
Мы уже знаем, что <div> - это блочный элемент, а <span> - строчный. Давайте зададим этим элементам цвет фона и посмотрим, как отображаются эти элементы (прямоугольники) в браузере:
<!DOCTYPE html> <html> <head> <title>Строчные и блочные элементы</title> <style> .r {background: red;} .g {background: green;} .b {background: blue;} .y {background: yellow;} </style> </head> <body> <!-- Блочные элементы DIV --> <div class="r">Элемент DIV 1</div> <div class="g">Элемент DIV 2</div> <div class="b">Элемент DIV 3</div> <div class="y">Элемент DIV 4</div><hr /> <!-- Строчные элементы SPAN --> <span class="r">Элемент SPAN 1</span> <span class="g">Элемент SPAN 2</span> <span class="b">Элемент SPAN 3</span> <span class="y">Элемент SPAN 4</span> </body> </html>
Вид в браузере:

Обратите внимание на выстраивание прямоугольников строчных и блочных элементов в браузере.
Свойство display позволяет изменить поведение строчных элементов на блочные и обратно. У него много возможных значений, но основные, которые нам сейчас пригодятся - это:
none - элемент не отображается вообще;
block - элемент становится блочным;
inline - элемент становится строчным;
inline-block - элемент становится строчно-блочным;
table-cell - элемент становится ячейкой таблицы;
list-item - преобразование в элемент списка.
К строчно-блочным (inline-block) элементам относятся картинки и элементы форм (поля ввода текста, кнопки).
Вывод таков: элементы ведут себя в браузере как строчные или как блочные только потому, что у них по умолчанию задан тот или иной тип (значение) display. В примере выше можно переопределить поведение строчных элементов на блочные, а блочных на строчные (см. пример ниже).
<!DOCTYPE html> <html> <head> <title>Переопределение свойства display</title> <style> .r {background: red;} .g {background: green;} .b {background: blue;} .y {background: yellow;} div {display: inline;} span {display: block;} </style> </head> <body> <!-- Блочные элементы DIV стали строчными --> <div class="r">Элемент DIV 1</div> <div class="g">Элемент DIV 2</div> <div class="b">Элемент DIV 3</div> <div class="y">Элемент DIV 4</div><hr /> <!-- Строчные элементы SPAN стали блочными --> <span class="r">Элемент SPAN 1</span> <span class="g">Элемент SPAN 2</span> <span class="b">Элемент SPAN 3</span> <span class="y">Элемент SPAN 4</span> </body> </html>
Вид в браузере:

Таким образом, в CSS можно переназначить абсолютно все на свой вкус и цвет.
Итак, мы изучили оформление и макетирование в CSS. Теперь рассмотрим дополнительные возможности HTML и CSS.
Практическое применение HTML и свойств CSS
Предположим, у нас есть заказ сделать такую страницу:
Эту задачу можно решить множеством различных способов, но мы выберем такой, чтобы закрепить как можно больше изученных свойств CSS.
Для начала сверстаем чистый html-код:
<!DOCTYPE html> <html> <head> <title>Сайт о путешествиях</title> <link rel="stylesheet" href="style.css"/> </head> <body> <!-- "Шапка" сайта --> <div id="header"> <span id="sait">Путешествия по странам</span> <span id="sait2">сайт о путешествиях</span> </div><hr /> <!-- Левое меню --> <div id="left_menu"> <!-- Пункты меню делаем в виде двух маркированных списков --> <ul> <li><a href="#">Обзор стран</a></li> <li><a href="#">Обзор городов</a></li> <li><a href="#">О сайте</a></li> <li><a href="#">Контакты</a></li> </ul> <p id="obzory">Последние обзоры</p> <ul> <li><a href="#">Чикаго</a></li> <li><a href="#">Китай</a></li> <li><a href="#">Манхеттен</a></li> <li><a href="#">Нью-Йорк</a></li> </ul> </div> <!-- Статья сайта --> <div id="content"> <h1>Добро пожаловать на сайт о путешествиях</h1> <p>Сюда вставляем содержимое первого абзаца</p> <p>Сюда вставляем содержимое второго абзаца</p> </div> </body> </html>
Значение решетки (#) в href - это "заглушка" ссылка ссылается на свою же страницу. Значения href нам сейчас не нужны, мы делаем только одну страницу.
В результате мы получаем такую картину чистого html-кода.
Теперь перейдем к файлу CSS:
Файл style.css ========================= #header { width: 100%; height: 50px; } #sait { float: left; font-size: 2em; font-weight: bold; } #sait2 { float: right; margin-top: 30px; color: #777777; } #left_menu { float: left; width: 200px; } ul li { list-style-type: none; margin: 0 0 10px -20px; } a { text-decoration: none; } #obzory { font-size: 1.3em; font-weight: bold; } h1 { text-align: center; } hr { margin: 0 10px; } #content { margin: 0 0 0 210px; }
Свойство text-align выравнивает содержимое элемента по горизонтали родительского элемента (в нашем случае - по горизонтали элемента <div> c id="content"). Его часто используемые значения:
center - выравнивание по центру;
justify - выравнивание по ширине (в этом случае при необходимости добавляются пробелы);
left - выравнивание по левому краю;
right - выравнивание по правому краю;
inherit - наследует значение родителя.
Попробуйте выполнить это задание самостоятельно с подглядкой в пример и посмотрите, как меняется поведение элементов с применением каждого свойства CSS (код html можно копировать прямо из примера).
Для указания размеров шрифта чаще всего оперируют единицей измерения em или %. em - это ширина буквы "M" латинского алфавита. 1em - это текущий размер шрифта. Значения em можно указывать и десятичными дробными долями, например 1.5em, 0.8em. Обратите внимание, при указании дробных долей ставится точка, а не запятая. Проценты опять-таки указываются относительно текущего размера шрифта.
Правила указания селекторов для вложенных элементов в CSS
В последнем примере в CSS есть вложенные элементы, у которых задан id. В случае вложенности браузер, увидев правило CSS начинает перебирать все вложенные элементы в поисках нужного id или другого указанного элемента, что при больших страницах и множестве правил CSS замедляет загрузку страницы. Чтобы избежать этого, в CSS нужно указывать прямой путь к вложенному элементу.
Указание полного пути до элемента в CSS код html: ======================= ... <div> <p class="x"</p> <span id="y"> Элемент кода с id="y"</span> </p> </div> ... в CSS через пробел указываем полный путь до элемента SPAN с id="y": ================================================ div .x #y {color: red;}
Это правило CSS можно прочитать так: элементу с id="y", родителем которого является элемент с классом x, вложенный в <div>, задать красный цвет текста.
Макетирование в CSS желательно начинать с общего правила обнуления всех отступов по умолчанию: * {margin: 0; padding: 0;} и после этого уже начинать что-то куда-то двигать через CSS.
Свойства border (рамка элемента) и background (цвет фона элемента) значительно облегчают макетирование, т.к. делают прямоугольники различных элементов html видимыми. Поэтому при макетировании советую временно использовать эти свойства CSS для того чтобы увидеть границы элементов.
