Если вы хоть немного разбираетесь в веб-технологиях, то должны знать, что вся разметка и содержимое документа содержатся в html-файле, а в файле стилей css при этом хранятся стили, определяющие внешний вид различных элементов. Так вот, именно css нам нужно использовать для изменения цвета шрифта и всего остального.
В html существуют теги, которые позволяют применить к тексту определенные эффекты, но согласитесь, что придумывать сотни тегов для каждого оттенка было бы не совсем разумно. В css можно управлять этим гораздо более удобно. Например, вот так можно задать цвет шрифта html-элементу body, то есть тегу, включающему в себя все содержимое странички, которое выводится на экран.
body{ color: red; }
body { color : red ; |
Мы записали телу страницы красный цвет. Его получат абзацы, списки, заголовки и все остальные элементы. Это будет до тех пор, пока стили для этих элементов не будут переопределены на другие.
Возможно, у вас имеются небольшие познания в области веб-дизайна? В таком случае вы должны знать о том, что существуют разные цветовые режимы. Например, rgb, rgba, hsl, hex и т.д. Конечно, самый простой способ задать оттенок – просто написать ключевое слово. Мы так и сделали в примере выше, значение red делает буквы красными, blue – синими, brown – коричневыми. Это просто названия цветов по-английски.
Единственное, что вам нужно знать в этом случае – название нужного цвета. Их вы можете посмотреть в интернете в любой таблице. Следующий популярный способ задать цвет – записать его шестнадцатеричный код. Это так называемый hex-формат. Примеры:
p{ color: #000; } /* Текст в абзацах будет черным. */ table{ color: #fff; } /* Содержимое в таблицах будет белым. */
Как видите, нужно записать решетку, после чего код цвета. Как его узнать? Например, можно открыть фотошоп или любой другой графический редактор, в котором при подборе цвета отображается его hex-код. Также можно воспользоваться онлайн-сервисом.
Rgb – еще один популярный формат записи. Он расшифровывается просто – red, green, blue. Цвет в этом формате задается так:
#footer{ color: rgb(234, 22, 56); }
#footer{ color : rgb (234 , 22 , 56 ) ; |
Элемент с идентификатором footer получит указанный цвет. Доля красного составит 234, зеленого – 22, синего – 56. Эти значения можно писать от 0 до 255. Соответственно наш оттенок получится ближе к красному. В Paint вы можете добавлять цвета в палитру с помощью изменения насыщенности трех основных цветов.
Преимущества этого способа в том, что вы выбираете из миллионов цветов, просто изменяя три числа. При записи с помощью ключевых слов в вашем арсенале будет всего лишь несколько сотен цветов.
Да, это новый режим записи, который в графических редакторах есть давно, но именно в веб-дизайне появился относительно недавно. Записывается так:
a{ rgba(255, 12, 22, 0.5); }
rgba (255 , 12 , 22 , 0.5 ) ; |
Последнее число в записи задает прозрачность. Ее можно записывать от 0 до 1, где 1 – полностью непрозрачный текст, то есть поведение по умолчанию. В этом случае все ссылки станут красными, но из-за прозрачности яркость цвета будет значительно меньше, а если под ссылкой есть другой фон или элемент, то его будет видно.
В html есть устаревший атрибут color и с его помощью можно было записать цвет текста с помощью ключевого слова. Сейчас это может даже не сработать в современных браузерах, да и вообще этот метод нарушает общепринятые веб-стандарты. А еще он неудобен.
Ну ладно, мы тут говорим о цвете шрифта для абзацев, ссылок и таблиц, но это цельные элементы, а что, если вам надо определить цвет для одного предложения, одного слова, одной буквы, в конце концов?
Просто заключаем нужный фрагмент в теги span. Прописываем внутри тега атрибут class, которому задаем произвольное, но понятное нам значение. Например, так:
Все, теперь остается только обратиться к селектору в css.
Дата создния: 2009-11-18
Итак, Вот и пришла пора изучить, как изменяются цвета того текста, который Вы ввели. Этот урок будит состоять из 2 частей . В мы разукрасим отдельную часть текста, а во , весь текст сделаем одного цвета, а необходимую его часть, другого цвета.
Хотя все цвета в HTML прописываются необычным способом, делается это очень просто. Во-первых, я предлагаю Вам скачать палитру web-цветов, нажав по слову ПАЛИТРА , или поискать более полную версию в Интернете. Возле каждого цвета в найденной Вами палитре, будет стоять код (английские буквы и цифры). Для того, чтобы наш цвет был, например, синим, необходимо записать такой тег:
Привет! Начинаем изучение HTML
Тоесть вот, что мы имеем:
1.
текст заключен в тег
...
2.
тег
имеет атрибут color (цвет) = #0000FF
Теперь давайте вернёмся к нашему примеру и рассмотрим все наглядно. Снова открываем созданную ранее страничку в блокноте и изменяем цвет шрифта:
Обновляем HTML страницу и проверяем то, что получилось:
Результат: Первая строка стала синего цвета, а вторая осталась по умолчанию - черной.
Таким же образом Вы можете разукрасить любую необходимую часть текста, не зависимо от того, где он расположен, в начале, в середине или в конце текста.
Сейчас мы зададим цвет всему тексту документа . Делается это очень легко. Давайте вспомним нашу третью статью. В ней мы говорили, что все, что будит видно в браузере, прописывается в теге ... , тоесть в "туловище" нашего документа.
И так, как мы знаем, ... - тоже тег, поэтому, мы можем ему, так же как и тегу ... , задать необходимые атрибуты.
Цвет в этом случае задается в открывающемся теге , и запись будит выглядеть так:Весь текст вашего документа
В этом случае весь текст документа, кроме того, который заключен в теги ... с присваиванием цвета, будит иметь красный цвет.
Теперь рассмотрим эту часть статьи на примере. Присвоим всему тексту документа красный цвет, а тот текст, который мы в 1 части сделали синим, таким и оставим. Для этого просто прописываем код открывающемуся тегу :
Затем, как всегда перед просмотром, сохраняем документ:
И, наконец, обновляем HTML страницу в браузере:
Результат: Мы научились задавать всему тексту документа необходимый цвет, а так же делать часть текста другого цвета.
Для изменения шрифта служит тэг с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую "забить" хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.
Пример:
Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации.
Используя данный атрибут с тэгом
Изменять шрифт можно с помощью тэгов и . укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а , соответственно, уменьшает.
Меняя размер отдельных букв, можно добиться интересных эффектов. Например, таким образом можно получить буквицу - укрупненную прописную букву начала абзаца.
Пример:
Отображение участков текста Вэб-страницы шрифтами разного цвета придает ей привлекательность.
Используя атрибут TEXT в контексте тэга
, можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста.Чтобы изменить цвет текста, надо знать наименование цвета, либо его шестнадцатеричный код. Код состоит из символа фунта # и числа, представляющего интенсивность красной, зеленой и синей составляющих цвета. По имени можно сослаться только на 16 стандартных цветов.
Наим-е цвета Код aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00
В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега
Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.
Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:
Раньше в HTML рекомендовалось использовать только , которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.
Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:
<тег style= "color:имя цвета" >... - указание цвета текста по имени.
<тег style= "color:#HEX-код" >... - указание цвета текста по коду.
И как обычно, чтобы изменить цвет текста на всей странице - достаточно указать атрибут style в теге
. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег и примените атрибут к нему.Пример изменения цвета текста
Синий текст параграфа.
Зеленый курсив. Красный текст.
Результат в браузере
Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:
<тег style= "background:имя цвета" >... - указание цвета фона по имени.
<тег style= "background:#HEX-код" >... - указание цвета фона по коду.
Пример изменения цвета фона
Параграф.
Жирный текст. Обычный текст.
Результат в браузере
Параграф.
Жирный текст. Обычный текст.
Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно - прозрачный, вот и все.
Домашнее задание.
