Элементы из предыдущей главы выводятся последовательно на одной горизонтальной строке. Они ведут себя как обычный текст и просто отображаются рядом друг с другом, даже если они имеют определённые размеры и другие свойства, которые не относятся к тексту. Это не должно удивлять, так как
Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как
Чтобы увидеть как работают элементы
Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.
В CSS мы пишем класс .container , который связан с тегом
Container { width: 200px; height: 200px; background-color: blue; }
Посмотрим на это в браузере.
Похоже на один большой прямоугольник. Как насчёт отделить теги
Container { width: 200px; height: 200px; background-color: blue; margin-bottom: 10px; }
Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.
В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:
- inline (строчные);
- block (блочные);
- inline-block (строчно-блочные).
Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле
- Строчные - , ,
- Блочные - ,
,
- Строчно-блочные - ,
По умолчанию, у строчных элементов стилевое свойство display установлено как inline . Для блочных элементов его значение block , а для строчно-блочных элементов inline-block . Теперь вы можете объяснить, из-за чего тег не переносит текст на новую строку. Потому что это строчный элемент, а значит в CSS у него свойство display установлено как inline . С учётом этого код ниже:
Один два три
Браузер отобразит в одну линию:
один два три
Однако можно изменить это поведение, добавив одну строку в CSS:
Span { display: block; }
Теперь наши теги отображаются иначе, каждый из них начинается с новой строки, поскольку мы установили свойство display как block .
Для этого примера мы используем
. Вы можете поинтересоваться, что этот тег описывает в документе. Краткий ответ: ничего. Мы используем тегв тех случаях, когда все другие теги не подходят для использования того, что мы вложили в документ. В общем случае тег(в сочетании с разными классами) применяется для получения различных визуальных эффектов, в результате у него нет функции для описания содержимого. К примеру, если вы желаете сделать три вертикальных колонки на сайте, то, возможно, потребуется элемент, который может разделить некоторые строчные или строчно-блочные элементы.Вообще, хорошей идеей будет не злоупотреблять тегом
, если это возможно.С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги
, чтобы окружить каждый элемент формы.Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!
Заголовки
Для
оформления заголовков используются теги...
С этим думаю всем понятно,это не сложно.Далее
Гарнитура (вид) и цвет шрифтаЗдесь есть два способа. Второй будет описан позднее. Первый - используется тег
С атрибутами face и color , соответственно:
шрифт Verdana
шрифт Verdana
красный шрифткрасный шрифт
шрифт цвета MidnightBlueшрифт цвета MidnightBlue
шрифт цвета MidnightBlueшрифт цвета MidnightBlue
Цвет имеет название и цифровое значение, как видно в этом примере
(MidnightBlue=#191970). О цветах можно написать очень много, но я
остановлюсь на одной ссылке:Подбор цвета . Для использования подходят web-safe и web-smart цвета.
Форматирование текста: использование тега и атрибута style (1)
Тег относится к выделяемому (форматируемому) фрагменту текста:
текст . Сразу замечу, что аттрибуты
(свойства), работающие с тегом , могут применяться также с
тегамиИ
. Однако тегПрименяется к
абзацу, что не всегда нам подходит (хотя при форматировании абзаца
рационально использовать именно его). Тегможно применять
так же, как и - это скорее дело вкуса. Он имеет более
широкую область применения и обладает рядом дополнительных возможностей.
Но это уже не относится к форматированию текста. Поэтому для
определённости остановимся на .Запись
текст лишена какого-либо смысла сама по себе.
Тег предназначен для того, чтобы приписать тексту
какое-либо свойство. Вот их-то я сейчас попытаюсь перечислить в
более-менее логическом порядке.Цвет шрифта
Цвет шрифта можно задать с помощью тега , о чём говорилось выше. Теперь воспользуемся тегом и атрибутом style :
красный шрифт - красный шрифт
Точно так же можно задавать и цифровые значения цветов (подробнее о них см. выше.
Гарнитура (вид) шрифта
О способе задать гарнитуру (вид) шрифта с помощью тега также шла речь прошлый раз.
Сейчас рассмотрим второй способ - с использованием конструкции
шрифт
На место ***
необходимо подставить гарнитуру (вид) шрифта. Как правило, подставляют
название не определённого шрифта, а целого семейства шрифтов, например, Verdana, Times и др. Получаем:шрифт Verdana шрифт Times
Размер шрифта
Для указания размера шрифта используется конструкция
шрифт
Размер
шрифта может задаваться различными способами. Пожалуй, самый наглядный и
простой - подставить вместо *** одно из следующих семи значений:xx-large, x-large, large, medium, small, x-small, xx-small.
Результат:
очень-очень крупный шрифт
очень крупный шрифт
крупный шрифт
средний шрифт
мелкий шрифт
очень мелкий шрифт
очень-очень мелкий шрифтМожно указывать размер шрифта способом, хорошо знакомым из Word - в пунктах (pt). 1 пункт равен 1⁄72 дюйма. Примеры:
12pt
36pt
Значения 12pt, 36pt в этих примерах подставляются на место *** в общей формуле шрифт . Также можно использовать и пиксели:
шрифт 12px
шрифт 36pxПриведённые выше размеры являются абсолютными. Но размер шрифта можно задать и относительным образом - в процентах:
шрифт размера 150% от исходногошрифт размера 150% от исходного
или по отношению к ширине буквы "m" в исходном шрифте (соответствующая единица измерения называется em ):
шрифт размера 1,5em от исходногошрифт размера 1,5em от исходного
Вес (насыщенность) шрифта
Это - то, что можно задать с использованием простого тега
жирный текстжирный текст
С помощью это делается так:жирный шрифт
жирный шрифт
Преимущество такого способа в том, что наряду со значением веса шрифта bold можно использовать также значения bolder и lighter , получая шрифт "разной жирности" (в данном случае речь идёт об относительных значениях). А по умолчанию используется значение normal - обычный шрифт.
Стиль шрифта
Kурсив можно получить как с использованием тега , так и следующим способом:
курсивкурсив
Вместо font-style:italic можно написать font-style:oblique , и тогда должен получиться не курсив, а наклонный ("угловатый") шрифт. Но это не всегда работает.Капитель
Представление информации посредством современной идеи гипертекста абсурдно по сути, но так есть и так работает. С этим не поспоришь и приходится считаться.
С точки зрения современного языка программирования не важно, как представлены данные: строгие типы и обязательное предварительное описание либо нет никаких типов и нужное описание язык сам себе «додумает» по ходу исполнения алгоритма.
Важно отметить: все, что «не понято» браузером, JavaScript или серверным языком, не будет исполнено. Блочный тег при сложившихся обстоятельствах может «превратиться» в строчный, но строчный в блочный - нет.
Логика HTML-страницы
Исторический пример - тег HTML font. Достаточно давно он «не рекомендован» к использованию. Мотивация «не рекомендовано» - характерная черта современного программирования. Отсутствие совместимости кода «вверх«» по версиям и никакой стабильности в последовательном развитии версий программных компонентов и концепций тоже.
Действительно, тег span в HTML гораздо практичнее: он не относится только к шрифту. Span может менять множество атрибутов отображения и использования конкретного содержания.
Строки всегда были основным представлением для любых данных, но не всегда языки программирования определяли это синтаксисом, а программисты отдавали себе отчет в том, что используемое число или логическое значение - всегда строка.
Абсурдность и объективность гипертекста в реализации HTML: верстка - это применение набора тегов (парных или одиночных) для формального описания контента (данных). Ни описание, ни контент нельзя обоснованно назвать информацией. Первое - это некоторый каркас, в который укладывается некоторое содержимое - данные.
Каркас строится из жестко фиксированных кирпичиков (тегов), которые занимают строго определенные места в конструкции, и относительных элементов, которые располагаются «как карта ляжет».
Разбить страницу на разделы отображения данных можно таблицами или блочными элементами, а «залить» получившуюся конструкцию данными можно другими тегами. Обычно их именуют строчными, то есть располагающимися так, как определяет текущая возможность и текущее содержание.
Пример span HTML: что это и как описать
В зеленой рамке приведен пример кода, который браузер отобразил на сером фоне. Блочный элемент div оказался в центре текста, который в коде идет за ним. Первым элементом стал тег с классом scSpanLine. Затем разместился текст, в котором тегом span с классом scSimpleSpan выделено два участка этого текста.
Второй и третий строчные элементы расположились ровно так, как записаны в коде.
Данный пример показывает, как работает span в HTML. Что это просто последовательность данных - очевидно. Не очевидно другое: разработчик может описывать данный тег как угодно, может даже применить правило:
- POSITION: absolute;
Эффекта не будет. Указание координат и размеров также не играет никакой роли. Центрировать или выравнивать span в HTML - бесперспективно. Между тем тег очень практичен и востребован на практике. Это очень удобная обертка для выделения важного момента в общем потоке данных.
Главное - понимать, что span HTML - это способ изменить отображение строки или уточнить правила отображения части строки.
Логика предоставления строчной информации
Использовать язык описания данных HTML по его предназначению, то есть для описания данных, - вчерашний день. Применять серверный язык для формирования тела страницы - современно и так делают «все» разработчики. Особенно этим увлекаются системы управления сайтами (CMS).
Реальная практика и потребность в создании живых сайтов - это динамичное управление каркасом страницы и его контентом. В этом смысле тег span в HTML (что это просто динамика), как результат работы JavaScript, позволяет создавать динамичное содержимое «на лету».
JavaScript работает как преобразователь исходного текста в форматированный и подставляет нужные теги с нужными правилами CSS в исходящий поток, который распределяется по каркасу блочных элементов страницы.
Чем выше профессионализм разработчика, тем больше блочной (или табличной) разметки страницы и тем меньше реального присутствия статичных тегов span в HTML. Что это дает? Динамику. JavaScript - это алгоритм, который может выполнить работу над входящим потоком строк и отобразить его так, как задумал разработчик. Теги span появятся в нужном месте и в нужное время.