• Что такое font в html. Цвет шрифта HTML

    Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
    Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
    Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да

    Описание

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

    Синтаксис

    Текст

    Закрывающий тег

    Обязателен.

    Параметры

    color Устанавливает цвет текста. face Определяет гарнитуру шрифта. size Задает размер шрифта в условных единицах.

    Пример 1. Использование тега





    Тег FONT


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



    Описание параметров тега

    Параметр COLOR

    Описание

    Устанавливает цвет текста внутри контейнера .

    Синтаксис

    ...

    Аргументы

    Значение цвета можно задавать двумя способами.

    1. По его названию

    Браузеры поддерживают некоторые цвета по их названию.

    2. По шестнадцатеричному значению

    Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.

    Аналог CSS

    Значение по умолчанию

    Цвет, установленный в браузере по умолчанию.

    Параметр FACE

    Описание

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

    Синтаксис

    ...

    Аргументы

    Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
    serif - шрифты с засечками (антиквенные), типа Times;
    sans-serif - рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
    cursive - курсивные шрифты;
    fantasy - декоративные шрифты;
    monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

    Аналог CSS

    Значение по умолчанию

    Шрифт, установленный в браузере по умолчанию.

    Параметр SIZE

    Описание

    Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4" ), так и относительной (например, size="+1" , size="-1" ). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size , но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.

    Синтаксис

    ...

    Аргументы

    Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.

    Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.

    Blockquote и Pre — форматирование в HTML

    Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).

    Пример

    Пример, заключенный в Blockquote

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

    #content blockquote{margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.png) no-repeat left top;background-position:8px 5px;color:#666;font-size:14px;width:91%;font-style:italic;} #content blockquote p{color:#666;font-size:14px;}

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

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

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

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

    Т.е. все строки внутри элемента Pre будут считаться браузером неразрывными — как вы написали в коде, так и будет отображаться в браузере. Причем, в обозревателе для отображения участка текста, отформатированного с помощью тега Pre, будет использоваться моноширинный шрифт, типа Courier New или подобные ему.

    Форматирование в исходном коде
     тэг Pre
     теги устаревшие
    

    Сам тэг Pre является блочным, а внутри него (этот тег парный) может быть заключен только строчный контент (т.е. внутри него не следует размещать абзацы P, заголовков H1 — H6 и т.п.).

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

    Font — работа с цветом и шрифтом текста в чистом Html

    Strong, Em — тэги логических и визуальных выделений в тексте

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

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

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

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

    А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.

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

    Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:

    1. «U» — выделение подчеркиванием
    2. «Strike» — перечеркивание
    3. «Sup» — верхний индекс
    4. «Sub» — нижний индекс
    5. «Tt» — выделение моноширинным шрифтом
    6. «Big» — увеличить шрифт
    7. «Small» — уменьшить шрифт

    Ну, а теперь давайте рассмотрим перечень элементов логического форматирования текста:

    1. «Em» — логическое выделение важных фрагментов курсивом
    2. «Strong» — то же самое, но только выделяться будет жирным
    3. «Cite» — выделение цитат курсивом
    4. «Code» — предназначен для отображения разнообразных кодов моноширинным фонтом
    5. «Samp» — для выделения нескольких символов моноширинным фонтом
    6. «Abbr» — в атрибуте Title этого тэга прописывается расшифровка какой-либо аббревиатуры (типа, CSS или Html, которые читаются по буквам, а не как единое слово). Прописанные в Title слова будут всплывать при подведении к этой аббревиатуре курсора мыши.
    7. «Acronym» — то же самое, но используется для акронимов, т.е. сокращений, которые читаются не по буквам, а как слово (например, МКАД или Гаи)
    8. «Kbd» — используется для отображения моноширинным шрифтом текста, вводимого пользователем сайта с клавиатуры
    9. «Var» — используется для выделения курсивом переменных в каком-либо коде
    10. «Del» — выделение перечеркиванием, когда требуется показать, что какой-то фрагмент был удален после опубликования Html документа
    11. «Ins» — выделение подчеркиванием, когда нужно показать, что какой-то кусок был вставлен после публикации Html документа

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

    Удачи вам! До скорых встреч на страницах блога сайт

    Вам может быть интересно

    Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
    Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
    Списки в Html коде - теги UL, OL, LI и DL
    Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
    Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
    Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
    Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
    Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
    Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)

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

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


    <НЕАD><ТIТLЕ>Физические стили

    <В>Полужирный
    Курсив
    Подчеркнутый
    Вычеркнутый
    <ТТ>Пишущая машинка
    <ВХ1>Полужирный курсив
    <ВХ1><и>Полужирный курсив подчеркнутый


    Рис. 649. Физические стили

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


    <НЕАD><ТIТLЕ>Физические и логические стили

    <Н2>Это - модифицированный заголовок 2-го уровня

    Рис. 650. Изменение стиля шрифта части заголовка

    С помощью специального тега можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. тег основного шрифта имеет формат . Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тег, то размер основного шрифта по умолчанию устанавливается равным 3.
    тег устанавливает размер текущего шрифта для отдельных фрагментов текста. На стили этот тег не влияет. Диапазон возможных значений - от 1 до 7. Данный тег позволяет также управлять размером текущего шрифта относительно основного. Для этого используются символ + (чтобы увеличить) и символ - (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тег устанавливает размер текущего шрифта равным 5.
    Для задания гарнитуры шрифта используется тег . Например:

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

    FACE="Arial, Sans Serif, Courier">

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

    Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей). Следующая программа демонстрирует управление шрифтом:


    <НЕАD><ТIТLЕ>Установка шрифтов

    <Р>Шрифт Aria АБВГДЕЖЗИК
    <Р>Шрифт CourierАБВГДЕЖЗИК
    <Р>Шрифт SYMBOLАБВГДЕЖЗИК


    Рис. 651. Использование различных шрифтов

    Заметим, что в теге можно использовать несколько или все его возможные атрибуты. Например:

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


    <НЕАD><Т1ТLЕ>Индексы /НЕАD>

    <НЗ>Пример использования индексов
    <Р> (5+x2)x+3

    a1 + a2+ a3
    <Р>Подстрочные примечания 2


    Рис. 832. Использование верхних и нижних индексов

    Кроме рассмотренных выше, имеются дополнительные теги форматирования текстов:

    • - выделение адресов электронной почты, почтовых адресов и
      номеров телефонов;
    • <СIТЕ> - выделение цитат;
    • , - запись текстов программ, символьных констант;
    • - ввод текстов с клавиатуры.

    В последних трех стилях используется моноширинный шрифт (обычно Courier). Например, буквы I и Ж моноширинного шрифта занимают одинаковое место. Использование моноширинных шрифтов обусловлено простой возможностью выравнивания текста с помощью символов «пробел».
    Отметим еще один момент. В теги управления шрифтом, как и в теги логических стилей, можно вставлять атрибут ТITLE= "строка" , что позволяет привязать к тексту внутри этого тега всплывающую подсказку. Аргументом атрибута TITLE является строка подсказки. При остановке указателя мыши на выделенном слове или фразе около указателя появится подсказка. С помощью этого приема можно расшифровывать аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.

    Здравствуйте, уважаемые читатели блога сайт. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов web-страниц. Рассмотрим способы их использования и посмотрим как они работают. Если вы впервые слышите о понятии стилевое оформление страницы и ничего не знаете о CSS, то советую вам начать со статьи « ».

    Font-family — задаем имя шрифта в CSS

    Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

    font-family: <список имен шрифтов разделенных запятыми>

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

    p { font-family: Arial, Verdana, "Times New Roman", san-serif; }

    В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи - Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов , представляющего целые наборы аналогичных шрифтов.

    Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:

    • serif — шрифты с засечками;
    • sans-serif -шрифты без засечек;
    • cursive — шрифты, имитирующие рукописный текст;
    • fantasy — декоративные шрифты;
    • monospace — моноширинные шрифты.

    Кроме имен шрифтов, свойству font-family можно задать особое значение inherit , которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

    Font-size — задаем размер шрифта с помощью CSS

    Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:

    font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

    Давайте теперь рассмотрим подробнее способы применения данного свойства.

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

    • px — пиксели;
    • pt — пункты;
    • in — дюймы;
    • cm — сантиметры;
    • mm — миллиметры;
    • pc — пики.

    Обозначение единицы измерения указывают после самого значения. Например:

    p { font-size: 10px; }
    strong { font-size: 12pt; }

    При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.

    Для задания относительных размеров шрифта используются следующие обозначения:

    • em — размер буквы «m» текущего шрифта;
    • ex — размер буквы «x» текущего шрифта;
    • % — проценты от размера шрифта родительского элемента.

    Например:

    h1 { font-size: 3em; }
    em { font-size: 150%; }

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

    Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:

    Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.

    Свойство color — задаем цвет текста

    Атрибут стиля color задает цвет текста. Синтаксис:

    Цвет можно задать с помощью RGB-кода, который записывается в формате:

    #<доля красного цвета><доля зеленого цвета><доля синего цвета>

    Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h2 на странице выводились красным цветом, необходимо написать такой код CSS:

    h2 { color: #ff0000; }

    Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:

    h2 { color: red; }

    Свойства font-weight, font-style, text-decoration и другие

    С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

    font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

    В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

    Пример использования:

    em { font-weight: bold; }

    Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием .

    С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание :

    text-decoration: none|underline|overline|line-through|blink

    Для этого атрибута доступны пять значений:

    • none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок , которое задано по умолчанию;
    • underline — устанавливает подчеркнутые текст;
    • overline — «надчеркивает» текст, то есть проводит линию над текстом;
    • line-through — зачеркивает текст;
    • blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

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

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

    Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

    text-decoration:underline overline line-through;

    Результат будет такой:

    перечеркнутый подчеркнутый и надчеркнутый текст!

    Свойство стиля text-transform позволяет задавать регистр символов текста :

    text-transform: capitalize|uppercase|lowercase|none

    Свойство может иметь одно из четырех значений:

    • capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
    • uppercase — текст в верхнем регистре;
    • lowercase — текст в нижнем регистре;
    • none — не меняет регистр символов.

    Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height . В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

    p { line-height: 1.5 }

    Для управления расстоянием между символами текста существует свойство letter-spacing . Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS - пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

    em { letter-spacing: 5px; }

    Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

    h1 { word-spacing: 5px }

    Ну и напоследок необходимо рассмотреть свойство стиля font , позволяющее задавать сразу несколько параметров для шрифта . Синтаксис:

    font: font-size font-family

    Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.

    Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

    p { font: 10pt «Times New Roman» }

    А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

    p { font: italic 12px sans-serif }

    На этом рассказывать о свойствах CSS отвечающих за отображение текста на html-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела « ». До новых встреч!

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

    Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

    <span>Урок 6. Изменяем цвет текста </span>

    Текст зеленого цвета

    Текст красного цвета

    Текст фиолетового цвета

    Посмотрим результат в браузере:

    Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

    Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

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

    <span>Урок 6. Изменяем цвет текста </span>

    Текст зеленого цвета

    Текст красного цвета

    Текст фиолетового цвета

    Сохраним файл и посмотрим на результат:

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

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

    <span>Задаем тексту несколько параметров </span>

    Задаем тексту шрифт, размер и цвет

    Задаем тексту шрифт, размер и цвет