Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.
В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.
Группирование с помощью <span>
Группирование с помощью <div>
Группирование с помощью <span>
Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.
Пример – Что такое CSS с помощью </span> :
<p>CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.</p>
Сделаем часть текста красным благодаря использованию преимуществ <span>
<h1>Пример – Что такое CSS с помощью /span:</h1>
<p><span class="vid">CSS</span> (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный <span class="vid">язык</span> описания внешнего вида документа, написанного с использованием языка <span class="vid">разметки</span>.</p> Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:
В CSS: span.vid {color:red;}
Разумеется, вы можете также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх <span>-элементов, как мы говорили в прошлом уроке.
Группирование с помощью <div>
В то время как <span> используется в элементах уровня блока, как в предыдущем примере, <div> применяется для группирования одного или более блок-элементов.
Кроме этого отличия, группирование с помощью <div> работает более или менее аналогично. Сделаем два списка с помощью <div>:
<div id="css">
<ul>
<li>Основные понятия</li>
<li>Структура</li>
<li>Работа с текстом </li>
<li>Работа с изображением</li>
<li>Группы</li>
<li>Классы</li>
</ul>
</div>
<div id="html">
<ul>
<li>Основные понятия</li>
<li>Структура</li>
<li>Теги</li>
<li>Таблицы</li>
<li>Работа с текстом</li>
<li>Работа с изображением</li>
</ul>
</div>
В нашей таблице стилей мы можем использовать такое же группирование, как и раньше:
#css {background:blue;}
#html {background:red;}
Задания
Используя текст, приведенный ниже, сделайте выделение красным цветом и текст наклоном все английские слова и синим цветом имя. Используйте span и другие параметры с предыдущих уроков для создания наклона текста.
CSS используется создателями web-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих web-страниц. Основной целью разработки CSS являлось разделение описания логической структуры web-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой web-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
Создайте три типа списка с разным цветом фона используя <div id="
