Разница между блочными и строчными элементами следующая.
В примере 1 показано использование тега для выделения отдельных слов.
Пример 1. Применение строчных элементов
Результат примера показан ниже (рис. 1).
Рис. 1. Текст, оформленный с помощью стилей
В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счет фонового цвета, рамки вокруг текста и сменой его цвета.
Пример 2. Свойство display
Результат примера приведен на рис. 2.
Рис. 2. Замена блочного элемента на строчный
В данном примере блочный тег
отображается на веб-странице как строчный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег
в виде строчного элемента. В принципе, аналогичным решением будет использовать вместо
Строчные элементы применяются не только для управления видом текста, но также и при верстке веб-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с текстом.
Пример 3. Наложение слоев
Результат примера представлен на рис. 3.
Рис. 3. Положение рисунка относительно текста
В примере 3 можно вообще отказаться от добавления тега
Пример 4. Использование тега SPAN
Результат примера показан ниже (рис. 4).
Рис. 4. Положение рисунка относительно текста
За счет того, что тег не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.
Резюме
Для верстки строчные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
и подобные широко распространенные теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.
Тег предназначен для определения встроенных элементов объекта. В отличие от блочных элементов, таких как
,
) можно изменить цвет и размер первой буквы, если добавляем начальный и конечный тег и определить для него стиль контента. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавляем параметр class или id с именем селектора.
Синтаксис
Закрывающий тег
Пример 1. Использование тега
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ниже.
Рис. 1. Вид контента, оформленного с помощью тега и стилей
Здравствуйте, уважаемые читатели сайта Uspei.com. Сегодня мы успеваем на финишную прямую по изучению базового курса HTML. Сегодня мы изучим теги DIV и SPAN, которые нам понадобятся при изучении курса CSS. Это логические теги и они никак сами по себе не проявляют себя, но (!), тем не менее, это одни из самых главных тегов в CSS. Давайте рассмотрим на примере.
Если мы объединим какой-либо текст тегом
Вы будете приятно удивлены, когда узнаете, что для HTML справедливо правило 80/20, которое означает, что вам не придется изучать весь язык до последнего винтика. Но, в то же время, полученных из курса знаний вам с лихвой хватит для того, чтобы уверенно делать сайты. К стати для этого у меня есть целый раздел о том, как самому сделать сайт.
Я думаю, что вы понимаете всю силу этого тега. Вам придется использовать его чаще других. Если вы посмотрите исходный код ЛЮБОГО сайта, то вы увидите, что этого тег является практически основным. Данным тегом можно задать фоновое изображение, изменить размеры блока, а также много много других изменений элементов.
Тег span
Но это больше относится к CSS, который мы будем проходить в будущем.
Эту часть мы начнём со знакомства с двумя новыми тегами. Это теги
Но, при их помощи, можно создавать контейнеры, на которые потом очень удобно воздействовать средствами CSS.
Их можно делать видимыми и не видимыми, можно задавать им рамки и размещать в различных частях экрана.
Вы это поймёте на практике, а пока запомним следующее:
А – это встроенный элемент, и внутри его может размещаться только текст, или ещё встроенный элемент, и расположить его можно в любой части текста.
Одним из замечательных свойств тега
Именно благодаря этой особенности, и создаётся блочный каркас сайта.
Если взглянуть на код блочного шаблона, то видно, что он весь состоит из дивов, и вложены они друг в друга по нескольку раз.
Чтобы не сбиться, и для каждого открывающего тега, не пропустить закрывающий, и не запороть тем самым весь код, сначала нужно написать пару
Количество вложений, в принципе, не ограничено. Каждому открывающему тегу задаётся идентификатор, или класс, которые потом используются в таблицах стилей для определения, какому блоку задаются те или иные свойства и значения.
В примере показано, что блоку с идентификатором ( id ) wrapper заданы ширина, временная рамка, внутренние и внешние отступы, и позиционирование.
Тег в основном применяется для выделения каких либо частей текста, путём подключения к нему встроенных стилей.
Тег — голова документа
Тег — голова документа
К цвету можно добавить размер, вид шрифта, и так далее.
На этом предварительное знакомство будем считать состоявшимся, ну а более основательно, как я уже говорил, будем узнавать их на практике, к которой и перейдём на следующей странице.
Это упражнение научит вас как добавлять классы (class) и атрибуты идентификаторов (id) тегам div и span HTML-страницы, которые уже существуют. HTML-страница уже имеет встроенную таблицу стилей, которая должна оставаться без изменений. Ваша задача состоит в том, чтобы сделать так, что страница в чем разница» rel=dofollow»>страница выглядит как следует.
Никаких подробных инструкций. Просто анализируйте правила во встроенной таблице стилей, используйте классы и идентификаторы id и соответствующим образом применяйте их.
Единицы измерений
В CSS вы можете определять размер шрифта, границ (рамок), полей и отступов, используя различные единицы измерений. Ознакомьтесь с таблицей ниже, где указаны различные единицы:
Пиксели (px)
Единица измерений, которая наиболее часто используется в веб-дизайне, — это пиксели. В отличие, например, от дюймов и пунктов, пиксель не является абсолютной величиной. Окончательный размер пикселя определяется размером и разрешением экрана пользователя.
Представьте себе картину шириной 900 пикселей. Если установленное разрешение монитора 800 на 600 пикселей, изображение не поместится на экране. Но если на том же мониторе установлено разрешение 1024 на 768 пикселей, картинка поместится и останется немного пространства.
Типографский пункт (pt)
Пункты должны использоваться для печати. Один дюйм равен 72 пунктам.
Дюймы (in), сантиметры (cm), миллиметры (mm)
Несмотря на то, что это одни из самых распространенных единиц измерений, в веб-дизайне лучше их не использовать.
Пики (pc)
Пика (Picas) — единица измерений, которая используется для печати. Один дюйм равен 6 пикам.
Em (em)
Em, или Мутт, — это относительная единица измерений, определяющая размер буквы «М» в шрифте. Поскольку em — величина относительная, а не абсолютное значение, она часто используется в веб-дизайне.
Ex (em)
Ex, или “x-высота”, определяет высоту строчной «x» шрифта. Ex применяется для установки размера контента в зависимости от размера окружающего шрифта.
Internet Explorer
Netтscape
Опера
Safari
Mozilla Firefox
