Создание встроенной стилизации текста с использованием тегов span в HTML

Введение

В этом лабораторном занятии (lab) вы научитесь использовать HTML-теги  для создания встроенной стилизации текста и улучшения визуального представления веб-контента. Лабораторное занятие сосредоточено на понимании назначения тегов span, создании базовой структуры HTML-документа и применении пользовательских встроенных стилей к определенным сегментам текста.

С помощью практического, развивающегося примера вы узнаете, как можно использовать теги span для нацеливания и стилизации небольших частей текста без нарушения потока документа. К концу этого лабораторного занятия вы сможете применять пользовательские цвета текста, фоны и другие встроенные стилизационные техники с использованием HTML-элементов span, обеспечивая более динамическое и визуально привлекательное форматирование текста на своих веб-страницах. В рамках этого лабораторного занятия мы будем работать с одним HTML-файлом, постепенно добавляя в него новые функции и стили.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-451038{{"Создание встроенной стилизации текста с использованием тегов span в HTML"}} html/text_head -.-> lab-451038{{"Создание встроенной стилизации текста с использованием тегов span в HTML"}} html/text_dir -.-> lab-451038{{"Создание встроенной стилизации текста с использованием тегов span в HTML"}} html/doc_flow -.-> lab-451038{{"Создание встроенной стилизации текста с использованием тегов span в HTML"}} html/inter_elems -.-> lab-451038{{"Создание встроенной стилизации текста с использованием тегов span в HTML"}} end

Понимание назначения тегов span

На этом этапе вы узнаете о назначении и функциональности тегов  в HTML. Теги  являются встроенными (inline-level) элементами. Это означает, что они предназначены для использования внутри текстового потока, в отличие от блочных (block-level) элементов, таких как  или <div>, которые создают разрывы строки до и после себя. Теги  позволяют применять определенную стилизацию или добавлять семантическое значение к небольшой части текста внутри более крупного блока контента.

Представьте себе, что вы выделяете определенное слово в предложении маркером. Тег  действует как этот маркер, позволяя вам нацелиться на это конкретное слово для стилизации.

Они особенно полезны для:

Применения встроенных стилей: Изменения внешнего вида определенных слов или фраз.
Добавления пользовательского форматирования: Сделать части текста жирными, курсивом, изменить цвет и т.д.
Выделения определенного текста: Привлечения внимания к важным частям вашего контента.
Нацеливания на небольшие сегменты текста для манипуляций с JavaScript или CSS: Предоставления точного контроля над отдельными частями текста.

Создадим простой HTML-файл, чтобы продемонстрировать использование тегов . Откройте WebIDE и создайте новый файл с именем styling-example.html в директории ~/project. Этот файл станет нашей "холстом" на протяжении всего лабораторного занятия.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>This line contains a <span>special</span> word.</p>
  </body>
</html>

В этом примере тег  обертывает слово "special". Пока он не меняет внешний вид, но помечает это слово как элемент, который мы можем стилизовать позже.

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE. Взгляните на предварительный просмотр файла styling-example.html в WebIDE. Вы увидите, что оба абзаца отображаются обычным образом. Сам по себе тег  не меняет внешний вид текста.

Применение базовой встроенной стилизации

Теперь сделаем слово "special" выделяющимся. На этом этапе вы научитесь применять встроенную стилизацию непосредственно к элементу  с использованием атрибута style. Встроенная стилизация означает добавление свойств CSS непосредственно внутри HTML-тега.

Откройте файл styling-example.html в WebIDE и измените тег  следующим образом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a <span style="font-weight: bold;">special</span> word.
    </p>
  </body>
</html>

Мы добавили атрибут style к тегу . Внутри атрибута style мы написали font-weight: bold;. Это базовое свойство CSS, которое делает текст жирным.

Вот разбор:

style="... ": Это HTML-атрибут, который позволяет применять правила CSS непосредственно к этому элементу.
font-weight: bold;: Это объявление CSS.
- font-weight: Это свойство CSS, которое контролирует, насколько жирным будет текст.
- bold: Это значение, которое мы присваиваем свойству font-weight.
- ;: Точка с запятой важна! Она разделяет разные объявления CSS внутри атрибута style. Если вы захотите добавить больше стилей позже, вам нужно будет разделять их точками с запятой.

Просмотрите предварительный просмотр файла styling-example.html в WebIDE еще раз. Теперь вы должны увидеть слово "special" в жирном шрифте. Это демонстрирует, как теги  позволяют нацеливаться на определенный текст для стилизации.

Добавление дополнительных встроенных стилей

Давайте сделаем стилизацию более интересной. Вы можете применить несколько встроенных стилей к одному тегу . На этом этапе мы добавим курсив и подчеркивание к нашему слову "special".

Откройте файл styling-example.html в WebIDE и измените тег , чтобы включить больше стилей:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a
      <span
        style="font-weight: bold; font-style: italic; text-decoration: underline;"
        >special</span
      >
      word.
    </p>
  </body>
</html>

Мы добавили еще два объявления CSS внутри атрибута style, разделенных точками с запятой:

font-style: italic;: Это делает текст курсивом.
text-decoration: underline;: Это добавляет подчеркивание к тексту.

Не забудьте точку с запятой после каждого объявления! Это важно, чтобы браузер понимал, где заканчивается один стиль и начинается другой.

Просмотрите предварительный просмотр файла styling-example.html. Слово "special" теперь должно быть жирным, курсивом и подчеркнутым. Это демонстрирует мощь комбинирования нескольких встроенных стилей с использованием тега .

HTML span tag with bold italic underline styles

Настройка цвета текста и фона

Теперь изменим цвета текста и его фона. На этом этапе вы научитесь использовать свойства CSS color и background-color внутри атрибута style тега .

Откройте файл styling-example.html и снова измените тег :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a
      <span
        style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
        >special</span
      >
      word.
    </p>
  </body>
</html>

Мы добавили два новых объявления CSS:

color: blue;: Это устанавливает цвет текста в синий. Вы можете использовать различные имена цветов (например, red, green, black и т.д.) или шестнадцатеричные коды цветов (например, #FF0000 для красного).
background-color: lightyellow;: Это устанавливает цвет фона элемента span в светло-желтый. Как и в случае с color, вы можете использовать именованные цвета или шестнадцатеричные коды.

Просмотрите предварительный просмотр файла styling-example.html. Слово "special" теперь должно быть жирным, курсивом, подчеркнутым, синим и иметь светло-желтый фон. Это демонстрирует, как вы можете существенно изменить внешний вид определенного текста с использованием тегов  и встроенных стилей.

Styled text with blue color and light yellow background

Более практический пример

Давайте посмотрим, как вы можете использовать теги  в более реальной ситуации. Представьте, что вы создаете описание товара. Возможно, вы захотите выделить определенные характеристики или цену.

Откройте файл styling-example.html и замените его содержимое следующим:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <h1>Product Description</h1>
    <p>
      Introducing our new
      <span style="font-weight: bold;">Super Gizmo 3000</span>!
    </p>
    <p>Key Features:</p>
    <ul>
      <li><span style="color: green;">Ultra-fast processing</span></li>
      <li>
        Long-lasting <span style="font-style: italic;">battery life</span>
      </li>
      <li>Available in <span style="color: blue;">multiple colors</span></li>
    </ul>
    <p>Price: <span style="font-size: 1.2em; color: red;">$99.99</span></p>
    <p>
      Limited time offer:
      <span style="background-color: yellow; font-weight: bold; padding: 2px;"
        >Free Shipping!</span
      >
    </p>
  </body>
</html>

В этом примере:

Мы использовали тег , чтобы сделать название товара жирным.
Мы использовали тег , чтобы закодировать цветом основные характеристики.
Мы использовали тег , чтобы сделать цену крупнее и красной. Обратите внимание на свойство font-size здесь, это показывает, что вы также можете контролировать размер текста! Единица измерения em - это относительная единица, которая делает размер текста относительно размера шрифта родительского элемента.
Мы использовали тег , чтобы выделить специальное предложение с помощью цвета фона и отступов. Свойство padding добавляет пространство вокруг текста внутри цвета фона.

Просмотрите предварительный просмотр файла styling-example.html. Вы увидите, как теги  можно использовать для добавления визуального акцента и структуры в ваш контент, делая его более привлекательным и легким для чтения.

Итоги

В этом практическом занятии (лабораторной работе) вы узнали о назначении и реализации HTML-тегов , сосредоточившись на их роли в применении встроенной стилизации текста. Вы увидели, как теги , являющиеся встроенными (inline-level) элементами, позволяют нацеливаться на и стилизовать определенные части текста без нарушения общего потока вашего документа.

Вы практиковались в создании базового HTML-документа и постепенно добавляли встроенные стили с использованием атрибута style внутри тегов . Вы исследовали различные свойства CSS, такие как font-weight, font-style, text-decoration, color и background-color, и научились комбинировать их для достижения различных визуальных эффектов. Наконец, вы применили свои знания для создания более практического примера описания товара, показав, как теги  могут улучшить представление и читаемость вашего веб-контента. Теперь вы можете эффективно использовать теги  для добавления динамического и визуально привлекательного форматирования текста на своих веб-страницах.