Корзина
Светлая тема
Войти
DEVNEW.ORG » Блог » Уроки по HTML » Урок 10. Оформление текста. Что нужно знать о верстке текста
Урок 10. Оформление текста. Что нужно знать о верстке текста
admin
24-10-2023, 20:15 4 106 0

Урок 10. Оформление текста. Что нужно знать о верстке текста

С разметкой текста уже познакомились в одной из статей курса. Из этой статьи знаем, какие основные теги используются для определения контента. Следующий этап заключается в знакомстве с правилами оформления текста через стили css. Помимо базовых тегов, абзацей, заколовкой, списков часто используется тег <span>. По сути этот тег не несет смысловой нагрузки, он строчный, является частью текста. Используется для того, чтобы стилистически выделить несколько слов или строк.
Например :

<span class="red-text">...</span>

Верстка текста, работа со шрифтами

Для задания размера шрифта, его стиля, жирности, вида используются следующие CSS свойства:

  • font-size. Размер шрифта, принимает значения в абсолютных и относительных единицах. К абсолютным относятся пиксели (font-size : 14px;) и пункты (font-size : 15pt;). К относительным проценты (font-size : 70%;) и em. EM обычно примерно равен длине буквы М в шрифте данного вида.
  • font-weight. Жирность шрифта, его начертание. Принимает как целочисленные значения (100,200,300..900), отражающие степень жирности, так и два стандартных normal и bold. Как правило, большая часть браузеров не различает степени жирности, отражает только два последних варианта начертания.
  • font-style. Свойство необходимое для задания нормального начертания (normal) или курсива (italic).
  • font-family. Используется для задания семейства шрифта или задания названия конкретно используемого шрифта, который объявлен в начеле или является стандартным. serif —  без засечек, sans-serif —  с засечками. В примере указаны сначала название шрифта, потом его альтернативные варианты через запятую. Если первый шрифт не будет найден, применятся следующие за ним:
    body { font-family: "PT Sans", "Arial", serif; }


Верстка текста, цвет, высота строки, подчеркивание

Про стилистику шрифтов немного разобрались, теперь перейдем к не менее важным свойствам текста. Нас интересует css-свойства, отвещающие за цвет, оформление, пробелы, высота строки.

  • color. Цвет текста, задается с помощью RGB-формата (color : rgb(255, 0, 0);), шестнадцатеричного кода, который можно посмотреть в фотошопе для любого цвета (color : #000;) и с помощью ключевых слов (color : red; color : blue;). Чаще всего используют шестандцатириный код.
  • text-decoration. Стандартное свойство при работе со ссылками, все ссылки по-умоланию подчеркнуты. Чтобы отменить подчеркивание или задать свой вариант в качестве значений свойства принимаются. text-decoration : none; (отменяем все изменения), text-decoration : underline; (нижнее подчеркивание), text-decoration : overline; (верхнее подчеркивание), text-decoration : line-through; (зачеркнутый текст)
  • text-transform. Работа с регистром в строке. иногда необходимо стилистически изменить регистр текст. Часто это необходимо делать при работе с меню или нестандартным текстом. text-transform : lowercase; (делает все символы строными), text-transform : uppercase; (делает все символы прописными), text-transform : capitalize; (начинает каждое слово с прописной), text-transform : none; (отменяет все значения)
  • white-space. Управление пробелами в тексте, принимает следующие значения. nowrap — текст без переносов; pre — как в исходном коде; pre-wrap — как pre, только появляются переносы, если никак не умещается в блок текст; normal — стандартное отображение.
  • text-align. Выравнивание текста внутри родительского контейнера. left — по левому краю; right — по правому краю; center — по центру;  justify — по ширине.
  • line-height. Используется для регулирование межстрочных интервалов и, очевидно, высоты строки. Значения задаются в пикселях (line-height : 22px;), процентах (line-heigh t: 100%;), множителях, ключевых словах (line-height : normal;).

     

 




Cмотрите также

Игры для Linux 17-04-2023, 19:46
[xfnotgiven_posterlogo]

Mindustry Linux

[/xfnotgiven_posterlogo] [xfgiven_posterlogo][/xfgiven_posterlogo]

Mindustry — игра в жанре Tower Defense с элементами стратегии. Строительство башен, защита от врагов, производство материалов для строительства.

Возможности

  • Жанр Tower Defense с элементами стратегии.
  • Создание конвейеров для подачи боеприпасов в башни.
  • Производство/добыча материалов для строительства.
  • Создание материалов.
  • Создание дронов для автоматической добычи ресурсов.
  • Одиночная кампания.
  • Обучающий уровень в рамках кампании.
  • Сетевая игра.
  • Пользовательская игра — настраиваемые условия.
  • Редактор уровней.

    Установка через Flatpak

    Установка:

    flatpak install flathub com.github.Anuken.Mindustry

    Запуск:

    flatpak run com.github.Anuken.Mindustry

    Установка через Snap

    sudo snap install mindustry
Игры для Linux 17-04-2023, 19:37
[xfnotgiven_posterlogo]

KGoldrunner Linux

[/xfnotgiven_posterlogo] [xfgiven_posterlogo][/xfgiven_posterlogo]

KGoldrunner — аркада, в которой герой бегает по лабиринту, поднимается по лестницам, выкапывает ямы и уклоняется от врагов.

Возможности

  • Необходимо собрать все золотые самородки и пройти на следующий уровень. Враги также охотятся за золотом и за героем.
  • Простая 2D графика.
  • В игре представлено сотни различных уровней. От простых до очень сложных.
  • Два режима игры: классический и KGoldrunner-mode, в котором враги более умные.
  • Управление выполняется с помощью клавиатуры и мыши.
  • Сохранение и загрузка игры.
  • Поддерживается изменение темы оформления.
  • Воспроизведение решения, подсказки, демонстрация прохождения.
  • Доступен редактор уровней.

    Установка через Flatpak

    Установка:

    flatpak install flathub org.kde.kgoldrunner

    Запуск:

    flatpak run org.kde.kgoldrunner

    Установка через Snap

    sudo snap install kgoldrunner

    Установка в Ubuntu (LinuxMint)

    sudo apt install kgoldrunner

    Установка в ArchLinux (Manjaro)

    sudo pacman -S kgoldrunner

    Установка в Fedora

    sudo dnf install kgoldrunner

    Установка в openSuse

    sudo zypper install kgoldrunner

    Установка в Gentoo

    sudo emerge -a kde-apps/kgoldrunner
Игры для Linux 17-04-2023, 19:50
[xfnotgiven_posterlogo]

Shattered Pixel Dungeon Linux

[/xfnotgiven_posterlogo] [xfgiven_posterlogo][/xfgiven_posterlogo]

Shattered Pixel Dungeon — ролевая игра в жанре Roguelike, в которой уровни генерируются случайным образом.

Особенности игры

  • Пиксельная графика.
  • Каждый уровень уникален и генерируется случайным образом.
  • Генерация врагов и объектов на карте случайным образом.
  • Четыре главных героя: Воин, Маг, Бродяга, Охотник.
  • Более 150 игровых объектов.
  • Более 50 видов врагов.
  • 30 различных ловушек.
  • 5 боссов.
  • Уникальные артефакты.

Установка через Flatpak

Установка:

flatpak install flathub com.shatteredpixel.shatteredpixeldungeon

Запуск:

flatpak run com.shatteredpixel.shatteredpixeldungeon

Установка через Snap

sudo snap install shattered-pixel-dungeon




Игры для Linux 17-04-2023, 19:49
[xfnotgiven_posterlogo]

Эмулятор Game Boy Advance Linux

[/xfnotgiven_posterlogo] [xfgiven_posterlogo][/xfgiven_posterlogo]

mGBA — эмулятор портативной игровой консоли Game Boy Advance.

Возможности

  • Эмуляция аппаратной части Game Boy Advance.
  • Эмуляция аппаратной части Game Boy/Game Boy Color.
  • Быстрая работа даже на слабых компьютерах.
  • Вариации интерфейса на Qt и SDL.
  • Поддержка картриджей с датчиками движения и вибрацией (только для игровых контроллеров).
  • Поддержка real-time clock.
  • Поддержка Game Boy Camera и Game Boy Printer.
  • Встроенная реализация BIOS и поддержка загрузки внешних файлов BIOS.
  • Возможность создания скриншотов.
  • Запись видео, GIF, WebP, APNG.
  • Загрузка ZIP и 7z файлов.
  • Поддержка патчей IPS, UPS и BPS.
  • Поддержка отладки игр через интерфейс командной строки и GDB.
  • И другое...


    Установка через Flatpak

    Установка:

    flatpak install flathub io.mgba.mGBA

    Запуск:

    flatpak run io.mgba.mGBA

    Установка через Snap

    sudo snap install mgba

    Установка в Ubuntu (LinuxMint)

    sudo apt install mgba-qt

    Установка в ArchLinux (Manjaro)

    sudo pacman -S mgba-qt

    Установка в openSuse

    sudo zypper install mgba
Программы для Linux 17-04-2023, 19:10
[xfnotgiven_posterlogo]

PikoPixel Linux

[/xfnotgiven_posterlogo] [xfgiven_posterlogo][/xfgiven_posterlogo]

PikoPixel — программа для рисования пиксельных изображений.

PikoPixel не перегружена лишними функциями и обладает базовым функционалом для рисования пиксельных изображений. Содержит минимальный набор инструментов рисования.

Основные возможности

  • Инструменты рисования: карандаш, линия, прямоугольник, окружность, заливка, ластик, пипетка.
  • Инструменты выделения: прямоугольное выделение, выделение произвольной области, выделение замкнутой области.
  • Поддержка слоев.
  • Поддержка прозрачности слоев.
  • Редактирование сетки.
  • Настраиваемый фон холста.
  • Поддержка горячих клавиш.
  • Неограниченное количество отмены действий.
  • Экспорт увеличенных изображений.
  • Диалог выбора цвета с несколькими палитрами.
  • Интерфейс с плавающими панелями.

    Установка в ArchLinux из AUR

    git clone https://aur.archlinux.org/pikopixel.git
    cd pikopixel
    makepkg -sri

    Установка в Gentoo

    sudo emerge -a gnustep-apps/pikopixel

Отзывы (0)

Кликните на изображение чтобы обновить код, если он неразборчив