Форматирование текста средствами CSS +

Давайте займемся категорией CSS редактора свойств чем она может нам помочь в форматировании текста. Прежде всего там присутствует уже знакомая нам группа кнопок-переключателей задающая выравнивание абзаца. Что еще?

Еще здесь присутствуют знакомые нам кнопки-выключатели позволяющие сделать шрифт выделенного фрагмента текста полужирным и курсивом. Только делают они это средствами CSS, а не тегами HTML.

Но зачем это нужно — дублировать средства форматирования в HTML и CSS? Дело в том, что теги HTML <strong> и <em>, кроме того что делают шрифт полужирным и курсивным соответственно, дают ему определенное значение. Так, текст, являющийся содержимым тега <em>, считается важным, а текст внутри тега <strong> — очень важным. Web-обозреватели, конечно, дополнительно никак его не выделят, но программы чтения с экрана могут подчеркнуть его важность, скажем, интонацией. А полужирный и курсивный текст, отформатированный средствами CSS, наоборот, никакого дополнительного значения не получает — не считается важным — и, соответственно, ничем не выделяется сверх полужирности и курсива

Продолжим. Помнится, мы собирались задать для заголовка другой шрифт. (Это, кстати, обычная практика в полиграфии — задавать для заголовков иной шрифт, нежели для основного текста.) Очень кстати в редакторе свойств присутствует комбинированный список Шрифт. Откроем его. Хм, странно… Каждый его пункт содержит названия сразу двух или трех шрифтов. Почему?

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

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

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

Мы можем специально задать параметры текста для страницы; как это сделать, будет описано далее в этой главе. Если же мы их не зададим, Web-обозреватель будет использовать шрифты, указанные в его настройках.
Кроме того, мы можем ввести имя нужного шрифта (или даже целый шрифтовой набор) прямо в комбинированный список Шрифт, как в обычное поле ввода. Тогда выделенный в окне документа текст будет набран шрифтом, имя которого мы ввели. Но это уже на наш страх и риск — кто знает, установлен ли этот шрифт на компьютере каждого посетителя нашего сайта..

Давайте выберем для заголовка шрифтовой набор, скажем, Times New Roman, Times, serif И полюбуемся на результат.

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

Не менее странная картина… Наряду с числовыми пунктами, задающими соответствующие размеры шрифта в пунктах, там присутствуют какие-то совсем непонятные… Что они задают?

А задают они стандартные размеры шрифта. Всего их семь, и называются они xx-small, x-small, small, medium, large, x-large и xx-large — в порядке от самого мелкого до самого крупного. Это, опять же, сделано для того, чтобы любая страница могла быть нормально отображена на всех компьютерах, подключенных к Сети, независимо от их аппаратной и программной конфигурации.

Пункты larger и smaller списка Size задают размер шрифта соответственно на одну ступень больше и меньше того, что задан для родителя. Числовые пункты задают размер шрифта в пунктах — это понятно. А пункт Нет указывает для выделенного фрагмента тот же размер шрифта, что задан у родителя.

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

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

Зададим для заголовка размер шрифта, равный 36 пунктам. Теперь мало точно не покажется…

Напоследок давайте зададим для заголовка черный цвет текста Вы спросите — зачем, ведь он и так черный? Потерпите, всему свое время.

В правой части селектора цвета мы видим поле ввода, где вводится код нужного цвета в формате RGB. RGB расшифровывается как «Red, Green, Blue» — «красный, зеленый, синий». А сам формат задания цвета выглядит так — #rrggbb, где rr — это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете красной составляющей, gg — зеленой, а вв — синей. Пример задания цвета в формате RGB — #336699 (это тускло-голубой цвет).

Нужно отметить, что иногда применяется другой, «компактный», формат задания RGB -кода цвета: #rgb. Здесь доли всех трех составляющих цвета — красной, зеленой и синей — обозначаются одним шестнадцатеричным числом. Например, тускло-голубой цвет в «компактном» формате будет записываться так — #3 69.

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

Большую часть этого окна занимает палитра — набор разноцветных квадратиков. Чтобы выбрать нужный цвет, достаточно щелкнуть на соответствующем квадратике. После этого окно выбора цвета закроется, а выбранный цвет будет тотчас применен к выделенному тексту. Если же нужно закрыть данное окно без выбора цвета, следует нажать клавишу <Esc>.

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

Здесь нужно сказать еще несколько слов о цветах, применяемых в Web- дизайне. Дело в том, что разные компьютерные платформы — даже разные компьютеры — имеют различные параметры видеосистемы. Одни могут отображать всего шестнадцать цветов, а другие — все 16,7 миллионов, что с лихвой перекрывает цветовую разрешающую способность человеческого глаза. Разумеется, при таком богатом множестве компьютерных платформ Web-дизайнеру не стоит и рассчитывать, что все его цвета и оттенки будут везде отображены правильно.

Поэтому стандарт HTML определяет так называемую безопасную палитру цветов, правильное отображение которой гарантируется всеми Web- обозревателями на всех компьютерах. Web-дизайнерам рекомендуется придерживаться этой безопасной палитры (хотя никто им не запрещает ее игнорировать). И палитра цветов, выводимая в окне выбора цвета Dreamweaver, также соответствует этой палитре.

Выберем для нашего заголовка в окне селектора цвета черный цвет. И пока закончим на этом.

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

hi {

text-align: center;

font-family: «Times New Roman», Times, serif; font-size: 36pt; color: #000;

}

Здесь добавились три новых, пока еще нам не известных атрибута стиля. Атрибут стиля font-family указывает название шрифта или сразу несколько названий, перечисленных через запятую (т. е. шрифтовой набор); если название шрифта содержит пробелы, оно заключается в кавычки (в нашем случае — «Times New Roman»). Атрибут стиля font-size задает размер шрифта; если его значение задано в виде числа, после него указывается обозначение единицы измерения. А атрибут стиля color задает цвет элемента страницы; в качестве его значения указывается RGB- код цвета в обычном или «компактном» формате (#000 — это черный цвет).

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Нет комментариев

(Обязательно)
(Обязательно, не публикуется)

Юзер за дедку, дедка за тоссер, тоссер за мэйлер - и отослали мессаж!
Яндекс.Метрика beget