Блочные элементы могут размещаться непосредственно внутри элемента
. Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя (если для элемента не задано значение width).
Свойства width и height устанавливают ширину и высоту области содержимого элемента. Фактическая ширина элемента складывается из ширины полей (внутренних отступов) padding , границ border и внешних отступов margin .
Блочные элементы могут содержать как строчные, так и блочные элементы, но не оба типа элементов сразу. При необходимости, строки текста, принадлежащие блочному контейнеру, могут быть обёрнуты анонимными контейнерами, которые будут вести себя внутри блока как элементы со значением display: block; , а строчные элементы обёрнуты элементом
Блочные элементы могут содержаться только в пределах блочных элементов.
Элемент
Относится к блочным элементам, но он не может содержать внутри себя другой элемент
А также любой другой блочный элемент.
Анонимные боксы уровня блока
Как говорилось выше, блочные элементы могут содержать только блочные или только строчные элементы. В случае смешанного контента, когда блочный элемент одновременно содержит текстовое содержимое и другой блочный элемент, алгоритм визуального форматирования добавляет дополнительную обёртку для текстового содержимого — так называемый анонимный бокс. Поскольку такой контейнер не имеет названия, то к нему нельзя применить CSS-стили для оформления. Анонимные боксы наследуют свойства окружающего блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 2. Анонимные боксы уровня блока
4. Строчные элементы и строчные контейнеры
Встроенные (строчные) элементы
генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Значения свойства display , такие как inline и inline-table делают элементы строчными.
, ,
, , ,
, ,
, ,
,
,
Строчные элементы являются потомками блочных элементов. Они игнорируют верхние и нижние margin и padding , но если для элемента задан фон, он будет распространяться на верхний и нижний padding , заходя на соседние строки текста.
Ширина и высота строчного элемента зависит только от его содержимого, задать размеры с помощью CSS нельзя. Можно увеличить расстояние между соседними элементами по горизонтали с помощью горизонтальных полей и отступов.
Для того чтобы верхние и нижние поля и отступы работали для строчного элемента, нужно использовать конструкцию {display: inline-block} . Элемент останется встроенным, но к нему можно будет полноценно применить поля, отступы, задать ширину и высоту.
Рис. 3. Отличие воздействия CSS-свойств padding и margin на строчные и строчно-блочные элементы
Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент , который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.
Анонимные строчные боксы
Любой текст, содержащийся непосредственно внутри блочного элемента и не внутри строчного элемента, рассматривается как анонимный строчный элемент. Также как и анонимные блочные боксы они наследуют свойства родительского блока, а не наследуемые свойства принимают первоначальное значение.
Рис. 4. Анонимный строчный бокс
5. Строчно-блочные элементы
Существует еще одна группа элементов, которые браузер обрабатывает как строчно-блочные {display: inline-block;} . Такие элементы являются встроенным, но для них можно задавать поля, отступы, ширину и высоту.
,
,
,
,
,
,
,
,
,
,
6. Как сделать строчный элемент блочным, а блочный — строчным
В некоторых случаях бывает необходимо, чтобы строчный элемент вел себя как блочный и наоборот. Для этого необходимо установить соответствующее значение свойства display , например:
A {
display: block;
}/*превращаем строчный элемент в блочный, благодаря чему весь блок, а не только текст ссылки, становится ссылкой*/
div {
display: inline;
} /*превращаем блочный элемент в строчный*/
В результате меняется только способ представления элемента браузером, при этом сам элемент свой тип не меняет.
7. Схлопывание вертикальных отступов
Соприкасающиеся вертикальные отступы margin объединяются. При этом ширина общего отступа равна ширине большего из исходных отступов.
Рис. 5. Два блока до и после слияния отступов
Слияние выполняется только для блочных элементов в нормальном потоке документа. Внешние вертикальные отступы строчных, плавающих и абсолютно позиционированных элементов не сливаются.
Чтобы получить желаемый промежуток, можно задать, например, для верхнего элемента padding-bottom , а для нижнего элемента — margin-top .
Если среди схлопывающихся отступов есть отрицательные значения, то браузер добавит отрицательное значение к положительному, а полученный результат и будет расстоянием между элементами.
8. Отрицательные отступы
Отрицательные отступы можно использовать, чтобы убрать пустые области между элементами. Например, необходимо расположить в ряд несколько элементов меню с заданными размерами. Для этого нужно задать для li {display: inline-block;} .
Если нужно, чтобы элементы меню прилегали друг к другу, используем отрицательный margin:
Li {
margin-right: -4px;
}
li {
border-top: 1px solid #888888; /*Убираем двойные рамки между соседними элементами*/
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
}
li:last-child {
border-right: 1px solid #888888;
}
9. Выпадание вертикальных отступов
Если внутри одного блока расположить другой блок и задать ему margin-top , то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского блока. Если у родительского элемента также был задан верхний отступ, то выберется наибольшее из значений.
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу padding-top или добавить border-top: 1px solid transparent .
HTML (Hypertext Markup Language
) elements historically were categorized as either "block-level" elements or "inline" elements. Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
In this article, we"ll examine HTML inline elements and how they differ from block-level elements .
An inline element does not start on a new line and only takes up as much width as necessary.
Inline vs. block-level elements: a demonstration
This is most easily demonstrated with a simple example. First, some simple CSS that we"ll be using:
Highlight {
background-color:#ee3;
}
Inline
Let"s look at the following example which demonstrates an inline element:
The following span is an inline element ;
its background has been colored to display both the beginning and end of
the inline element"s influence.
The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of
the block-level element"s influence.
The CSS (not displayed in standard reading mode) is also used:
Body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color:#ee3;
}
Rendered using the same CSS as before, we get:
See the difference? The
Element totally changes the layout of the text, splitting it into three segments: the text before the
Then the
"s text, and finally the text following the
Changing element levels
You can change the visual presentation
of an element using the CSS display property. For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category
and the content model
of the element. For example, even if the display of the span element is changed to "block" , it still would not allow to nest a div element inside it.
Conceptual differences
In brief, here are the basic conceptual differences between inline and block-level elements:
Content model
Generally, inline elements may contain only data and other inline elements. You can"t put block elements inside inline elements.
Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).
List of "inline" elements
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use
Визуальный редактор JCE (Joomla Content Editor) обладает широким функционалом благодаря которому Вы сможете легко добавлять и редактировать материалы сайта, изменять их стилевое оформление , при этом не обладая знаниями в CSS, HTML и PHP. Знание и умение работать со всеми инструментами редактора JCE существенно упростит Вашу работу, позволит создавать эстетично оформленный текст с гармонично расположенными изображениями, ссылками, таблицами, загружать и настраивать медиа-файлы разных типов и т.д.
После того, как вы скачали, установили и настроили на своём сайте визуальный , войдите в административную панель и нажмите кнопку "Создать материал". Перед вами откроется панель инструментов редактора JCE.
Большинство кнопок редактора JCE весьма схожи с инструментами популярных редакторов текста и являются интуитивно понятными.
И так, давайте рассмотрим основные инструменты визуального редактора.
- диалоговое окно редактора: Справка.
- очищает окно редактора для создания нового документа.
- отменить последнее действие (CTRL+Z).
- вернуть последнее действие (CTRL+Y).
- применить или удалить жирный шрифт к выделенному тексту.
- применить или удалить курсив к выделенному тексту.
- применить или удалить подчеркивание к выделенному тексту.
- применить или удалить зачеркиваие выделенного текста.
- Выравнивание выделенного текста или элементов по всей ширине, по центру, по левому краю и по правому краю соответственно.
- вставка и удаление блока цитаты.
- применить формат блока к выделенному тексту или элементу.
На этом инструменте редактора следует остановиться более подробно.
Этот инструмент позволяет обрамлять выделенный текст нужными тэгами, что является важным для SEO-оптимизации сайта. Из важных опций здесь:
Параграф
– обрамление выделенного текста тегами , что означает - текст относится к текущему параграфу. Тегами автоматически обрамляются все параграфы текста, вставленного из редактора Word .
Блочный элемент (Div)
– блочный элемент html страницы, который предназначен для управления размещением и придания самых разнообразных свойств текстам, изображениям, ссылкам и др объектам.
Адрес
- тег предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и др. Поисковые системы анализируют содержимое этого тега для сбора информации об авторе сайта. По умолчанию текст внутри контейнера
отображается курсивом. Если эта особенность вам не требуется, то используйте стили для изменения начертания шрифта.
Форматированный
- тег Определяет предварительно отформатированный текст. Текст в элементе
обычно отображается шрифтом с фиксированной шириной, а также он сохраняет пробелы и переносы строк.
Заголовок
– текст, к которому применена эта опция, обрамляется тегами h1, h2, h3 и.т.д. Теги h1-h6 сочетают в себе как функции оформления, так и функции оптимизации. С точки зрения оптимизации, заголовки h1-h6 – это теги акцентирования, задача которых обратить внимание поискового робота на наиболее важные с точки зрения определения тематики и темы участки текста и отдельные слова.
Код
- тег предназначен для отображения одной или нескольких строк текста, представляюего собой программный код . Сюда относятся переменные, ключевые слова , тексты функции и др. Браузеры, как правило, отображают содержимое контейнера
как моноширинный текст уменьшенного размера.
Пример кода
- текст, к которому применена эта опция, обрамляется тегами . Тег
используется для отображения текста, который является результатом вывода компьютерной программы или скрипта. Браузеры обычно отображают текст в контейнере
в виде моноширинного шрифта. С помощью стилей вы можете задать свое собственное оформление.
Строчный элемент (SPAN)
– обрамление текста тегами . Тег предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как ,
или
, с помощью тега можно выделить часть информации внутри других тегов и установить для нее свой собственный стиль.
Термин Определения
– обрамление текста тегами . Тег
входит в тройку элементов ,
,
…
, куда входит тег
создающий термин и тег
Описание Определения
– обрамление текста тегами
. Тег
входит в тройку элементов ,
,
, предназначенных для создания списка определений. Каждый такой список помещается в контейнер
…
, куда входит тег
создающий термин и тег
задающий определение этого термина.
- выбор стилей из CSS текущего шаблона.
Очень важный инструмент.
- очистить стиль форматирования выделенного текста или элемента.
- очистить выделенный текст от HTML-кода.
– выбор шрифта для выделенного текста.
- выбор размера шрифта для выделенного текста.
- изменение цвета текста и цвета фона для выделенного текста.
- вырезание выделенного текста (кнопка работает не во всех браузерах). Используйте вместо неё сочетание клавиш CTRL+X.
- копирование текста в буфер обмена (работает не во всех браузерах). Используйте вместо неё сочетание клавиш CTRL+С.
– используется для вставки текста из редактора Word и других текстовых редакторов. Вид редактора определяется автоматически. После выбора опции откроется окно.
В это окно нужно вставить (Ctrl+V) текст из редактора Word или любого другого редактора в котором сохранен материал, и нажать кнопку "Вставить".
После этого текст с максимальным сохранением стилей форматирования
будет вставлен в текстовое поле JCE.
- используется для вставки текста с одновременной очисткой его от стилей форматирования
. При использовании этой опции получится просто сплошной текст, что-то вроде вставки из блокнота. При нажатии на кнопку откроется окно с надписью "Вставить как обычный текст".
– увеличить/уменьшить отступ выделенного текста или элемента от левого края страницы.
- создание упорядоченного списка (из выпадающего списка можно выбрать цифры, строчные или заглавные буквы и т.д.).
- создать маркированный список (круг, диск, квадрат).
- установка текста в нижнем или верхнем индексе.
- изменение регистра выделенного текста (заглавные, строчные, каждое предложение с заглавной, горбатый регистр).
- выберите специальный символ из выпадающего окна с символами. При наведении курсора на символ в правой части окна появляется "превью" символа, его HTML-Code и NUM-Code.
- направленность отмеченного текста или элементов: слева-направо или справа-налево соответственно.
- развернуть размер редактора во весь экран.
- окно для вставки и редактирования кода. При клике по этой кнопке открывается редактор html-кода с подсветкой:
Редактор html-кода наглядно показывает структуру вашей страницы. Для удобства работы с кодом здесь предусмотрены дополнительные кнопки, благодаря которым можно включить или отключить подсветку кода, нумерацию строк, можно быстро найти и, при необходимости, заменить теги, слова по всему тексту и т.д.
- печать содержимого. При нажатии на кнопку откроется стандартное окно для выбора принтера и настройки параметров печати.
– работа с таблицами.
– показать или скрыть направляющие (неотображаемые элементы на странице сайта).
– вкл/выкл отображение невидимых символов (форматирование, пробелы и т.п.).
– показать или скрыть блочные элементы. При включении опции блоки с текстом и элементами будут выделены штрих-пунктирной линией для удобства работы с контентом.
– вставить неразрывный пробел (абривеатура  ).
- изменение стиля выбранного текста.
Многофункциональный инструмент.
- помечает текст как цитату или сноску на другой материал. Выделение текста через тег удобно для изменения стиля контента через CSS, а также применяется для разделения HTML- кода на структурные элементы. Обычно браузеры устанавливают текст внутри контейнера
курсивом. При клике по кнопке всплывает модальное окно .
Заголовок (title)
- описание содержимого элемента в виде всплывающей подсказки.
id
- указывает имя стилевого идентификатора.
Класс (class)
- имя класса, которое позволяет связать тег со стилевым оформлением.
Стиль (style)
- применяется для определения стиля элемента с помощью CSS.
Направление текста (dir)
- задает направление и отображение текста (слева направо или справа налево).
Язык (lang)
- значение этого параметра используется браузером для правильного отображения некоторых национальных символов.
Указывает, что последовательность символов является аббревиатурой (тег <abbr>
). При клике по кнопке всплывает модальное окно аналогичное вышерассмотренному. Заголовок (title) добавляет всплывающую подсказку в которой можно дать расшифровку аббревиатуры. Кроме того, поисковые системы индексируют полнотекстовый вариант аббревиатуры, что может быть применено для повышения рейтинга документа.
- указывает на то, что текст является акронимом. От аббревиатуры отличается тем, что акроним это общепринятое сокращение и является самостоятельным словом . К акронимам можно отнести следующие слова : США, DOS, ЦУМ, ООН, ликбез и др.
По умолчанию текст, помещенный внутрь контейнера <acronym>
,
подчеркивается пунктирной линией. В модальном окне для акронима можно заполнить универсальные атрибуты точно такие же, как и для аббревиатуры.
- используется для выделения текста, который был удален в новой версии документа. Текст в контейнере <del>
обычно отображается браузерами как перечеркнутый. Подобное отображение позволяет отследить, какие в тексте документа изменения были сделаны. При клике по кнопке всплывает модальное окно
Дата/Время (datetime)
- дата и время редактирования текста.
Цитата (cite)
- указывает ссылку на документ, в котором приведена причина редактирования текста и прочие подробности.
Все остальные атрибуты, изложенные в данном окне, уже нам знакомы.
– выделение текста, который был добавлен в новую версию документа. Текст в контейнере <ins>
обычно помечается браузерами как подчеркнутый. Подобное форматирование позволяет отследить, какие в тексте документа были сделаны изменения. При клике по кнопке всплывает модальное окно с атрибутами как для кнопки "Удаление".
- вставка и редактирование атрибутов. Атрибуты используются для определения поведения текста при наведении курсора, нажатии и т.п.
Выделенный фрагмент текста помещается в контейнер <span>
. Тег <span>
предназначен для определения строчных элементов документа. В отличие от блочных элементов <table>
, <p>
или <div>
, используя тег <span>
можно выделить фрагмент документа внутри других тегов и установить для фрагмента свой стиль. При клике по кнопке всплывает модальное окно.
Вкладка "Стандартные"
содержит знакомые нам атрибуты.
Вкладка "События"
Во вкладке "События" (Events) назначаются события, которые будут происходить при наведении, нажатии и т.д. курсора на элемент.
Возможные значения:
onblur
- потеря фокуса. Событие onBlur возникает при потере объектом фокуса при переходе по клику мыши или с помощью клавиатуры. Это обычно происходит, если щелкнуть мышкой на другой элемент текущего текста. Событие onblur противоположно событию onfocus.
onchange
- изменение значения элемента формы. Событие onchange возникает, когда элемент управления формы меняет свое значение.
onclick
- событие возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick.
ondblclick
- двойной щелчок левой кнопкой мыши на элементе.
onfocus
- получение элементом фокуса. К примеру, для текстового поля фокусом называется возможность вводить текст (мигающий курсор).
onkeydown
- клавиша нажата, но не отпущена. Событие cрабатывает в момент нажатия клавиши, но когда она еще не отпущена.
onkeypress
- клавиша нажата и отпущена. Событие срабатывает, когда клавиша на клавиатуре нажата и уже отпущена.
onkeyup
- клавиша отпущена. Событие возникает в тот момент, когда нажатая клавиша отпускается.
onload
- документ загружен. Событие указывает, что страница полностью загружена, включая содержание, картинки, CSS-файлы, а также внешние скрипты.
onmousedown
- нажата левая кнопка мыши. Событие по действию напоминает onclick и отличается от него тем, что возникает в момент нажатия на кнопку мыши.
onmousemove
- перемещение курсора мыши. Событие применяется для создания разных эффектов, связанных с курсором мыши, например: всплывающие подсказки.
onmouseout
- курсор покидает элемент. Событие возникает при перемещении указателя мыши за границы объекта.
onmouseover
- курсор наводится на элемент. Событие возникает при наведении курсора мыши на элемент.
onmouseup
- левая кнопка мыши отпущена. Событие возникает при отпускании нажатой левой кнопки мыши.
onreset
- форма очищена. Событие возникает при очистке формы, происходящей при нажатии на кнопку типа Reset.
onselect
- выделен текст в поле формы. Событие применяется в текстовых полях и происходит, когда выделяется текст с помощью мышки или клавиатуры.
onsubmit
- форма отправлена. Событие возникает при отправке формы, это происходит, когда пользователь нажимает кнопку типа Submit, графическую кнопку (типа image).
onunload
- закрытие окна. Событие срабатывает в том случае, когда страница не загрузилась по каким-либо причинам, либо при удалении страницы из окна или фрейма.
Название страницы
- название страницы, создаваемой в результате разделения материала.
Псевдоним Содержания
- название ссылки на страницу, отображаемой в мини- меню.
Помимо ссылки перехода по станицам, расположенной внизу каждой страницы (<<Назад - Вперед >>), справа в верхней части первой страницы появится мини- меню, со списком ссылок на вторую и последующие страницы материала. Благодаря мини-меню можно легко переходить со страницы на страницу используя их названия (псевдоним), а выбор пункта "Все страницы" позволяет вывести весь материал на одну страницу.
Для удобства иконка разбиения материала на страницы дублируется кнопкой "Разрыв страницы", расположенной в нижней части редактора.
- вставить/изменить изображение. Данная иконка появится в панели инструментов редактора после установки плагина Image Manager Extended, который существенно сэкономит Вам время и с его помощью Вы сможете: загружать изображения и изменять их размер при загрузке в менеджер изображений, создавать папки, переименовать, вырезать, копировать, вставлять и удалять папки и изображения, создавать и удалять изображения-миниатюры, создавать альтернативные изображения "Rollover Image", редактировать изображения в в встроенном редакторе изображений, создать всплывающие окна с изображениями, галереями и подсказками др.
- вставить/изменить медиа-файл. Данная иконка появится в панели инструментов редактора после установки плагина
Media Manager, который предназначен для загрузки и вставки в статьи сайта медиа-файлов (Flash, Windows Media , QuickTime и др.), позволяет легко вставлять фильмы с Youtube и имеет широкий спектр настроек.
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
Тег
является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name
или href
тег
устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег
увеличивает размер шрифта на единицу по сравнению с обычным текстом . В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега
увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег
уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег
, но действует с точностью до наоборот.
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на
, но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
Блочные элементы всегда начинаются с новой строки , а строчные таким способом не акцентируются.
Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.