Цвет основного текста


Содержание

Найти контрастный цвет текста по отношению к фону

gunslinger, Коль речь пошла о цветах, может быть вы знаете ответ на такой вопрос. Вот есть цвет фона и цвет текста. Если эти цвета близки, то естественно, пользователь текст будет видеть с трудом. Как по данному цвету фона найти гарантированно приемлемо видимый на нем цвет текста? Инверсия, конечно, не подходит (127, 127, 127) инвертируется в (128, 128, 128)

Добавлено через 3 минуты
Интересует несложная формула или алгоритм.

18.02.2015, 20:32

Как получить комплементарный (контрастный) цвет, зная координаты точки на окружности
Доброго всем времени суток! Для одного проекта нужно частично повторить возможности данного сервиса.

Цвет текста на форме влияет на цвет текста компонентов формы
Всем доброго времени суток! Появилась потребность написать на форме. При смене цвета текста.

Выписывание текста ячеек — лежащего в определенном радиусе по отношению к фигуре
Доброго времени суток, специалисты по экселю. Помогите решить проблему. На листе находится.

Задать стили (цвет текста) списку. Как задать цвет текста
Помогите задать стили(цвет текста) списку. Как задать цвет текста ?

18.02.2015, 22:15 2

Байт, как возможный вариант — проверить все вершины трёхмерного гиперкуба (по каждой координате — 0 или 255) и выбрать ту вершину (цвет), у которой макс. расстояние до цвета фона.

Да, конечно, может получиться «вырвиглаз» типа красного на зелёном. Т.е. макс.отличие цветов в евклидовой метрике -не гарантирует красоты или комфорта.

18.02.2015, 22:58 [ТС] 3 19.02.2015, 14:57 4

Байт, предложу, как мне кажется, 100%-ный вариант, если требуется именно видимость текста на фоне и ничего более не требуется. Этот вариант — частный случай от предложенного VTsaregorodtsev, сводится всего к 2 ситуациям (можно снизить до одной, но тут нужно немного поразмыслить; если что вдруг «накопаю», выложу результаты).
«Тупо» меняем цвет текста на черный или белый и гарантированно должны получить видимый текст на любом фоне. На практике не проверял, но (по логике) уверен в правоте чуть более, чем полностью.
Вебмастер тебе точно бы на вопрос ответил, не используя крайние варианты (но я к таковой категории лиц не отношусь).

Добавлено через 2 часа 21 минуту
Придумал такое:

19.02.2015, 14:57
01.10.2015, 12:44 5
01.10.2015, 18:10 [ТС] 6
02.10.2015, 09:47 7
11.07.2020, 20:43 8

gunslinger, Хорошие вариант, но лучше работает если скоррективать по известной формуле яркости:
Y = 0.3R + 0.59G + 0.11B

15.07.2020, 14:04 9
15.07.2020, 14:04
15.07.2020, 14:04

Как поменять цвет текста консоли на любой цвет из RGB цветов
Цвет консоли можно поменять используя только 16 встроенных цветов или можно использовать комбинации.

Цвет фона, цвет текста в определённом EDIT и шрифт
Сначала опишу чего добиваюсь: Для всех(кроме 1го, заблокированного от ввода) сделать текст текста.

Как изменить цвет текста в HTML-странице?

При создании веб-страницы приходится сталкиваться с различными проблемами дизайна. Одним из распространённых является вопрос, как изменить цвет текста в HTML. Решить её достаточно просто, при этом существует два различных способа.

Задание атрибута встроенного стиля текста

Чтобы понять, как изменить цвет текста в HTML, достаточно взглянуть на список атрибутов текстового поля. Среди них имеется ряд значений, определяющих стиль текста, заключенного в данные теги, которые указываются внутри ключевого слова style.

Для изменения цвета текста достаточно в выбранном участке текстового поля внутри открывающегося тега ввести слово style= ». Внутри данного атрибута можно указывать различные значения параметров — за изменение цветового оттенка текста отвечает значение атрибута color. Указав этот параметр, после знака двоеточия необходимо указать цвет, в который будет окрашены все символы данного поля. При этом, определяя оттенок, можно указать как явное значение цвета, например, red или yellow, так и его шестнадцатиричное значение, или rgb.

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

текст

текст

текст

Изменение цвета с использованием CSS

Использование таблицы стилей также позволяет решить, как изменить цвет текста в HTML. CSS полностью поддерживается всеми современными версиями HTML, а также позволяет изменять стиль сразу нескольких элементов страницы.


Чтобы понять, как изменить цвет текста в HTML с помощью CSS, не обязательно разбираться в формальном языке определения внешнего вида. Для определения атрибутов некоторого элемента, необходимо создать CSS-описание, которое записывается внутру тега , и определяется тегом

Как выбрать более подходящий способ?

Ознакомившись с тем, как изменить цвет текста в HTML, следует определиться, каким способом в каких случаях лучше и удобнее пользоваться. Если изменения коснутся нескольких элементов документа, то стоит воспользоваться вариантом с использованием таблицы стилей — в этом случае страница не будет содержать излишнего кода и можно будет с лёгкостью изменить стиль каждого из элементов, просто отобразив их в самой таблице. В случае работы лишь с одним элементом можно обойтись и изменением атрибута встроенного стиля текста — этот метод несколько проще в понимании и более удобочитаем.

Изменение цвета шрифта и фрагмента выделения текста в Microsoft Word

Введение

Текстовый редактор Microsoft Word имеет множество уникальнейших функций, которые помогают пользователю работать с документами любого объёма. Кроме стандартного форматирования в программе, можно выделять весь текст или его фрагменты несколькими возможными вариантами. Например, можно поменять цвет шрифта, выделить его жирным или курсивом. Наряду с этим есть возможность подчёркивания, зачёркивания или закрашивания текста определённым маркером. При необходимости предусмотрена функция, позволяющая изменить цвет отдельной области. Рассмотрим всевозможные способы, которые позволяют не только сделать блок информации заметным, но и убрать существующее в Ворде выделение. Приведённые рекомендации позволят проделать любую манипуляцию всего за несколько шагов.

Форматирование текста — одна из главных функций редактора

Цветовое изменение шрифта

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

Для того чтобы изменить цвет шрифта в Ворде, необходимо выделить нужную часть документа, подлежащую дальнейшему изменению. Затем курсором из небольшой панели инструментов выбрать оптимальную гамму, которой будут окрашены все буквы и символы. При необходимости пользователь может аналогичным образом изменить цвет текста. Параметр «Цвет» содержит все существующие решения.

Редактор Microsoft Word позволяет легко и качественно форматировать большие объёмы информации, посредством специфического инструментария применяя отдельные темы, что обеспечит современный вид любому документу. Начинающему пользователю полезно знать, что тема в Ворде представляет собой огромный список команд, которые могут всего за один щелчок менять цветовую схему, состоящую из определённого набора, шрифты и общий принцип оформления. Всё это вкупе позволяет всего за несколько мгновений преобразить документ, изменить не только текст, но и многие другие элементы.

Цветовое выделение отдельного фрагмента документа

Чтобы выделение цветом касалось не самого шрифта, а области, которая окружает пространство обозначенного фрагмента, пользователю нужно перейти в категорию «Главная», среди прочих инструментов выбрать стрелку, которая находится в выпадающем меню около строки «Цвет». Эта манипуляция вызывает в Ворде команду, которая меняет гамму непосредственно самого выделения.

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

Вернуть стандартный вид электронному указателю поможет повторный клик по ранее представленной команде.

Отмена выбранного действия

Убрать разноцветное выделение текста в Word следует точно такими же действиями, которыми он был применён. Всё, что нужно для работы с выделением шрифта или области вокруг него, располагается в одной вкладке, которая называется «Главная». Убрать из документа жирный и курсивный шрифты позволит повторное нажатие на определённые кнопки центрального меню, в частности, «Ж» и «К». Правда, прежде чем изменить и убрать выделение, нужно «показать» компьютеру место, которое подлежит форматированию. Помогают убрать цвет шрифта кнопки «Нет цвета» и «Авто». Изменить стиль форматирования следует с помощью применения команды «Обычный стиль».

Заключение

Для работы в редакторе Microsoft Word пользователь, кроме всех остальных полезных кнопок и команд, должен знать о существовании весьма простой и удобной — кнопке «Убрать всё форматирование». Именно она помогает избавиться от всех ранее сделанных выделений и отметок. Найти её в Ворде можно на вкладке «Главная». Однако следует учесть, что эта команда уберёт всё, оставив в документе (в случае наличия) цветовое выделение текста.

Изменение цвета шрифта

Вы можете изменить цвет текста в документе Word.

Выделите текст, цвет которого требуется изменить.

На вкладке Главная в группе Шрифт щелкните стрелку рядом с элементом Цвет шрифта, а затем выберите цвет.

Для быстрого форматирования текста можно использовать мини-панель инструментов с параметрами форматирования. Мини-панель инструментов отображается автоматически при выделении текста.

Если в списке нет подходящего цвета, щелкните Другие цвета, а затем выберите цвет на вкладке Обычные или создайте собственный цвет на вкладке Спектр.

Для изменения цвета, прозрачности и оттенка текста выберите инструмент Градиент. Инструмент «Градиент» недоступен в Word 2007.

Теория цвета в цифрах

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы

Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

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

То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.

Распознавание цвета

Шестнадцатеричный код может быть сокращен с шести символов до трех. Например цвет #FAE означает #FFAAEE. Такая возможность иногда помогает упростить код, и что важнее, легко сократить количество оттенков, если это требуется.

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

Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».


Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:

Подчеркивание ссылок

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

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, необходимо использовать тег span внутри каждого тега a, например:

Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:

Цвета контента

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

Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:

Редактирование фона

Легко управлять фоном, изменяя hex-код цвета:

  • #404040 — нейтральный
  • #504030 — теплее
  • #304050 — холоднее

Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:

  • #404040 — нейтральный
  • #594039 — теплее
  • #394059 — холоднее

Подбор и комбинирование цветов

Понимание структуры шестнадцатеричного кода цветов дает дизайнеру возможность точно подбирать комбинации цветов и выбирать цветовые схемы. Самая простая техника — это переставлять одну пару в разные места кода. Еще один способ — удвоение первой цифры в первой паре и разделение на два остальных первых цифр. Также можно комбинировать цвета, взятые из фото. Описанные способы наглядно продемонстрированы на рисунке ниже:

Цвет текста html

основной цвет текста

Если для текста не задан цвет, текст страницы является черным в разметке HTML по умолчанию.

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

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

Таким образом, мы можем иметь, например:

HTML: цветная ссылка

Объяснение, что такое ссылки, кажется излишним, ведь опыт веб-серфинга уже научил нас тому, что ссылка — это ссылка, мост между одной страницей и другой.

Но не все знают, что текстовые ссылки имеют разные состояния:

Установите цвет текста и ссылок по всей странице HTML

Таким образом, мы можем иметь, например:

HTML: цветная ссылка

Объяснение, что такое ссылки, кажется излишним, ведь опыт веб-серфинга уже научил нас тому, что ссылка — это ссылка, мост между одной страницей и другой.

Но не все знают, что текстовые ссылки имеют разные состояния:

СТАТУС описание
Нормальное соединение( link ) Обычно ссылка, когда она «в состоянии покоя», каким-то образом подсвечивается на HTML-странице, чтобы ее было легко найти. В традиционном HTML ссылка всегда подчеркивается (удалить подчеркивание можно только с помощью CSS). По умолчанию ссылки синие ( # 0000FF ).
Посещенная ссылка (visited ) Ссылка посещается, когда URL страницы появляется в истории пользователя. По умолчанию посещаемые ссылки являются фиолетовыми (точнее: # 800080 ).
Активное соединение (active) Ссылка активна, когда ссылка нажата и происходит переход с одной страницы на другую. Это не особенно полезная функция сегодня, но когда модемы имели гораздо более низкую скорость, чем сегодня, просмотр «активной» ссылки все еще был признаком того, что что-то происходит. В Internet Explorer вы также можете видеть пунктирную линию вокруг активной ссылки. Другое условие, при котором ссылка считается «активной», — это когда вы нажимаете на нее правой кнопкой мыши. Короче говоря, ссылка активна, когда «она имеет фокус».

Поэтому у нас есть три канонических состояния ссылки (ссылка в состоянии покоя, активная ссылка и посещенная ссылка) и дополнительное условие, представленное таблицами стилей (состояние ссылки при наведении курсора):

Также цвет ссылок всей страницы может быть через атрибуты тела:

Ссылки в соответствии с настройками по умолчанию синие, чтобы изменить цвет:


Чтобы изменить цвет посещенных ссылок (по умолчанию фиолетовый):

ссылки, которые вы посещаете, хранятся в истории браузера, поэтому, если вы хотите восстановить первоначальный цвет ссылок, просто удалите историю.

Чтобы изменить цвет на посещаемые ссылки:

Таким образом, полный синтаксис для установки ссылок:

Как в html изменить цвет текста?

Здравствуйте, дороге друзья!

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

Если ваш сайт сделан на одной из CMS, то для изменения цвета текста вы можете использовать встроенный функционал визуального редактора, однако такая функция там не всегда есть, а ставить ради этого дополнительный модуль или плагин не всегда есть смысл.

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

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

Значение цвета можно задавать несколькими способами:

  • При помощи кодового названия (Например: red, black, blue)
  • В шестнадцатиричном формате (Например: #000000, #ccc)
  • В формате rgba (Например: rgba(0,0,0,0.5))

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

Как изменить цвет текста в HTML с использованием CSS?

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

HTML


CSS

Вместо color-text вы можете указать свой класс.

Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом .
3. Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:

Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.

Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.

Изменяем цвет в HTML коде при помощи атрибута style

Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.

Здесь же при необходимости через ; вы можете задать и другие CSS свойства, например, размер шрифта, жирность и так далее.

Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега или артибута style.

Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)

Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.

В итог получится вот так:

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:


    1. Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;

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

  • 3. Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
    Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.
  • Вот, в общем то и всё что касается изменения цвета в HTML. Как видите, ничего сложного! Если у вас возникнут какие то вопросы – пишите их в комментариях.

    Цвет шрифта и цвет фона — Рейтинг контрастности

    • Цветовая комбинация — цвет шрифта и цвет фона — очень сильно влияют на разборчивость текста.

    Как вы думаете, какие два цвета возглавляют список самых читабельных вариантов?

    Черный шрифт на белом фоне, не так ли? А вот и нет.

    • Наиболее удобной цветовой комбинацией в наружной рекламе считается черный шрифт на желтом фоне.

    По данным института цвета «Pantone Color Institute» желтый и черный цвета представляют собой хроматические противоположности, а контраст яркости между этими двумя цветами составляет 85 процентов.

    Итак, продолжим рейтинг читабельности шрифта на цветных фонах.

    Цвет шрифта и цвет фона — Рейтинг

    3 место — желтый шрифт на черном фоне

    4 место — белый цвет шрифта на черном фоне

    5 место — синий шрифт на белом фоне

    6 место — белый шрифт на синем фоне

    7 место — синий шрифт на желтом фоне

    8 место — желтый цвет шрифта на синем фоне

    9 место — зеленый шрифт на белом фоне

    10 место — белый шрифт на зеленом фоне

    11 место — красный шрифт на белом фоне

    12 место — белый шрифт на красном фоне

    13 место — красный шрифт на желтом фоне

    14 место — желтый шрифт на красном фоне

    15 место — розовый шрифт на белом фоне

    16 место — белый цвет шрифта на розовом фоне

    17 место — розовый шрифт на желтом фоне

    18 место — желтый шрифт на розовом

    • Согласно данным Т.Х Нильссона — эксперта в области читабельности цветной графики и шрифта в рекламе — шесть комбинаций оказались более читабельными, чем черный шрифт на белом фоне.

    Шрифт на фоне — Рейтинг


    1. Черный на розовом
    2. Черный на желтом
    3. Черный на оранжевом
    4. Темно-зеленый на желтом
    5. Черный на красном
    6. Темно-зеленый на белом
    7. И вот только здесь! — Черный на белом

    Тем не менее все исследователи считают, что темный шрифт на светлом фоне представляет собой наиболее читабельную комбинацию.

    И многие эксперты склоняются к тому, чтобы отдать предпочтение черному шрифту на белом или желтом фоне в различных средствах рекламы — как наружной , так и онлайн — рекламе.

    Когда вам надо будет создать рекламный текстовый баннер — заметный и читабельный — воспользуйтесь советами этой статьи.

    Вот, например, я сделала такой баннер — заголовок к статье.

    Полный список статей / Дизайн текста / Версия для печати / translit / абракадабра :-)

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

    0. Основной текст.

    Элементы контента на странице должны иметь единый стиль оформления, чтобы страница была адекватно воспринимаема и легко читабельна. Это касается в основном шрифта и цветов, но и отступы не исключение. Размер шрифта должен быть достаточно большой, а если требуется использовать маленький шрифт, то обязательно стоит предусмотреть возможность изменения его размера, например, использование em вместо px для указания размера шрифта в вёрстке (IE6 не умеет изменять размер шрифта если он указан в пикселях, остальные браузеры с этим справляются).

    Есть мнение, что рубленый шрифт (без засечек) более читаем с экрана, чем шрифт без засечек (не говоря уже о декоративных шрифтах). Соглашусь, с некоторыми оговорками. Если шрифт мелкий, то стоит использовать шрифт без засечек:

    Windows Mac OS Unix/Linux
    Arial
    Arial Black
    Impact
    Lucida Sans Unicode
    MS Sans Serif
    Tahoma
    Trebuchet MS
    Verdana
    Charcoal
    Gadget
    Geneva
    Helvetica
    Lucida Grande
    Bitstream Vera Sans
    Lucida
    Luxi Sans
    URW Gothic L

    Если шрифт большой (например, заголовок), то можно использовать шрифт с засечками, который будет выглядеть гораздо изящнее.

    Windows Mac OS Unix/Linux
    Times New Roman
    Georgia
    Palatino Linotype
    Sylfaen
    Bookman Old Style
    Book Antiqua
    Garamond
    Times
    Palatino
    Gill Sans
    Lucida Bright
    Baskerville
    Century Schoolbook L
    URW Bookman L
    URW Palladio L
    Nimbus Roman No9 L
    Bitstream Vera Serif
    Utopia

    Всё, конечно, зависит от стиля дизайна сайта. К слову, рекомендую почитать следующие статьи: Как выбрать шрифт для Web-сайта и Как выбрать шрифт для Web-сайта 2: serif и monotype.

    1. Заголовки

    Существуют 6 уровней заголовков, которыми не стоит пренебрегать, ведь очень часто электронный документ (в данном случае веб-сайт) может быть многоуровневым и все уровни заголовков могут быть востребованы. Хотя использование всего «спектра» заголовков может привести к тому, что пользователь запутается в уровнях. Поэтому трёх уровней заголовков в тексте будет достаточно. Заголовки самых верхних уровней лучше оставить для форматирования заголовочных надписей для различных блоков и заголовка сайта и страницы.

    Рекомендую для заголовков самых верхних уровней использовать большого размера шрифт и достаточно контрастный цвет. Спускаясь по уровню заголовков постепенно снижайте их яркость приближаясь к цвету основного текста. Делается это для того, чтобы мелкие заголовки были более читаемы. Например, если зелёный цвет один из основных цветов на сайте, то рекомендую в графическом редакторе изобразить градиент, где с одной стороны будет располагаться ваш зелёный цвет, а с другой стороны — цвет основного текста.

    Дело в том, что чем ярче и светлее цвет текста, тем он меньше контрастирует со светлым фоном. Для заголовков верхнего уровня яркость шрифта, а стало быть его низкая цветовая контрастность компенсируется их размером и контрастом формы. По мере уменьшения размера, уменьшается контраст формы, а стало быть уменьшается удобочитаемость, поэтому следует это компенсировать контрастом цвета, т. е. цвет заголовков делать более тёмным.

    Пример, отлично иллюстрирует, сказанное.

    Если стиль сайта подразумевает использование нескольких цветов, то можно их взять, расположить в порядке яркости и применить для заголовков. Но не стоит перебарщивать. Разные оттенки одного цвета допустимы. Но если вы будете использовать для всех шести заголовков разные по спектру цвета, то содержимое будет слишком пёстро оформлено и это будет мешать. Последний шестой заголовок, является заголовком самого низкого уровня и, в принципе, может даже не отличаться от основного текста ни цветом, ни размером. Можно просто сделать его жирным.

    2. Размеры

    Размеры заголовков и текстовых блоков должны быть рассчитаны так, чтобы, во-первых, заголовки разного уровня были легко отличимы, т. е. различия должны быть на столько контрастны на сколько это возможно в определённом диапазоне. Но слишком большой контраст размера породит разобщённость элементов — этого следует избегать.

    Размер самих блоков текста зависит от размера шрифта. Как правило наиболее удобен для чтения блок текста шириной в 65 символов, поэтому для больших объёмов текста не подходит резиновая вёрстка. Высота абзаца, желательно, не должна превышать 7 строк.

    3. Отступы

    Количество пустого места прямо пропорционально читабельности — это уже достаточно известное правило. Времена km.ru прошли (хотя сейчас дизайн слегка улучшен), сейчас наиболее актуален дизайн в так называемом стиле «Web 2.0», который, если не брать во внимание закруглённые углы, глянец, отражения а только форматирование текста, по сути представляет собой наглядный пример того, как должен выглядеть удобный для чтения сайт.

    Почему раньше были сайты похожие на zvuki.ru? Всё очень просто. Веб-дизайн унаследовал компактную вёрстку от газет и журналов, где каждая страница имела определённую и весьма немаленькую цену. И сейчас в газетах стараются на одну страницу запихнуть как можно больше. По началу в веб-дизайне поступали точно так же.

    Примеры перегруженных сайтов.

    Но постепенно, до дизайнеров стало доходить, что пространство на веб-сайте не ограничена, а стало быть можно делать больше отступов. Больше отступов — глазам больше места для отдыха. «Стены текста» и обилие многоколончатых текстовых блоков раздражают глаза.

    Стандартная вёрстка 90х — 3–6 колонок с небольшими отступами и чёткими разделительными линиями или фонами.


    Современная вёрстка — 1–3 колонки с большими отступами и не всегда с очевидными делениями. Очень часто разделение блоков реализуется за счёт больших отступов и/или слабых границ и фонов.

    Отступы между текстовыми блоками должны быть соразмерны размерам текстовых блоков (не очень тавтологично получилось?). Т.е. так, чтобы расстояние между текстовыми блоками не отрывало их друг от друга по смыслу.

    Примеры не перегруженных сайтов

    Высота строки должна быть не слишком большой, чтобы не спутать её с разделением абзаца и не слишком маленькой, чтобы текст не перестал быть нечитабельным. Рекомендую пропорцию от 3×2 до 5×3. Например, если размер шрифта равен 12px, то высоту строки можно ставить 18—20 px.

    Раньше, в печати, абзацы отделяли красными строками. В печати это допустимо, поскольку с бумаги читать гораздо легче, чем с экрана. В электронных документах для разделения абзацев используют отступы между самими абзацами. Отступы дают возможность легко отличить, где заканчивается абзац, не только в начале строки но и в её конце.

    Расстояние между абзацами следует ставить в диапазоне от высоты шрифта до высоты строки. Расстояние должно чётко указывать на разделение абзацев, но не должно совсем разорвать их взаимосвязь.

    Расстояние от заголовка и до начала текстового блока должно быть равно расстоянию между абзацами, а расстояние от конца текстового блока до следующего заголовка должно быть примерно в два раза больше, чем расстояние от заголовка до начала текстового блока. Это делается для того, чтобы обозначить принадлежность текста к определённому заголовку. Существующие настройки по-умолчанию во всех браузерах неприемлимы, поскольку они подразумевают равные расстояния от заголовка до другого содержимого сверху и снизу.

    4. Таблицы

    Основные свойства таблиц которые не помогают а только мешают воспринимать информацию: вертикальное выравнивание и ужасные рамки. Во-первых вертикальное выравнивание должно быть соответствующим содержимому, содержимое обычных ячеек долно иметь выравнивание по верху, содержимое заголовочных ячеек — по центру. Причём, если в горизонтальных заголовочных ячейках допустимо центрированное горизонтальное выравнивание, то в вертикальных заголовочных ячейках — нет.

    Рамку таблицы можно создать двумя способами:

    1. Использовать свойство border и border-collapse: collapse для таблицы.
    2. Использовать разный фон для таблицы и ячеек таблицы, при этом border-collapse: separate, а расстояние между ячейками задаётся с помощью border-spacing.

    Отступы у от границы ячейки до её содержимого должны быть не меньше половины высоты строки абзаца. А текст в заголовочных ячейках всегда должен отличаться либо жирностью, либо размером шрифта.

    В идеале, каждая нечётная строка таблицы должна отличаться фоном от чётной строки. Реализацию нужно согласовывать с программистом.

    Не стоит так же забывать и про заголовок самой таблицы (тэг ). Кстати, рамка у caption во втором варианте таблицы (с помощью background) выглядит лучше.

    Меняем цвет текста и фона

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

    нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.

    Как можно указывать цвет?

    Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

    • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
    • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

    Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

    Как изменить цвет текста?

    Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:

    style= «color:имя цвета» >. — указание цвета текста по имени.

    style= «color:#HEX-код» >. — указание цвета текста по коду.

    И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег и примените атрибут к нему.

    Пример изменения цвета текста

    Результат в браузере

    Красный текст заголовка

    Синий текст параграфа.

    Зеленый курсив. Красный текст.

    Как изменить цвет фона?

    Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:

    style= «background:имя цвета» >. — указание цвета фона по имени.

    style= «background:#HEX-код» >. — указание цвета фона по коду.

    Пример изменения цвета фона

    Результат в браузере

    Заголовок.

    Жирный текст. Обычный текст.

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

    1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
    2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
    3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
    4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
    5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).
    Илон Маск рекомендует:  Компилятор пишется так
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL