Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML. Если вы хотите просмотреть учебник CSS, пожалуйста, нажмите здесь.
Вверху: Markup Language-CSS Mayout . Глава 13 Укажите стиль для текста
Я думаю, что это хорошая идея, чтобы обсудить практику использования CSS для установки стилей текста в главе. Вообще говоря, обработка текстового контента, вероятно, является местом, где CSS используется больше всего, даже для веб -сайтов, которые не соответствуют полностью стандартам. Удалить повторяющиеся теги на веб -страницах когда -то (и теперь) очень привлекательны для дизайнеров, и нетрудно увидеть огромное преимущество использования CSS для управления текстовой печатью, то есть для дальнейшего разделения контента и методов отображения.
Из многих предыдущих примеров мы знаем, что CSS может справиться со многими ситуациями, а установление стилей текста - самый простой способ добавить элементы дизайна для самых основных веб -страниц. В то же время добавление CSS в текст также может помешать нам добавить ненужные изображения на странице.
В этой главе мы увидим, как CSS берет скучный и обычный кусок текста на другую высоту (в новых цветах, размерах и шрифтах). Как сделать гипертекст выглядеть круче?
Указание стилей текста - одна из лучших рабочих мест CSS, даже если они сталкиваются с браузерами, которые немного старые и не полностью поддерживают расширенные функции CSS. В прошлом дизайнеры и разработчики могли захотеть создавать веб -страницы, которые невыносимы и трудных в использовании по современным стандартам при разработке текстов для достижения размера и смелых эффектов (вы когда -нибудь видели веб -страницы, где тексты в основном представлены изображениями? Но вы используете текстовые браузеры ...)
Чтобы предоставить вам некоторые альтернативы использованию изображений и ответить на приведенный выше вопрос, в этой главе вы начнете с абзаца текста, который еще не был разработан, и постепенно добавите к нему различные правила CSS, что делает его убедительным дизайном. Постоянно меняющиеся времена
Начните с рассмотрения текста, который будет обрабатываться в предварительном шрифте браузера. В моем случае предустановленный шрифт составляет 16 пикселей. Используйте браузер Safari на Mac OS X. Из-за этого текст, который вы видите, будет отображаться в противодействии. Если вы используете Windows XP и запустите ClearType, вы можете увидеть аналогичный эффект.
Времена (или Variant Times New Roman) являются предустановленными шрифтами для многих браузеров, однако пользователи легко меняются на их любимые шрифты, поэтому вы, конечно, не можете полагаться на эту заданную ценность.
На рисунке 1301 показан текстовый содержимое, которое мы использовали в этой главе, который не был добавлен со стилем: простой заголовок, отмеченный <h1>, и вот три совета для украшения дома.
Рисунок 13-1 В браузере отображается заголовок, и предустановленный эффект текста изменяет высоту линии
Одним из самых простых и эффективных эффектов в стиле текста является атрибут линии. Добавление дополнительного пространства между каждой строкой текста может облегчить чтение текстовых абзацев, более привлекательных, а также принести замечательные эффекты на вашу страницу.
Вы можете завершить эту технику, добавив следующие правила CSS в тег <body>. Конечно, вы также можете добавить это правило к другим тегам, например, просто желание изменить высоту линии <p>.
тело {
высота линии: 1,5 эм;
}
Значение этого кода: высота строки текста на странице должна быть в 1,5 раза выше высоты текста. Мне нравится использовать EM-единицы при определении высоты линии, потому что они будут меняться с размером шрифта.
На рисунке 13-2 показан эффект после добавления высоты линии.
Рисунок 13-2 Эффект после предустановленного текста плюс высота линии
Это выглядит великолепно, и результаты, которые может достичь небольшой линейной высоты, удивительны.
Предыдущая Page1 2 3 4 5 Следующая страница Прочитайте полный текст