Тег предназначен для определения встроенных
элементов документа. В отличие от блочных элементов, таких как
,
Или
, с помощью тега
можно выделить часть информации внутри других
тегов и установить для нее свой стиль. Например, внутри параграфа (тега
)
можно изменить цвет и размер первой буквы, если добавить начальный и конечный
тег и определить для него стиль текста. Чтобы
не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу
стилей, а для тега добавить параметр class
или
id
с именем селектора.
Синтаксис
Закрывающий тег
Обязателен.
Пример 1. Использование тега
Тег SPAN
Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt
ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Теги форматирования
устанавливает перевод строки в месте, где этот тег встречается.
DIV является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
H1...H6 HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.
Сегодня я предлагаю Вам рассмотреть использование тега span
. Данный тег является очень полезным,
с точки зрения применения к нему CSS свойств
. При , этот тег бывает
просто незаменим, ведь при его помощи, мы можем выделять различные элементы внутри определенных тегов и применять к ним
стили, которые нам нужны. Например, мы можем в произвольном абзаце текста выделить в тег span
некоторые буквы,
и задать им определенный цвет, размер шрифта, фоновый цвет, а также другие CSS свойства
, которые Вам нужны.
Давайте я приведу пример использования данного тега, а потом мы разберем данный код.
<span>Использование тега span
</span>
Текст с
class
="red"
>
красным
, class
="green"
>
зеленым
и class
="blue"
>
синим
шрифтом.
И в файле стилей пишем следующее:
Red
{
color: #f00;
font-size: 20px;
}
Green
{
color: #0f0;
font-size: 25px;
}
Blue
{
color: #00f;
font-size: 30px;
}
Если вы все сделали верно, то на экране браузера будет следующий результат:
В html коде
мы выводим абзац, в котором выделяем три элемента в отдельный тег span
, и задаем каждому тегу отдельный
класс. Если не применять никаких css свойств
, то разницы в коде мы не увидим, будет идентично, что с использованием тега span
,
что без его использования. Однако если применить вышеуказанные css свойства
, то результат выполнения кода будет совершенно другим, ведь мы
установили для каждого класса, свой цвет текста, а также размер шрифта. Мы выделяем нужные нам элементы в html коде
, которые помещаем
в отдельный тег span
, и в дальнейшем применяем к нему нужные нам css свойства
, в итоге получаем нужный нам результат.
Для реализации подобных задач и используется тег span
. Теперь, после изучения этого тега, вы будете постоянно
применять его в своей практике, и он будет решать множество задач довольно легко и просто.
Описание
Тег предназначен для определения строчных
элементов документа. В отличие от блочных элементов, таких как
,
Или
, с помощью тега можно выделить часть информации внутри других
тегов и установить для нее свой стиль. Например, внутри абзаца (тега
)
можно изменить цвет и размер первой буквы, если добавить начальный и конечный
тег и определить для него стиль текста. Чтобы
не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу
стилей, а для тега добавить атрибут class
или id
с именем селектора.
Синтаксис
...
Закрывающий тег
Обязателен.
Атрибуты
HTML5
IE
Cr
Op
Sa
Fx
Тег SPAN
Разумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется
действиями неразумных людей.
Бернард Шоу
Результат данного примера показан ниже.
Доброго здоровья, дорогие друзья! Пришло время рассказать о двух важнейших html тегах div и span
, которые являются определяющими при блочной верстке сайта
. Я уже упоминал, что в достопамятные времена сайты верстались с помощью таблиц.
Однако с развитием технологий и постоянным усложнением элементов контента, расположенного на вебстранице, понадобилось разгрузить html код. Для этого был введен CSS (Cascading Style Sheets - Каскадные Таблицы Стилей), в задачу которого входит оформление и позиционирование элементов на странице (то есть, как они выглядят и где располагаются).
Соответственно, вместо некоторых для каждого элемента вебстраницы прописываются . Это позволяет очистить html код документа, что приводит к успешному решению, по крайней мере, сразу двух задач. Во-первых, значительно улучшает читабельность html кода. Во-вторых, уменьшает время загрузки страниц ресурса, что, безусловно, дает возможность должным образом оптимизировать свой проект, в частности, повысить качество , так как долго загружаемые вебстраницы отпугивают посетителей.
Конечно, вы понимаете, что это очень упрощенная схема, при верстке сайта используются все теги, которых немало, однако на рисунке я попытался акцентировать основополагающую роль элемента div при блочной верстке. С помощью тега div создаются блоки (контейнеры), которые вкладываются один в другой.
Важность тега div подчеркивает тот факт, что он не используется в чистом виде, а только с атрибутами id (идентификатор) или class, значением которых служит селектор, свойства которого представлены в соответствующем файле со стилями.
Отличие id и class заключается в том, что идентификатор id должен быть представлен в коде лишь один раз (он представляет уникальный элемент, для которого задаются свои стили оформления). Атрибут class позволяет связать определенный тег со стилями (то есть ко всем данным тегам, которых может быть несколько, будет применяться данный набор стилей). В значении допускается указывать несколько классов, разделяя их пробелами. А теперь рассмотрим код одной из страниц и посмотрим на структуру блочной верстки с использованием контейнеров div:
Как видите, html код, представленный слева, состоит из множества контейнеров, образованных тегом div, вложенных друг в друга, причем каждый со своим идентификатором и (или) классом. Каждому элементу соответствует свой набор стилей CSS, отображенных справа. Конечно, структура html документа состоит не только из контейнеров div, в нее входят и другие теги, однако элемент div вносит решающий вклад в корректное отображение вебстраницы в браузере.
Также, кроме атрибутов id и class, для тега div доступны другие . Но наиболее широко используемыми являются все-таки id и class.
Теперь немного о теге span. Так же, как div является ярчайшим представителем блочных элементов, элемент span - строчных. С его помощью можно выделить часть информации внутри других тегов и определить для них свой стиль, присвоив значения определенным свойствам. Например, внутри абзаца (тег p) можно выделить определенный участок текста, окрашенный в другой цвет. Для этого используем в качестве атрибута class и прописываем значение, которым служит имя селектора.
CMS WordPressпозволяет создавать ресурсы даже
не искушенным в этом молодым вебмастерам.
В файле style.css задаем соответствующие этому элементу стили.
Pre {
color: blue; /* Синий цвет символов */
font-size: 150%; /* Размер шрифта в процентах */
font-family: serif; /* Шрифт с засечками */
}
Пожалуй, на сегодня все. Целью этой статьи было дать вам представление о схеме осуществления блочной верстки сайта, выделив значение блочного тега div и строчного элемента span. Также я считаю этот пост своеобразным мостиком между изучением основ html и стилей CSS, который должен был подтвердить их неразрывную связь. А чтобы научиться быстро применять эти знания на практике,
Элементы из предыдущей главы выводятся последовательно на одной горизонтальной строке. Они ведут себя как обычный текст и просто отображаются рядом друг с другом, даже если они имеют определённые размеры и другие свойства, которые не относятся к тексту. Это не должно удивлять, так как
