Браузер обрабатывает все элементы как небольшие блоки. Для него любой элемент — контейнер с содержимым: текстом, изображением или другими элементами. Область внутри границ, которая включает контент и отступы, может также иметь цвет фона. Он находится под границей, поэтому, когда вы используете пунктирную или точечную границу, цвет отображается в промежутках между отрезками или точками.
Блок элемента окружают следующие свойства:
- padding — отступ, пространство между контентом и границей.
- border — граница, линия вдоль каждого края блока. Граница может отобра- жаться как для всех сторон сразу, так и для любой из них или комбинации сторон.
- margin — поле, отделяет один элемент от другого. К примеру, пространство, обычно отображаемое сверху и снизу абзацев текста, — это поля.
Нередко требуется одновременно установить одинаковые размеры полей или
отступов для всех четырех сторон форматируемого элемента. Но последовательно
набирать четыре различных свойства стиля (margin-right, margin-left и т. д.)
утомительно и отнимает лишнее время. Здесь вы также можете использовать
сокращенные варианты свойств margin и padding для быстрой установки всех четырех
параметров одновременно:
margin: 0 10px 10px 20px; padding: 10px 5px 5px 10px;
ПРИМЕЧАНИЕ Если свойству присваивается значение 0, то совсем не нужно указывать единицу измерения. На- пример, наберите всего лишь
margin: 0; вместо margin: 0px;.
Порядок определения четырех значений свойств margin и padding важен. Они
должны указываться в следующей последовательности: сверху, справа, снизу
и cлева. Без учета этого у вас могут возникнуть проблемы с форматированием.
Самый легкий способ запомнить очередность — сверху вниз по часовой стрелке.
Если вы хотите применить одинаковое значение свойства для всех четырех сторон,
нет ничего проще — используйте единственное значение. Чтобы удалить все
поля из заголовка h1, добавьте такой стиль:
h1 { margin: 0; }
Кроме того, пользуйтесь сокращенной записью для добавления промежутков
между содержимым и границами элемента:
padding: 10px;
Хотя браузеры и обрабатывают любой тег веб-страницы подобно блочному элементу,
на самом деле они не все одинаковы. В CSS существует два различных типа
элементов: блочные и строчные.
В блочных элементах создается разрыв строки перед элементом и после него.
Например, абзац p создает блок, отделенный от элементов, расположенных выше
и ниже его. Другими примерами являются заголовки, контейнеры div, таблицы,
списки и элементы списков.
Строчные элементы не создают разрывов строк ни до, ни после себя. Они отображаются на одной строке с содержимым рядом стоящих элементов. Элемент
strong — строчный. Слово, отформатированное с его помощью, будет расположено
на одной строке с текстом, заключенным в другие строчные элементы, например
em. Было бы очень странно, если бы отдельное слово в середине абзаца, выделенное
strong, вдруг появилось на отдельной строке. Другими примерами строчных элементов
являются img — для добавления изображений, a — для создания ссылок,
различные элементы для разметки форм и т. д.
В большинстве случаев каскадные таблицы стилей одинаково работают со строчными и
блочными элементами. Можно применять шрифты, цвет, фон, границы к обоим типам элементов.
Однако поля и отступы строчных элементов браузеры обрабатывают
по-другому. Если добавить поля или отступы слева или справа строчного
элемента возможно, то посредством установки верхнего или нижнего отступа или поля увеличить
высоту строчного элемента не удастся.
Если вы хотите, чтобы верхние и нижние поля
были применимы к строчному элементу, используйте инструкцию display:inline-block.
Она оставит элемент строчным, но он будет восприниматься как блочный,
поэтому отступы, поля, границы, ширина и высота будут к нему применимы.
Иногда требуется, чтобы строчные элементы вели себя так же, как блочные, или
наоборот. Маркированные списки представляют элементы в виде отдельных блоков,
то есть каждый элемент списка располагается в стеке поверх следующего. Но что
делать, если вы хотите изменить поведение пунктов списка таким образом, чтобы все
они располагались рядом друг с другом, на одной строке? Или, возможно,
вы захотите, чтобы строчный элемент обрабатывался как блочный, например,
изображение, встроенное в абзац текста, было расположено на отдельной строке,
с верхним и нижним промежутками-интервалами.
В языке CSS есть команда, которая позволяет вам это сделать, — это свойство
display. С его помощью можно заставить блочный элемент функционировать как
строчный:
display: inline;
Или, наоборот, вы можете сделать так, чтобы строчные элементы, например изображение или ссылка, вели себя как блочные: display: block; Наконец, вы можете заставить элемент действовать и как блочный, и как строчный. Значение inline-block не создает разрывов ни до, ни после элемента и одновременно заставляет элемент подчиняться верхним и нижним полям и отступам, а также настройкам высоты:
display: inline-block;
Граница представляет собой обычную линию, которая очерчивает форматируемый элемент. Она располагается между отступом и полем элемента. Пример правила описывающего границу:
p {
border-style: double; /* Стиль рамки вокруг параграфа */
border-width: 3px 7px 7px 4px; /* Толщина границы */
border-color: green;
}
С помощью границ, добавленных со всех сторон, можно заключить изображение в рамку или выделить баннер и т. д. Вы можете управлять тремя различными свойствами любой из границ: color (цвет), width (ширина) и style (стиль). Значение color может быть представлено шестнадцатеричным числом, ключевым словом или значением в системе RGB (или RGBA). Ширина границы width — толщина линии, используемой для очерчивания. Вы можете указывать любые единицы измерения каскадных таблиц стилей (кроме процентов) или ключевые слова thin (тонкая линия), medium (средняя) и thick (толстая). Самые распространенные и понятные единицы измерения для данного свойства — пикселы. И наконец, свойство style управляет типом линии границы. Существует множество различных стилей. Например, значение solid рисует сплошную линию, а dashed — штриховую (пунктирную). В каскадных таблицах стилей для гра- ниц имеются следующие стили: solid, dotted, dashed, double, groove, ridge, inset, outset, none и hidden. Ключевые слова none и hidden работают одинаково: они полностью уда- ляют границы. Но значение none удобно использовать для удаления границы с одной стороны элемента. Самая простая граница — сплошная (solid).
Наиболее простое и понятное свойство — border, которое добавляет границы с заданными параметрами:
border: 4px solid rgb(255,0,0);
Стиль создает сплошную красную границу с толщиной линии 4 пиксела. Вы
можете использовать это свойство для создания простейшей рамки, окаймляющей
изображение, панель навигации или любой другой элемент, которые надо выделить в отдельный блок.
ПРИМЕЧАНИЕ Последовательность указания свойств не имеет значения: border: 4px solid rgb(255,0,0); работает так же, как border: rgb(255,0,0) solid 4px;.
Вы можете управлять границей с каждой стороны элемента отдельно, используя
соответствующее свойство: border-top, border-bottom, border-left или border-right.
Они работают точно так же, как стандартное свойство border, с тем исключением,
что управляют границей только с одной стороны форматируемого элемента.
Добавить красную пунктирную линию снизу можно, используя следующее объявление
свойства:
border-bottom: 2px dashed red;
Как уже ранее упоминалось, браузеры рассматривают все элементы как строго прямоугольные блоки. Это становится очевидным при установке границы вокруг абзаца или элемента div. На этот случай есть возможность сгладить острые углы таких прямоугольников, добавив к стилям скругленные углы. В языке CSS представлено свойство border-radius, позволяющее дизайнерам добавлять скругления к одному или нескольким углам элемента. В самом простом варианте свойство border-radius получает одно значение, которое затем применяется ко всем четырем углам элемента:
.specialBox {
background-color: red;
border-radius: 20px;
}
В этом практикуме мы исследуем элементы блочной модели CSS, потренируемся в настройке пространства вокруг объектов веб-страниц, применим к элементам красочные границы, научимся управлять размерами и обтеканием элементов веб-страниц. Файлы текущего практикума находятся в папке 07.
Начнем с простого HTML-файла, содержащего внутреннюю таблицу стилей со сбросом стандартных настроек стилей CSS. Пока на странице нет ничего интересного. Страница представляет собой простой HTML-документ и содержит единственный стиль, сбрасывающий множество встроенных настроек форматирования браузера. Она будет выглядеть намного лучше после изменения с использованием блочной модели CSS.
-
Откройте в редакторе HTML-кода страницу main.css из папки 07. Эта таблица стилей уже связана с файлом index.html. Так же с файлом index.html связана таблица стилей reset.css, о которой мы говорили выше. Она удаляет все поля, отступы, установленные значения размеров шрифта, начертания шрифта из наиболее значимых блочных элементов и устраняет множество кросс-браузерных проблем с отображением элементов, с которыми вы могли столкнуться из-за этих свойств. Наверное, наиболее важные свойства в нем — margin и padding, установленные в первом стиле. Существует достаточное количество кросс-браузерных странностей, связанных с этими двумя свойствами, поэтому вы должны всегда обнулять их и начинать с чистого листа.
-
В файле main.css добавьте:
html { background-color: rgb(253,248,171); }Этот стиль устанавливает светло-желтый фон для страницы. Если вы хотите задать цвет для фона веб-страницы, свойство background-color можно добавлять либо к элементу html, либо к body. Далее мы добавим поля, границы и другие свойства элемента body.
ПРИМЕЧАНИЕ Возможно, вы привыкли вместо задания цвета по модели RGB использовать шестнадцатеричные значения (например, #FDF8AB). Чтобы осуществлять преобразования между этими двумя моделями, можно воспользоваться онлайн-конвертером по адресу colorhexa.com. Но предпочтительнее применять модель RGB, поскольку ее вариация RGBA, имеющая дополнительный параметр прозрачности, достаточно полезна, чтобы остановиться на одной системе указания цвета (RBG), а не смешивать две (RGB и шестнадцатеричные значения).
-
Добавьте еще один стиль в таблицу:
body { background-color: rgb(255,255,255); border: 3px solid rgb(75,75,75); }Этот стиль добавляет к элементу body белый цвет фона и темно-серую сплошную границу шириной 3 пиксела. Поскольку body расположен внутри элемента html, браузер считает, что он находится «поверх» элемента html, и белый цвет покроет фон желтого цвета, установленный на предыдущем шаге. Далее мы зададим ширину элемента body и настроим его отступы и поля.
-
Измените стиль элемента body, который вы только что создали, добавив пять новых свойств:
body { ... max-width: 760px; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 15px; }Свойство max-width ограничивает тело (элемент body) страницы 760 пикселами по ширине: если окно браузера посетителя окажется шире, чем 760 пикселов, он увидит фоновый цвет элемента html и область шириной 760 пикселов с белым фоном элемента body. Если же окно браузера станет уже указанного размера, блок текста также сузится, заполняя окно, что упрощает просмотр страницы на небольших экранах планшетов и смартфонов. Свойство margin-top добавляет 20 пикселов пространства от верхнего края окна браузера, смещая содержимое элемента body немного вниз, а левое и правое поля центрируют его, размещая в середине окна браузера. Значение auto — это еще один способ сообщить браузеру: «Разбирайся в этом сам», и, поскольку оно применяется как к левому, так и к правому полям, браузер создает одинаковые промежутки слева и справа.
ПРИМЕЧАНИЕ Вы можете также использовать сокращенную запись свойства margin, устанавливая настройки по- лей, если наберете одну строку кода: margin: 20px auto 0 auto;
Наконец, для того, чтобы предотвратить прикосновение содержимого элемента body к линии границы, отступ шириной 15 пикселов добавлен к внутренней части содержимого с помощью свойства padding. Другими словами, для изображения и текста был задан отступ 15 пикселов от всех четырех краев. Затем мы добавим свечение вокруг блока, воспользовавшись свойством box-shadow.
-
Отредактируйте только что созданный стиль элемента body, добавив к нему еще одно свойство после строки border, но перед max-width:
body { background-color: rgb(255,255,255); border: 3px solid rgb(75,75,75); box-shadow: 0 0 15px 5px rgba(44,82,100,.75); max-width: 760px; margin-top: 20px; margin-left: auto; margin-right: auto; padding: 15px; }Этот стиль добавляет к блоку свечение путем создания 15-пиксельной тени, помещенной непосредственно за блоком (то, что параметры тени начинаются с 0 0, означает, что тень не имеет смещения вправо-влево или вверх-вниз и представляет собой фон). Значение 5px определяет расширение тени, выталкивая ее на 5 пикселов дальше всех четырех углов. И наконец, значение rgba устанавливает темно-синий цвет с уровнем непрозрачности 75 % (то есть сквозь него можно видеть желтый фон). В вашей таблице стилей уже много всего, поэтому пришло время проверить, как выглядит страница.
-
Сохраните файл и просмотрите веб-страницу в браузере. Вы должны увидеть белый блок с изображением, фрагмент текста и серый контур с синеватым свечением, плавающие на желтом фоне. В данном случае настройка ширины элемента body, а также добавление кода
margin-left: auto; margin-right: auto;помещает его прямо в центре окна браузера. Теперь следует уделить внимание тексту, чем мы и займемся далее.
Поскольку стили, сбрасывающие стандартные настройки CSS, «оголили» текст на странице, вам необходимо создать новые стили, которые преобразили бы заголовки и абзацы. Начнем с элемента h1 в верхней части страницы.
- Вернитесь к файлу main.css в редакторе HTML-кода. Установите курсор после
закрывающей скобки селектора body, нажмите клавишу Enter и добавьте следующий
стиль:
Верхний заголовок имеет высоту 2,75 em (44 пиксела в большинстве браузеров) и набран прописными буквами. Для него установлен шрифт Georgia зеленого цвета, есть небольшой промежуток между буквами. Свойство text-align обеспечивает выключку текста по центру блока. Очень интересным получается добавление фонового цвета для выделения заголовка.
h1 { font-size: 2.75em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-align:center; letter-spacing: 1px; color: rgb(133,161,16); text-transform: uppercase; }СОВЕТ Сохраняйте файл и просматривайте страницу в браузере после каждого шага из этого примера. Таким образом вы поймете, как приведенные здесь свойства CSS воздействуют на элементы, кото- рые они форматируют.
- Добавьте новое свойство к селектору тега h1, чтобы он выглядел следующим
образом:
Если вы просмотрите страницу сейчас, то увидите, что заголовок обрел светло- зеленый фон. Когда фон применяется к блочным элементам, таким как заголовок, он заполняет все доступное горизонтальное пространство (другими словами, цвет не только появляется за текстом «Потрясающий мир CSS», но и простирается вплоть до правого края окна). Текст заголовка немного стесненный — буква «П», с которой он начинается, касается края фона. С помощью небольших отступов вы можете исправить это.
h1 { font-size: 2.75em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-align:center; letter-spacing: 1px; color: rgb(133,161,16); text-transform: uppercase; background-color: rgb(226,235,180); } - Добавьте еще одно свойство к селектору тега h1, чтобы он выглядел следующим
образом:
Сокращенное свойство padding предоставляет быстрый способ добавить отступы вокруг всех четырех сторон контента — в данном случае отступ шириной 5 пикселов добавляется над текстом, 15 пикселов — справа, 2 пиксела — внизу и 15 пикселов — слева. Существует еще одна проблема с заголовком: из-за отступов, которые добавлены к элементу body (см. шаг 4 предыдущего задания), заголовок (включая фоновый цвет) отодвинут на 15 пикселов от левого и правого краев серой границы, окружающей содержимое. Заголовок станет выглядеть лучше, если его фоновый цвет будет касаться этого контура. Это не проблема: на помощь приходят отрицательные значения полей.
h1 { font-size: 2.75em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-align:center; letter-spacing: 1px; color: rgb(133,161,16); text-transform: uppercase; background-color: rgb(226,235,180); padding: 5px 15px 2px 15px; } - Добавьте последнее свойство к селектору тега h1, чтобы он выглядел следующим
образом:
Здесь сокращенное свойство margin устанавливает следующие размеры полей: 0 пикселов для верхнего, –15 пикселов для правого, 20 пикселов для нижнего и –15 пикселов для левого. Нижнее поле добавляет немного пространства между заголовком и абзацем, который идет за ним. Следующий прием заключается в использовании отрицательных значений для левого и правого полей. У нас есть возможность назначить отрицательные значения полей для какого-либо элемента. Это свойство «тянет» элемент по направлению поля — в данном случае, заголовок продлевается на 15 пикселов влево и 15 пикселов вправо, расширяясь и вытягиваясь поверх отступов элемента body.
h1 { font-size: 2.75em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-align:center; letter-spacing: 1px; color: rgb(133,161,16); text-transform: uppercase; background-color: rgb(226,235,180); padding: 5px 15px 2px 15px; margin: 0 -15px 20px -15px; } - Теперь вы немного отформатируете элемент h2. Добавьте следующий стиль
после стиля h1:
Этот стиль добавляет базовое форматирование текста и пунктирные границы сверху и снизу заголовка. Чтобы добавить немного пространства между текстом заголовка и строками, используются небольшие отступы сверху и снизу. Наконец, свойство margin добавляет поля шириной 15 пикселов над заголовком и 5 пикселов под ним.
h2 { font-size: 1.5em; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: rgb(249,107,24); border-top: 2px dotted rgb(141,165,22); border-bottom: 2px dotted rgb(141,165,22); padding-top: 5px; padding-bottom: 5px; margin: 15px 0 5px 0; } - Сохраните файл и просмотрите страницу в браузере. Заголовки выглядят прекрасно. Далее вы создадите боковую панель в правой части страницы.
Боковые панели — элементы, применяемые в большинстве печатных журналов и газет. Они отделяют небольшие блоки информации, например перечни статей, и акцентируют на них внимание. Но для того, чтобы боковые панели были достаточно эффективными и полезными, они не должны прерывать потока основного контента. Даже название «боковая панель» говорит о том, что этот блок должен быть расположен обособленно и примыкать к краю веб-страницы, что можно легко сделать средствами каскадных таблиц стилей.
- Вернитесь к файлу index.html в редакторе HTML-кода. Сначала нужно изолировать область веб-страницы, составляющую боковую панель. Для этого прекрасно подходит элемент div. С его помощью можно заключить любой объем HTML-кода в отдельный блок. С помощью нескольких стилей вы можете изменить фоновый цвет веб-страницы, добавить поля, регулировать интервалы между заголовками и абзацами
- Прокрутите страницу вниз и щелкните кнопкой мыши перед первым элементом h2 (с заголовком Внимание). Введите код
<div class="sidebar">и нажмите клавишу Enter. Этот HTML-код отмечает начало блока боковой панели и применяет к нему класс. Мы создадим класс .sidebar позже, а сначала нужно определить завершение блока боковой панели, закрыв контейнер тегом</div>. - Перейдите к закрывающему тегу
</p>абзаца, который следует сразу за элементом h2 (это тот тег</p>, который расположен перед строкой<h2>Кто знаком с мощью CSS?</h2>). Нажмите клавишу Enter и введите тег</div>. Мы только что заключили заголовок и маркированный список в элемент div. Теперь создадим для него стиль. - Вернитесь к файлу main.css и добавьте после созданного ранее селектора h2
следующий код:
Этот стиль устанавливает ширину области контента (в которой отображается текст) равной 30%. В этом случае ширина боковой панели составляет 30 % от ширины ее контейнера. Контейнером является элемент body, и его ширина не превысит 760 пикселов. Свойство float перемещает боковую панель в правую часть блока, а свойство margin добавляет 10 пикселов пространства вокруг панели. Если вы просмотрите веб-страницу в браузере, то увидите, что форма и положение блока боковой панели определены, но есть одна проблема: границы элементов h2 отображаются под самим блоком. Несмотря на то что плавающая боковая панель смещает текст заголовков, границы остаются на том же месте. Один из способов решить эту проблему — добавить цвет фона для боковой панели, чтобы не видеть границ h2 (но есть и другой способ, который вы будете использовать на шаге 8).
.sidebar { width: 30%; float: right; margin: 10px; } - Добавьте еще два свойства (background-color и padding) к стилю .sidebar, чтобы он выглядел следующим
образом :
Эта свойства добавляют светло-оранжевый цвет к боковой панели и смещают текст от границ боковой панели, чтобы он не касался границ, которые вы собираетесь добавить.
.sidebar { width: 30%; float: right; margin: 10px; background-color: rgb(250,235,199); padding: 10px 20px; } - Добавьте еще два свойства к стилю .sidebar, чтобы он выглядел следующим
образом :
Это пример удобной методики, описанной ранее. Если вы хотите, чтобы большая часть границ вокруг элемента была одинаковой, можно сначала определить границу для всех четырех краев — в данном случае пунктирную оранжевую линию толщиной 1 пиксел вокруг всей боковой панели. Затем можно применить новые свойства для отдельных границ, которые вы хотите изменить, — в данном примере верхняя граница будет сплошной и будет иметь высоту 20 пикселов. Такой способ позволяет использовать всего две строки кода, а не четыре (border-top, border-bottom, border-left и border-right). Затем мы добавим скругленные углы и тень, чтобы выделить эту боковую панель.
.sidebar { width: 30%; float: right; margin: 10px; background-color: rgb(250,235,199); padding: 10px 20px; border: 1px dotted rgb(252,101,18); border-top: 20px solid rgb(252,101,18); } - И наконец, добавьте еще свойства к стилю .sidebar, придав ему следующий
вид :
Свойство border-radius позволяет создать скругленные углы. В данном случае значение 10px предоставляет заметное скругление. Свойство box-shadow добавляет тень, отбрасываемую вниз и вправо от блока, придавая ему вид парящего над страницей. Теперь вы близки к завершению работы. Заголовок внутри боковой панели выглядит не совсем так, как должен. К нему применяются те же свойства, что и к другим элементам h2 (из-за стиля тега h2, который вы создали в шаге 4). Границы отвлекают внимание, а верхнее поле излишне смещает заголовок вниз от верхней части боковой панели. Для решения проблемы вы можете использовать селектор потомков, чтобы переопределить эти свойства.
.sidebar { width: 30%; float: right; margin: 10px; background-color: rgb(250,235,199); padding: 10px 20px; border: 1px dotted rgb(252,101,18); border-top: 20px solid rgb(252,101,18); border-radius: 10px; box-shadow: 5px 5px 10px rgba(0,0,0,.5); } - После стиля .sidebar в файле main.css добавьте селектор потомков следующим
образом:
Из-за селектора потомков .sidebar этот стиль является доминирующим, то есть имеет большую специфичность по сравнению с простым стилем h2. Он стирает границу, полученную от оригинального стиля элемента h2, вместе с верхним полем и всеми отступами. Тем не менее, поскольку в этом стиле не определены размер, цвет и начертание шрифта, эти свойства по-прежнему передаются от стиля h2 — каскадность в действии! Страница стала хорошо выглядеть, но границы элементов h2 все еще появляются под боковой панелью. На это не очень приятно смотреть, но все можно легко исправить.
.sidebar h2 { border: none; margin-top: 0; padding: 0; } - Найдите стиль h2 и добавьте свойство overflow:
Присвоив свойству overflow значение hidden, вы скроете границы, которые проходят за пределами текста заголовка и под плавающим элементом.
h2 { font-size: 1.5em; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: rgb(249,107,24); border-top: 2px dotted rgb(141,165,22); border-bottom: 2px dotted rgb(141,165,22); padding-top: 5px; padding-bottom: 5px; margin: 15px 0 5px 0; overflow: hidden; } - Сохраните файл и просмотрите веб-страницу в браузере.
Чтобы закрепить полученные знания и навыки, попробуйте выполнить следующее практическое задание самостоятельно. Создайте для элемента p стиль, который бы смог приукрасить абзац: попробуйте добавить поля, указать цвет шрифта и т. д. Затем создайте класс для форматирования примечания с информацией об авторском праве, которое должно отображаться в нижней части страницы index.html (например, с именем .copyright). Добавьте в этот стиль верхнюю границу (над текстом примечания), измените цвет текста, уменьшите размер шрифта и измените регистр букв на прописные (используйте для этого свойство text-transform). После создания стиля добавьте соответствующий атрибут класса к элементу p в HTML-коде.
Веб-страница должна иметь вид, показанный на рисунке ниже.
