Тег span — Уроки по созданию сайтов на WordPress
Тег <span>
Описание
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег<span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Синтаксис
<span>...</span>Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SPAN</title>
<style>
body {
font-family: Arial, sans-serif; /* Рубленый шрифт */
}
.letter {
color: red; /* Красный цвет символов */
font-size: 200%; /* Размер шрифта в процентах */
font-family: serif; /* Шрифт с засечками */
position: relative; /* Относительное позиционирование */
top: 5px; /* Сдвиг сверху */
}
</style>
</head>
<body>
<p><span>Р</span>азумные люди приспосабливаются к окружающему миру.
Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется
действиями неразумных людей.</p>
<p>Бернард Шоу</p>
</body>
</html> |
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Тег SPAN</title> <style> body { font-family: Arial, sans-serif; /* Рубленый шрифт */ } .letter { color: red; /* Красный цвет символов */ font-size: 200%; /* Размер шрифта в процентах */ font-family: serif; /* Шрифт с засечками */ position: relative; /* Относительное позиционирование */ top: 5px; /* Сдвиг сверху */ } </style> </head> <body> <p><span>Р</span>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p> <p>Бернард Шоу</p> </body> </html>
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега <span> и стилей
Атрибут span | HTML | WebReference
Определяет число колонок, к которым будут применяться заданные характеристики. Если этот атрибут отсутствует, то элемент <col> работает для одной колонки. Допускается применять атрибут span к нескольким колонкам и таким образом формировать группы колонок с одинаковыми характеристиками.
Синтаксис
<col span="<число>">Значения
Целое положительное число.
Значение по умолчанию
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>COL, атрибут span</title> </head> <body> <table cellspacing="0" border="1"> <col> <col span="5" align="center"> <col span="4" align="center"> <tr> <td> </td><td>1995</td><td>1996</td><td>1997</td> <td>1998</td><td>1999</td><td>2000</td><td>2001</td> <td>2002</td><td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 19.03.2018
Редакторы: Влад Мержевич
Тeги «div» и «span»
Здравствуйте уважаемые начинающие веб-мастера.
Эту часть мы начнём со знакомства с двумя новыми тегами. Это теги <div> и <span>. Принадлежат они к логическому уровню, то есть явно себя не проявляют.
Но, при их помощи, можно создавать контейнеры, на которые потом очень удобно воздействовать средствами CSS.
Их можно делать видимыми и не видимыми, можно задавать им рамки и размещать в различных частях экрана.
Вы это поймёте на практике, а пока запомним следующее: <div></div> – это блочный элемент, и внутри него могут заключаться любые другие элементы, и он всегда начинается с новой строки.
А <span></span> – это встроенный элемент, и внутри его может размещаться только текст, или ещё встроенный элемент, и расположить его можно в любой части текста.
Одним из замечательных свойств тега <div> является то, что его можно располагать внутри другого дива,хоть он и блочный элемент.
Именно благодаря этой особенности, и создаётся блочный каркас сайта.
Если взглянуть на код блочного шаблона, то видно, что он весь состоит из дивов, и вложены они друг в друга по нескольку раз.
<body>
<div>
<div></div>
<div></div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div></div>
<div></div>
</div>
</body>
</html>
Чтобы не сбиться, и для каждого открывающего тега, не пропустить закрывающий, и не запороть тем самым весь код, сначала нужно написать пару <div></div>, а затем, между ними вставлять содержимое тега.
Количество вложений, в принципе, не ограничено. Каждому открывающему тегу задаётся идентификатор, или класс, которые потом используются в таблицах стилей для определения, какому блоку задаются те или иные свойства и значения.
В примере показано, что блоку с идентификатором (id) wrapper заданы ширина, временная рамка, внутренние и внешние отступы, и позиционирование.
#wrapper{
width: 900px;
outline: 1px solid #787274;
padding: 10px;
margin: 0 auto;
position:relative;
}
Тег <span></span> в основном применяется для выделения каких либо частей текста, путём подключения к нему встроенных стилей.
В примере показано, как при помощи тега <span>, можно покрасить слово head в синий цвет.
Тег<span><head></span> — голова документа
Тег<head> — голова документа
К цвету можно добавить размер, вид шрифта, и так далее.
На этом предварительное знакомство будем считать состоявшимся, ну а более основательно, как я уже говорил, будем узнавать их на практике, к которой и перейдём на следующей странице.
Перемена
Постоялец — хозяйке отеля:
— А что это за странное пятно на потолке у меня в комнате?
— Понимаете, до вас тут жил один химик. . .
— Это пятно от химикатов?
— Нет, от химика.
Подключение таблиц стилей < < < В раздел > > > Селекторы CSS
Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster
span — Xiper.net
Автор: Евгений Рыжков Дата публикации: 16.01.2009Тег <span> — тег-контейнер, не имеет логического значения, используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста.
Строчный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<span>...</span>
Атрибуты
Основные Вспомогательные События
| align | выраванивание текста
|
|---|---|
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный идентификатор |
| lang | определяет используемый язык в документе, на который указывает ссылка |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| style | задает встроенную таблицу стилей |
| title | всплывающая подсказка |
Пример
Дорогу переходим на <span>зеленый</span> сигнал светофора!
Рекомендации по использованию
Твой код:
<html> <head> <title></title> </head> <body> <p>Дорогу переходим на <span>зеленый</span> сигнал светофора!</p> </body> </html> Сделай код и жми тут
Результат:
большой полигонПо теме
Применение тегов Div и Span (примеры кода)
<div> и <span> применяются вместе с каскадными таблицами стилей. По отдельности они не вызывают больших изменений. Факт в том, что тег <span> вообще не влияет визуально на контент. Использование тега <div> приведет к «блокировке» его содержимого, как если бы вы поставили тег <br> до и после секции на странице.
Как и большинство остальных тегов, <div> и <span> могут иметь класс, идентификатор и стилевые атрибуты. Благодаря этим атрибутам стили можно применять к элементам. Теги применяются таким же способом, как и другие HTML-теги. Допускается вложенность одних тегов в другие в несколько уровней.
Образец кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div and Span</title> </head> <body> <div> This text appears in the <span>upper-left hand corner</span> of the page.<br /> It also has a big blue groovy border around it. </div> </body> </html>
Упражнение: Div и Span
Продолжительность задачи: от 10 до 20 мин.
Это упражнение научит вас как добавлять классы (class) и атрибуты идентификаторов (id) тегам div и span HTML-страницы, которые уже существуют. HTML-страница уже имеет встроенную таблицу стилей, которая должна оставаться без изменений. Ваша задача состоит в том, чтобы сделать так, что страница выглядит как следует.
Никаких подробных инструкций. Просто анализируйте правила во встроенной таблице стилей, используйте классы и идентификаторы id и соответствующим образом применяйте их.
Единицы измерений
В CSS вы можете определять размер шрифта, границ (рамок), полей и отступов, используя различные единицы измерений. Ознакомьтесь с таблицей ниже, где указаны различные единицы:
| Единица измерений | Описание | Пример |
|---|---|---|
| px | Пиксели | margin-top: 10px; |
| pt | Пункты | font-size: 12pt; |
| in | Дюймы | padding-top: .5in; |
| cm | Сантиметры | top: 5cm; |
| mm | Миллиметры | left: 45mm; |
| pc | Пика | bottom: 12pc; |
| em | Em | font-size: 1.5em; |
| ex | Ex | font-size: 1.5ex; |
| % | Проценты | width: 80%; |
Пиксели (px)
Единица измерений, которая наиболее часто используется в веб-дизайне, — это пиксели. В отличие, например, от дюймов и пунктов, пиксель не является абсолютной величиной. Окончательный размер пикселя определяется размером и разрешением экрана пользователя.
Представьте себе картину шириной 900 пикселей. Если установленное разрешение монитора 800 на 600 пикселей, изображение не поместится на экране. Но если на том же мониторе установлено разрешение 1024 на 768 пикселей, картинка поместится и останется немного пространства.
Типографский пункт (pt)
Пункты должны использоваться для печати. Один дюйм равен 72 пунктам.
Дюймы (in), сантиметры (cm), миллиметры (mm)
Несмотря на то, что это одни из самых распространенных единиц измерений, в веб-дизайне лучше их не использовать.
Пики (pc)
Пика (Picas) — единица измерений, которая используется для печати. Один дюйм равен 6 пикам.
Em (em)
Em, или Мутт, — это относительная единица измерений, определяющая размер буквы «М» в шрифте. Поскольку em — величина относительная, а не абсолютное значение, она часто используется в веб-дизайне.
Ex (em)
Ex, или “x-высота”, определяет высоту строчной «x» шрифта. Ex применяется для установки размера контента в зависимости от размера окружающего шрифта.
Оцени статью
ОценитьСредняя оценка / 5. Количество голосов:
Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.
Или поделись статьей
Видим, что вы не нашли ответ на свой вопрос.
Помогите улучшить статью.
Напишите комментарий, что можно добавить к статье, какой информации не хватает.Отправить
Спасибо за ваши отзыв!