Блочные и строковые элементы в CSS
Выбери формат для чтения
Перейти в бота
Загружаем конспект в формате pdf
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
1. ОСНОВЫ CSS, часть 2
1.3.
Блочные и строковые элементы
В описании тегов языка HTML существует понятие строкового (in-line) элемента
разметки и блочного (block) элемента разметки. Например:
параграф - это блочный элемент разметки;
выделение курсивом (с помощью тегов) - это строковый элемент разметки.
Блочные элементы можно вкладывать друг в друга, но нельзя пересекать друг с
другом. Строковые элементы можно как вкладывать, так и пересекать, но последнее делать
не рекомендуется.
По набору атрибутов управления отображением (свойств описания стиля) строковые
и блочные элементы отличаются. Упрощенно можно сказать, что атрибуты описания стиля
строкового элемента являются подмножеством атрибутов описания стиля блочного.
Обобщениями блочного и строкового элементов с точки зрения стилей выступают
теги div и span соответственно.
Элемент SPAN
Тег span - это обобщенный строковый элемент разметки, применение которого не
приводит к образованию блока текста. Он может заменить теги: font, i, b, u, sub,
sup и т.п. Тег span применяют, если необходимо каким-то особым образом
отформатировать часть текста документа. Например, в следующем примере создан стиль для
тега span, который устанавливает красный шрифт текста и делает его полужирным (в этом
теге описано слово «Стиль»). То же самое форматирование установлено для слов «элементам
страницы». Как видно из примера, результат получился совершенно одинаковым, однако
применение тега span предпочтительнее, так как создается более «читабельный» HTMLкод.
CSS-стиль
Страница в браузере
span {
color : red;
font-weight : bold;
}
HTML code
![]()
, , ), можно преобразовать в блочный.
Для этого используют CSS атрибут display со значением block.
Задания для самостоятельного решения
1. Для выделения отдельных фрагментов текста используется следующее
форматирование:
- цвет текста красный;
- размер шрифта в полтора раза больше текущего;
- «разряженные буквы»;
- располагается по центру строки.
Создайте соответствующий стиль и примените его к некоторым фрагментам
произвольного текста.
2. С помощью тегов div создайте следующую структуру (рисунок 1), без
форматирования границ:
Блок 1
Блок 2
Блок 3
Рис. 1. Блочная структура
1.4. Стили для описания блочных элементов
Блочный элемент представляет собой прямоугольную область, в которой можно
поместить некоторое содержимое (картинки, текст другие блоки). Для этого блока
определяются (рисунок 2):
- размеры (высота и ширина – height и width);
- граница, которая может быть разной толщины, цвета, типа (border);
- внешние отступы до охватывающего элемента страницы (margin);
- внутренние отступы от границы до содержимого блока (padding);
- для элемента можно задать цвет фона или фоновую картинку (background).
Кроме этого можно управлять положением блочного элемента на странице
(position), его обтеканием (clear) и выравниванием на странице (float).
2
Рисунок 2. Свойства блочного элемента
Основные свойства блоков
В таблице 1приведены свойства стилей для блочных элементов.
Таблица 1
Свойства блочных элементов
Свойство
Возможные значения
Размеры блока по высоте и ширине
height, width
точный размер, задаваемый числом со стандартной единицей
задают высоту и ширину блока
измерения, применяемой для стилей (px и пр.).
размер в процентах, задаваемый числом и знаком процента
– в этом случае размер определяется как процент от
соответствующего измерения внешнего блока.
border
обобщенное свойство описания границ блока, с его помощью можно задать: border-width,
border-style и border-color. Может быть различным для всех сторон границы: bordertop, border-bottom, border-left, border-right
border-width
точный размер, задаваемый числом со стандартной единицей
задает толщину границы
измерения, применяемые для стилей (px и пр.).
размер в процентах, задаваемый числом и знаком процента
– в этом случае размер определяется как процент от
соответствующего измерения внешнего блока.
border-color
цвет – значение цвета, описанное любым стандартным
задает цвет границы
способом:
- #RRGGBB, где каждая пара RR, GG, BB определяет наличие
соответствующего цвета, каждый пара описывается числом от 0
до FF в шестнадцатеричной системе счисления;
- color соответствующий цвет на английском языке;
- rgb(число, число, число), где число может принимать целые
значения от 0 до 255 и определяет наличие соответствующего
цвета в системе RGB;
- rgba(число, число, число, прозрачность), где прозрачность –
число от 0 до 1, которое определяет прозрачность цвета.
border-style
solid – обычная сплошная рамка.
задает стиль линии для границы
none – рамка отсутствует, ширина равна нулю (по умолчанию).
dotted – рамка в виде последовательности точек.
dashed – пунктирная рамка.
double – двойная линия.
groove – «вдавленная» рамка, с эффектом объёма.
ridge – «выпуклая» рамка, с эффектом объёма.
3
Свойство
Возможные значения
inset – вариант «вдавленной» рамки, с эффектом объёма.
outset – вариант «выпуклой» рамки, с эффектом объёма.
margin
обобщенное свойство отступов от текущего элемента до охватывающего блока, позволяющее задать :
margin-top, margin-right, margin-bottom и/или margin-left
margin-top, marginточный размер, задаваемый числом со стандартной единицей
right, margin-bottom,
измерения, применяемой для стилей (px и пр.).
margin-left
размер в процентах, задаваемый числом и знаком процента
задают отступ от охватывающего – в этом случае размер определяется как процент от
элемента сверху, справа, снизу и соответствующего измерения внешнего блока.
слева соответственно
auto – отступ будет рассчитываться браузером автоматически
padding
обобщенное свойство отступов от границы текущего элемента до его содержимого, позволяющее
задать: padding-top, padding-right, padding-bottom и/или padding-left
padding-top, paddingточный размер, задаваемый числом со стандартной единицей
right, padding-bottom,
измерения, применяемой для стилей (px и пр.).
padding-left
размер в процентах, задаваемый числом и знаком процента
задают отступ до содержимого
– в этом случае размер определяется как процент от
текущего элемента сверху,
соответствующего измерения внешнего блока.
справа, снизу и слева
auto – отступ будет рассчитываться браузером автоматически
соответственно
background
обобщенный вариант записи для свойств background-color, background-image и др,
позволяет управлять фоном блочного элемента.
background-color
цвет – значение цвета, описанное любым стандартным способом
устанавливает цвет фона для
(см. выше в таблице).
элемента.
transparent – устанавливает прозрачный фон.
background-image
url(имя файла – ссылка на картинку, адрес (url)
задает фоновый рисунок
изображения, заданный стандартным способом.
блочного элемента
none – фоновое изображение отсутствует.
background-repeat
repeat-x – размножает изображение только по вертикали.
управляет циклическим
repeat-y – размножает изображение только по горизонтали.
повторением фоновой картинки.
repeat – размножает изображение в обоих направлениях - и по
горизонтали и по вертикали (по умолчанию)
no-repeat – не размножает изображение.
Свойства margin, padding, border-width, border-style и bordercolor предполагают использование от 1 до 4 значений одновременно, что повлечет за собой
следующее. Если для свойства будет указанно:
одно значение – оно будет применено ко всем сторонам элемента;
два значения – первое будет применено для верхней и нижней границ элемента,
второе – для левой и правой.;
три значения – первое будет применено для верхней границы, второе - для правой и
левой границ, третье – для нижней границы.
четыре значения – первое будет применено для верхней границы, второе – для
правой границы, третье – для нижней границы, четвертое – для левой границы.
Например, эти два описания стиля для абзацев текста эквивалентны:
p{
margin-top:15px;
margin-bottom:15px;
p{
margin:15px 30px;
}
4
margin-left:30px;
margin-right:30px;
}
В следующем примере задается цвет границы блока, верхняя, нижняя и правая/левая
границы имеют разный цвет (оба описания эквиваленты):
div {
border-top: red;
border-bottom: blue;
border-left: blue;
border-right: green;}
div {
margin: red blue green;
}
Обобщенное свойство border позволяет задавать для границ блока все три свойства
border-width, border-style и border-color одновременно. Их значения
записываются через пробел в любом порядке. Например, граница всех элементов,
определенных на странице с тегом div будет сплошной линией, толщиной 2 пикселя,
красного цвета:
div {
border : solid 2px red;
}
В качестве примера создадим блочную структуру, показанную на рисунке 3.
Один охватывающий блок и три вложенных создаются с помощью следующего
HTML-кода:
= "block">Блок 3Cтиль – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы.
Cтиль – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. Элемент DIV Тег div выступает в качестве универсального блока, его можно рассматривать как раздел страницы, но на самом деле его применение имеет смысл только в контексте CSS. Без описания стилей для блока – это просто новая неформатированная строка текста, например: HTML-код Страница в браузереАбзац - это...
Способы форматирования абзаца:
по центру, по правому краю, левому
краю, по ширине.
1
Абзац - это...
Способы форматирования абзаца: по центру,
по правому краю, левому краю, по ширине.
Для тега div можно определить все стили шрифта и текста, описанные выше. Но
кроме этого, div позволяет применить атрибуты стиля, связанные с границей блока,
отступами блока от границ охватывающего элемента и пр. Тогда этот элемент можно
применять для «блочного» оформления страницы, востребованного в современном webдизайне.
Необходимо отметить, что практически любой строчный элемент страницы,
описанный с помощью тегов (
"content">
= "block">Блок 1
= "block">Блок 2У этого блока текста не может быть «плавающего» правого блока, т.к. мы его запретили. Применим свойство float, чтобы отобразить блоки «в одну строку», прижатые к левой границе охватывающего блока. Страница в браузере CSS-стиль .block{ float : left; border :dotted 1px blue; padding : 20px; margin : 5px; width : 45px; } При использовании свойства float, если блоки не помещаются «в одну строку», происходит автоматический перенос блоков «на другую строку». Так, если в нашем примере вложенных будут не три, а пять блоков, два последних блока будут отображены ниже первых трех и прижаты к левому краю охватывающего блока. 9 Страница в браузере HTML-код
"content">
= "block">Блок
= "block">Блок
= "block">Блок
= "block">Блок
= "block">Блок
1
2
для
тега … web-дизайне.
Другим вариантом форматирования первой буквы является ее расположение строго
слева от остального текста. Для реализации этого необходимо весь текст сдвинуть вправо, а
букву сдвинуть влево на тоже значение, установив необходимые значения атрибута margin.
CSS-стиль
Страница в браузере
div{
font-size : 16px;
line-height : 1.5em;
text-align : justify;
margin-left : 30px;
}
.firstLetter{
font-size : 4em;
float : left;
margin : 0 2px 2px -30px;
}
10
Отображение содержимого блочного элемента
Управление отображением содержимого блочного элемента, если оно не помещается
в область заданных размеров, осуществляется с помощью свойства overflow, которое
может принимать следующие значения:
visible – отображает все содержание элемента, даже за пределами установленной
ширины и высоты, является значением по умолчанию;
hidden – отображает только область внутри документа, остальное будет скрыто (это
значение необходимо задать для охватывающего блока, если для вложенных блоков
установлено свойство float со значениями left или right, чтобы эти блоки визуально
относились к охватывающему);
scroll – всегда добавляются полосы прокрутки;
auto – полосы прокрутки добавляются при необходимости.
Внесем изменения в наш пример с блочной структурой, чтобы высота охватывающего
блока зависела от его содержимого. Для этого необходимо включить свойство overflow:
hidden в стиль охватывающего блока и удалить из него фиксированную высоту.
Страница в браузере
CSS-стиль
.content{
border :solid 2px red;
width : 300px;
margin: auto;
padding: 10px;
overflow: hidden;
}
Позиционирование
До появления CSS единственным средством относительно точного позиционирования
были таблицы. Они позволяли точно расположить компоненты HTML-страницы
относительно друг друга на плоскости. CSS описание позволяет точно поместить элемент
разметки не только относительно других компонентов страницы, но и относительно границ
страницы.
CSS определяет две системы координат: относительную и абсолютную. Это
позволяет обеспечить гибкость размещения элементов как относительно границ рабочего
поля окна браузера, так и относительно друг друга.
При использовании абсолютных координат точка отсчета помещается в верхний
левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по
вертикали, соответственно. Абсолютное позиционирование применяется тогда, когда либо
все содержимое страницы должно быть доступно без скроллинга (прокрутки), либо когда
элементы разметки находятся в начале страницы и их взаимное размещение важно с точки
зрения дизайна, например, для организации всплывающих меню.
Относительная координатная система позволяет разместить блоки на странице в
координатах охватывающего их блока. Преимущества и необходимость наличия такой
координатной системы очевидны. Она позволяет сохранять взаимное расположение
элементов разметки при любом размере окна браузера и его настройках по умолчанию.
11
В качестве точки отсчета в этой системе координат используется его верхняя левая
граница охватывающего блока. Ось X при этом направлена горизонтально вправо, а ось Y вертикально вниз.
При позиционировании элемента на странице его положение определяется
следующими свойствами:
left – определяет расстояние от левого края охватываюшего элемнта (или окна
браузера в зависимости от системы координат, задаваемой свойством position), не
включая отступы и рамку, до левого края текущего элемента;
top – определяет расстояние от верхнего края охватываюшего элемнта, не включая
отступы и рамку, до верхнего края текущего элемента;
right– определяет расстояние от правого края охватываюшего элемнта, не включая
отступы и рамку, до правого края текущего элемента;
bottom – определяет расстояние от нижнего края охватываюшего элемнта, не
включая отступы и рамку, до нижнего края текущего элемента.
В качестве значений left, top, right и bottom могут использоваться:
точный размер, задаваемый числом (положительным или отрицательным) со
стандартной единицей измерения, применяемой для стилей (px и пр.).
размер в процентах, задаваемый числом и знаком процента – в этом случае
размер определяется как процент от соответствующего измерения охватывающего блока или
окна браузера.
auto – не изменяет положение элемента
За позиционирование элементов в CSS отвечает атрибут position, его возможные
значения:
absolute – указывает, что элемент абсолютно позиционирован, при этом другие
элементы отображаются на веб-странице словно абсолютно позиционированного элемента и
нет. Положение элемента задается свойствами left, top, right и bottom, также на
положение влияет значение свойства position охватывающего элемента. Так, если у него
значение position установлено как static или такового элемента нет, то отсчет
координат ведется от левого верхнего угла окна браузера. Если у охватывающего элемента
значение position задано как fixed, relative или absolute, то отсчет координат
ведется от левого верхнего угла охватывающего элемента.
fixed – по своему действию это значение близко к absolute, но в отличие от него
привязывается к указанной свойствами left, top, right и bottom точке на экране и не
меняет своего положения при прокрутке веб-страницы.
relative – положение элемента устанавливается относительно его исходного места.
Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает
его в ту или иную сторону от первоначального расположения.
static – элементы отображаются как обычно, использование свойств left, top,
right и bottom не приводит к каким-либо результатам.
Например, если некоторый блочный элемент класса rect должен быть размещен на
10px ниже верхней границы браузера и на 20px правее его правого края, то его описание
будет выглядеть следующим образом:
12
.rect{
position : absolute;
top : 10px;
left : 20px;
}
Значения координат для left, top, right и bottom могут быть и отрицательными.
Например, для того, чтобы убрать из отображаемой области блок с линейными размерами
100px на 200px, достаточно отпозиционировать его следующим образом:
.rect {
position : absolute;
top : -100px;
left : -200px;
width : 200px;
height : 100px;
}
Но делать так не рекомендуется, лучше использовать свойства display или
visibility.
Для того чтобы разместить блок класса rect не относительно границ браузера, а
относительно другого блока (с именем content), используется следующее описание стилей
(внешний блок должен иметь установленное в не static свойство position):
CSS-стиль
Страница в браузере
#content{
position: absolute;
width: 100px;
height: 100px;
background-color: #007777;
}
.rect{
position: absolute;
top:10px;
left:20px;
width: 30px;
height: 30px;
background-color: #00FF00;
}
HTML code
Блочный элемент - это ...
Строчный элемент - это ...
