Изучите веб-стандарты и следуйте веб-стандартам при разработке и производстве. 52CSS.com обсуждал с вами множество вопросов, связанных с версткой, и основной контент, представленный на странице, — это изображения и текст. Сегодня мы обсудим с вами вопросы, связанные с версткой текста в верстке веб-страниц CSS.
Как установить шрифт, цвет, размер, расстояние между абзацами, буквицу и отступ первой строки. Наконец, мы поговорим о некоторых часто используемых китайских раскладках на веб-страницах, таких как усечение китайских иероглифов, перенос слов фиксированной ширины (перенос слов и разрыв слов) и т. д. Поскольку я просто пишу о некоторых примерах применения, если вам нужно полное введение в свойства CSS и более глубокое изучение, вы можете обратиться к дополнительным руководствам на 52CSS.com.
1. Установите шрифт текста, цвет, размер и т. д. с помощью шрифта и т. д.
шрифт-стиль устанавливает курсив, например, шрифт-стиль: курсив;
Font-weight задает толщину текста, например Font-weight: Bold;
font-size устанавливает размер текста, например, font-size: 12px (или 9pt; проблемы с отображением в разных единицах см. в руководстве по CSS).
line-height устанавливает межстрочный интервал, например line-height: 150%;
color устанавливает цвет текста (обратите внимание, что это не цвет шрифта), например, color: red;
font-family устанавливает шрифт, например, font-family: «Lucida Grande», Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif (это распространенный метод письма);
2. Макет абзаца: используйте поля, отступы и выравнивание по тексту.
В китайских абзацах используется тег <p> (или другие контейнеры). Для левого и правого края можно использовать поля или отступы (эквивалентно отступам), а также пробелы до и после абзаца. например:
Пример исходного кода [www.downcodes.com]
р {
поле: 18 пикселей 6 пикселей 6 пикселей 18 пикселей;
/*Они вверх, вправо, вниз, влево, по часовой стрелке, начиная с двенадцати часов*/
}
Используйте text-align для выравнивания текста, например:
Пример исходного кода [www.downcodes.com]
р {
text-align: center /*выравнивание по центру*/
}
Методы выравнивания включают в себя левое, правое и выравнивание (выравнивание обоих концов).
Многие новички не очень знакомы с отступами и отступами. Их представление показано на рисунке ниже.
3. Вертикальный текст: используйте режим письма.
Атрибут режима записи имеет два значения: lr-tb и tb-rl. Первое значение по умолчанию — лево-право, верх-низ, а второе — верх-низ, право-лево.
например:
Пример исходного кода [www.downcodes.com]
р {
режим записи: tb-rl;
}
Можно комбинировать с набором направлений.
4. Проблема с маркерами: использование стиля списка
Символы маркеров в CSS включают диск (сплошная точка), круг (открытый круг), квадрат (сплошной квадрат), десятичный (арабские цифры), нижний римский (строчные римские цифры), верхний римский (прописные римские цифры), нижний -альфа. (строчные английские буквы), Upper-Alpha (прописные английские буквы), none (нет). Например, установите маркеры списка (ul или ol) в квадраты, например:
Пример исходного кода [www.downcodes.com]
ли {
стиль списка: квадратный;
}
Кроме того, list-style также имеет некоторые значения. Например, вы можете использовать небольшие изображения в качестве маркеров и просто написать URL-адрес («адрес изображения») непосредственно под list-style. Но 52CSS.com категорически не рекомендует такой подход. Рекомендуется установить изображение в качестве фона li.
5. Эффект буквицы
Псевдообъект: первую букву можно использовать с размером шрифта и плавающей запятой для создания эффекта буквицы.
например:
Пример исходного кода [www.downcodes.com]
р: первая буква {
отступ: 6 пикселей;
размер шрифта: 32pt;
плавать: влево;
}
6. Отступ текста: используйте text-indent.
text-indent может отступать от первой строки контейнера на определенную единицу. Например, перед каждым абзацем на китайском языке обычно стоят два китайских иероглифа. Это можно написать так:
Пример исходного кода [www.downcodes.com]
р {
text-indent: 2em; /*em — относительная единица, 2em — двойной размер слова*/
}
Если размер шрифта равен 12 пикселей, то отступ text-indent: 2em будет составлять 24 пикселя.
7. Усечение китайских символов фиксированной ширины: используйте переполнение текста (отображение эффекта многоточия).
Фоновый язык можно использовать для усечения содержимого поля в базе данных, например до 12 китайских иероглифов (позже с использованием многоточий). Но иногда необходимо фильтровать html-теги и т. д., но при использовании CSS для управления этой проблемы нет. Например, примените к списку следующий стиль:
Пример исходного кода [www.downcodes.com]
ли {
переполнение: скрыто;
переполнение текста: многоточие;
пробел:nowrap;
}
8. Разрыв строки китайских символов (слов) фиксированной ширины: используйте разрыв слова.
Например, если вы хотите отображать множество названий мест (предполагается, что они разделены пробелами) в контейнере фиксированной ширины, чтобы избежать разрыва названий мест посередине (то есть одно слово находится сверху, а другое слово разрывается на следующую строку). Затем вы можете использовать разрыв слова. например:
Пример исходного кода [www.downcodes.com]
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
Нанкин Шанхай Шанхай Нанкин Шанхай Нанкин Шанхай Шанхай Шанхай Нанкин Шанхай Шанхай Нанкин Шанхай Шанхай Нанкин Шанхай Нанкин Шанхай Нанкин Шанхай Нанкин Шанхай Нанкин Шанхай Нанкин Шанхай Нанкин Шанхай Шанхай Нанкин Шанхай Шанхай
</div>
Стоит отметить, что пробелы внутри заменить нельзя (должен быть хотя бы один мягкий пробел). .
9. Китайская фонетическая нотация: использование тегов Ruby и атрибутов Ruby-Align
Например, для <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby> вы можете использовать Ruby-align для установки выравнивания. Это видно в руководстве по CSS. Подробности можно узнать в разделе Ruby-Align.