Изучите веб-стандарты и следуйте веб-стандартам при разработке и производстве. 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. Макет абзаца: используйте поля, отступы и выравнивание по тексту.
В китайских абзацах используется тег
(или другие контейнеры). Для левого и правого края можно использовать поля или отступы (эквивалентно отступам), а также пробелы до и после абзаца. например:
Пример исходного кода [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]
9. Китайская фонетическая нотация: использование тегов Ruby и атрибутов Ruby-Align
Например, для Zhuyin вы можете использовать Ruby-align для установки выравнивания. Это видно в руководстве по CSS. Подробности можно узнать в разделе Ruby-Align.