Блочные элементы могут размещаться непосредственно внутри элемента
. Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя (если для элемента не задано значение 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 и предназначен для создания ссылок. В зависимости от присутствия атрибутов name
или href
тег
устанавливает ссылку или якорь.
Определяет жирное начертание шрифта.
Тег
увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега
увеличивает текст на одну условную единицу.
Тег
устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа
Использование тега
не добавляет пустой отступ перед строкой.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
Устанавливает курсивное начертание шрифта.
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF , JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0"
в тег
.
Тег
уменьшает размер шрифта на единицу по сравнению с обычным текстом. По своему действию похож на тег
, но действует с точностью до наоборот.
Универсальный тег , предназначенный для определения строчного элемента внутри документа.
Тег
предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера — H 2 O.
Отображает шрифт в виде верхнего индекса. По своему действию похож на
, но текст отображается выше базовой линии текста — м 2 .
Разница между блочными и строчными элементами следующая.
Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы никак не могут хранить блочные элементы.
Блочные элементы всегда начинаются с новой строки , а строчные таким способом не акцентируются.
Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
Высоцкий Владимир Семёнович, (1938-1980) русский поэт и актер
В 1947-1949 гг.
жил с отцом и его второй женой в городе Эберсвальде-Финов (Германия)
, затем вернулся в Москву.
Во время учёбы в школе Высоцкий занимался в драмкружке и хотел поступать в театральный институт, но по настоянию родителей сдал экзамены в Московский строительный институт имени В. В. Куйбышева
, откуда вскоре ушёл. Летом 1956 г.
поступил в Школу-студию имени В. И. Немировича-Данченко при МХАТе
.
По окончании студии (1960 г.
) работал в Московском драматическом театре имени А. С. Пушкина
и в Московском театре миниатюр
. Тогда же начал сниматься в кино.
В 1964 г.
был принят в Московский театр драмы и комедии на Таганке
, где проработал до конца жизни. Артист сыграл на сцене Таганки более 20 ролей, из которых наиболее известна роль Гамлета из одноимённой трагедии Шекспира.
В 1960-1961 гг.
появились первые песни Высоцкого. За свою жизнь он создал их около тысячи. Официально не признанные, минуя радио,телевидение, печать, благодаря магнитофонным лентам песни Высоцкого становились известны всем.
Много песен и баллад предназначалось для кинофильмов. В 1966 г.
Высоцкий снялся в картине «Вертикаль»
и написал для неё пять песен. Всего он сыграл в 30 художественных фильмах. Последние годы жизни Высоцкого были драматичны. При всенародной популярности он не мог добиться публикации своих стихов, выхода пластинок; тяжело переживал травлю, развязанную в прессе. От перенапряжения болел, в 1979 г.
перенёс клиническую смерть.
Умер 25 июля 1980 г.
в Москве, похоронен на Ваганьковском кладбище
. Только после смерти был издан первый сборник его стихов «Нерв» (1981 г.
).
В 1987 г.
за роль капитана МУРа Глеба Жеглова в пятисерийной телевизионной ленте режиссёра С. С. Говорухина «Место встречи изменить нельзя» ему была посмертно присуждена Государственная премия СССР.
Синтаксис HTML
HTML-документ можно создавать в любом текстовом редакторе , хоть Блокноте
,
Web-страница имеет две «стороны»: одна – внешняя, которую видят пользователи, другая – HTML-код, с помощью которого формируется эта web-страница.
Любая Web-страница представляет собой набор элементов, которые являются её составными частями (текст, изображения, ссылки, таблицы и т. д.).
HTML-код страницы набирается обычным текстом. По сути, web-страница – это текстовый файл . Кроме обычного текста , HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tag - метка).
Теги, во-первых, разделяют исходный неформатированный текст документа на элементы, а во-вторых, создают новые элементы, которым ничего не соответствовало в тексте (например, графические вставки).
Общий синтаксис
написания тегов следующий
Таким образом, теги бывают двух видов:
· одиночные (одиночный тег используется самостоятельно)
· парные (парный тег может включать внутри себя другие теги или текст)
Теги заключены в угловые скобки.
Парный тег имеет две части: открывающую
и закрывающую
с добавлением косой черты.
Структура HTML-документа
Настройте редактор так, чтобы он «понимал» синтаксис языка HTML.
Любая web-страница должна содержать в себе типичные элементы, которые не зависят от вида и тематики сайта, и описывают структуру документа.
Рассмотрим пример простой web-страницы, содержащего основные теги. Наберите содержимое данного примера в текстовом редакторе Notepad++.
Пример 1. Простая
web
-страница.
https://pandia.ru/text/79/171/images/image004_4.jpg" width="441 height=327" height="327">
Откройте файл (двойным щелчком ) в браузере и увидите результат.
Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать . Этот тег является обязательным.
Тег … определяет начало и конец HTML-файла.
Контейнер
… является заголовком документа. Он содержит служебную информацию.
В данном примере используется тег , его также называют метатег
. Метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем.
Тег
… определяет текст заголовка или название веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в заголовке окна браузера.
Тег
… является обязательным и должен непременно присутствовать в коде документа. Он размещается в заголовочной части документа, т. е. между тегами ….
Содержимое заголовочной части
… не отображается на странице за исключением контейнера … .
Тело документа
… предназначено для размещения тегов и содержательной части веб-страницы.
Информацию, которую следует выводить в окне браузера, следует располагать именно внутри контейнера
. К такой информации относится текст, изображения, таблицы, списки и др.
В данном случае , в теле документа размещен заголовок и два абзаца, размеченные соответствующими тегами.
Заголовок
Первый абзац.
Второй абзац.
является комментарием.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код , можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом и заканчиваются тегом -->
. Все, что находится между этими тегами отображаться на веб-странице не будет.
Таким образом, любая веб-страница имеет следующую структуру.
Создайте простую веб-страницу по приведенному выше образцу. В качестве названия страницы введите Первая самостоятельно выполненная страница
.
В теле документа должен быть заголовок, содержащий Ваше имя
и несколько абзацев, в которых кратко опишите новые сведения, полученные Вами в ходе изучения урока.
Блочные элементы
Блочные элементы
характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. Рассмотрим важнейшие блочные элементы.
,,...,
Эта группа тегов определяет текстовые заголовки разного уровня , которые показывают относительную важность секции, расположенной после заголовка. В HTML-документе поддерживаются заголовки шести уровней.
Выполните пример 2.
Пример 2. Текстовые заголовки разного уровня
Заголовки выделяются браузером при показе HTML-документа размером шрифта и жирностью. Использовать заголовки нужно очень аккуратно в соответствии с его логическим уровнем в структуре документа. Не следует использовать теги h1–h6 для выделения обычного текста. Они применяются именно для заголовков.
Заголовки являются важной частью документа. Они разделяют информацию на отдельные логические части и поэтому существенно улучшают ее восприятие.
Например, название учебника - это заголовок первого уровня. Текст в учебнике разбит на главы; названия глав - это заголовки второго уровня. Главы содержат параграфы с заголовками третьего уровня. Параграфы состоят из пунктов, обозначенных заголовками четвертого уровня.
Задание для самостоятельного выполнения.
Создайте веб-страницу, содержащую следующее оглавление. Используйте заголовки соответствующих уровней.
Пример 3. Создание оглавления.
Основы дизайна.
1. Пространственные отношения.
1.1. Размер.
1.1.1. Относительность размера.
1.1.2. Искусство выравнивания текста.
1.2. Пропорции.
2. Форма.
2.1. Прямые.
2.2. Прямоугольники.
2.3. Кривые Безье.
Тег
Определяет параграф (абзац) текста. Как правило, блоки текста разделяют между собой абзацами (параграфами). В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый «красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка – небольшой вертикальный отступ.
Закрывающий тег
необязателен.
Тег
Записанный без атрибутов, по умолчанию выравнивает текст по левому краю страницы. Но он и некоторые другие теги, например
могут содержать дополнительный атрибут align (читается "элайн", от английского "выравнивать"). Однако в настоящее время для выравнивания элементов рекомендуется использовать стили.
Выравнивает абзац по левому краю
Выравнивает абзац по правому краю
Выравнивает абзац по центру
Выравнивает абзац по ширине
Выполните пример 4.
Пример 4. Тег абзаца.
https://pandia.ru/text/79/171/images/image013_2.jpg" width="484 height=265" height="265">
Тег
рисует горизонтальную линию , которая зависит от используемых атрибутов. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке . Закрывающий тег не требуется.
Атрибуты:
align - Определяет выравнивание линии.
color - Цвет линии.
noshade - Рисует линию без трехмерных эффектов.
size - Толщина линии.
width - Ширина линии.
Выполните пример 5.
Пример 5. Коллекция горизонтальных линий
Самостоятельно
измените значения параметров. Просмотрите результат.
Предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с пустым пространством сверху и снизу.
Выполните пример 6.
Пример 6. Цитата
Обратите внимание на характерные отступы.
Тег
относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы, предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.
Задает блок предварительно форматированного текста. Такой текст отображается обычно моноширным шрифтом и со всеми пробелами между словами. В HTML любое количество пробелов идущих в коде подряд на веб-странице показывается как один. Тег
Позволяет обойти эту особенность и отображать текст как требуется разработчику.
Выполните пример 7. С помощью звездочек напишите своё имя.
Пример 7. Тег преформатирования
Строчные элементы
Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения. Например:
Этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Очень удобно при публикации стихов.
Выполните пример 8.
Пример 8. Разрыв строки
Универсальный тег, предназначенный для определения строчного элемента внутри документа.
С помощью тега можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега ) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег и определить для него стиль текста.
Разница между блочными и строчными элементами следующая:
· Строчные элементы могут содержать только данные или другие строчные элементы, а в блочные допустимо вкладывать другие блочные элементы, строчные элементы, а также данные. Иными словами, строчные элементы
· никак не могут хранить блочные элементы.
· Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.
· Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина строчных элементов равна их содержимому плюс значения отступов, полей и границ.
Популярное в рубрике:
Как объединить слои в фотошопе в один или соединить их в группу...
читать
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Top