Как с помощью css задать красный цвет текста для элемента

Задать цвет текста html – Применение цвета к HTML элементам с помощью CSS — Веб-технологии для разработчиков

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

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

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

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

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

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

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

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

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

Как всегда не забудем сохранить файл и посмотрим результат:

Как задать цвет шрифта с помощью HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

  • color – задает цвет текста; &#13;
  • size – устанавливает размер текста; &#13;
  • face – задает семейство шрифтов. &#13;

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Изменение цвета текста и добавление тени

Цвет текста

Если вам не нравится стандартный цвет текста, вы всегда можете его изменить с помощью свойства color, в качестве значения указав нужный вам цвет, например color:green:

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

Добавление тени

Для добавления тени к тексту используется CSS свойство text-shadow, которое может принимать до четырех параметров:

  1. смещение тени вправо (при положительных значениях) или влево (при отрицательных значениях) от текста &#13;
  2. смещение тени вниз (при положительных значениях) или вверх (при отрицательных значениях) от текста &#13;
  3. размытие тени, чем больше число, тем смазаннее будет тень, нулевое значение означает полное отсутствие размытости (определяет четкую и резкую тень) &#13;
  4. цвет для тени &#13;

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

Примечание: свойство text-shadow не поддерживается в IE9 и более ранних версиях.

С этой темой смотрят:

УЧЕБНИК HTML для новичков &#8212; Цвет текста

Цвет текста

А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый &#8212; можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно &#8212; и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить &#171;решетку&#187; &#8212; &#171;#&#187;! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) &#8212; значение #FF0000 и так далее. То есть если мы напишем:

Обе эти записи идентичны. Приведу значения некоторых цветов:

Таблица цветов
Название цвета Color Код Цвет
aква 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

Ну а теперь от слов к практике?

Возьмем то же самое стихотворение, и поставим перед собой задачу:

  1. Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
  2. Каждый куплет стихотворения раскрасим в свой цвет: первый &#8212; в синий, второй &#8212; в зеленый, ну а третий &#8212; в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий &#8212; в числовом эквиваленте зеленого и желтого цветов.
  3. Первый куплет напишем шрифтом Impact
  4. Размер второго куплета дадим размером в абсолютном размере 4 пункта
  5. Размер третьего куплета дадим в относительном размере +1 пункт
  6. Ну и автора задвинем в тег ADDRESS

Задача ясна? Ну тогда поехали! Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:

Листинг 10. Стихотворение

<FONT color=red face=&#187;Comic Sans MS&#187; size=7>
<CENTER>
СТИХОТВОРЕНИЕ</CENTER>
</font>

Это не сложно <BR>
Это не важно <BR>
Просто отважно <BR>
В небо шагнуть <BR>
</FONT>

И осторожно <BR>
Там, где возможно <BR>
Темного облака <BR>
Край отогнуть. <BR>
</FONT> <BR>

Стертые лица, <BR>
Забытые профили <BR>
И многоточий упрямая нить. <BR>
Свет разливается <BR>
И проявляется <BR>
То, что уже никогда не забыть. <BR>
</FONT>

Ирина Лео</ADDRESS>

Сохраним наш файл под именем &#171;text4.html&#187; и затем откроем этот файл в окне браузера:

Вот они, цвета радуги!

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

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

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

Тренировка!

Введите в форму любой текст, необходимые теги, нажмите на &#171;посмотреть&#187; и любуйтесь на свою работу!

Как задать цвет текста в css

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

Для начала отметим, что все цвета можно задавать в трех форматах:

На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.

Самым простым способом изменить цвет текста в html является использование тега . Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:

Новая версия стандарта HTML5 его не поддерживает. Но все современные браузеры понимают и еще видимо будут долго понимать. Тег font широко распространен на сайтах. Что впрочем легко объяснить его доступностью и простотой.

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

Если текст не изменяет свой цвет, то можно попробовать воспользоваться декларацией !important

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

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

Классы primer1 и primer2 можно применить к любым другим html тегам.

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

В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.

Цвет, используя CSS, можно задавать тремя способами.

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

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

Пример 1. Установка цвета элемента по его названию

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

Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном HTML (пример 2).

Пример 2. Установка цвета элемента по шестнадцатеричному значению

Также допустимо использовать сокращенную запись, вроде #fc0 . Она означает, что каждый символ дублируется, в итоге получим #ffcc00 .

3. С помощью RGB

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).

Пример 3. Установка цвета элемента по шестнадцатеричному значению

Установка цвета фона и фонового рисунка

Цвет фона определяется значением свойства background-color , а изображение, которое используется в качестве фона, задается свойством background-image . Значением по умолчанию для цвета фона является transparent , которое устанавливает прозрачный фон. Для установки фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла изображения.

Пример 4. Цвет фона и фоновое изображение

Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения), как показано в примере 5.

Пример 5. Повторяемость фонового рисунка

В данном примере фоновый рисунок повторяется по горизонтали.

Положение фона определяется свойством background-position . У него два значения, положение по горизонтали (может быть — right , left , center ) и вертикали (может быть — top , bottom , center ). Положение можно, также, задавать в процентах, пикселах или других абсолютных единицах (пример 6).

Пример 6. Положение фона

В данном примере фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top .

Свойство background-attachment: fixed фиксирует фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.

Приветствую вас, дорогие друзья!

В данной статье я бы хотела более подробно рассказать про то как задать цвет шрифта в css и рассказать про основные форматы задания и коды цветов CSS и HTML.

Навигация по статье:

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

Как задать цвет шрифта css?

Для этого вы можете воспользоваться специальным CSS-свойством color

Пример:

Где вместо black указывается значение цвета для шрифта текста.

Более подробно о значении цветов в CSS и их форматах я распишу ниже

Например:

Изменяем цвет текста абзаца и href = ” # ” > ссылки

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

  1. 1. При помощи кодового значения цвета хтмл.

Например:

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

  1. 2. Задание цвета в шестнадцатеричном коде:

Например:

Где #000000; — это код черного цвета.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

  1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки

В CSS это выглядит так:

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб, приведена ниже

  1. 4. Задание цвета при помощи формата rgba

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

Например:

Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

Таблица значений основных цветов HTML, RGB и в шестнадцатеричном коде

Название Цвет HTML Шестнадцатеричный код Цвет в формате RGB
Чёрный black #000000 0, 0, 0
Серый gray #8A8A8A 138, 138, 138
Светло-серый silver #C7C7C7 199, 199, 199
Белый white #FFFFFF 255, 255, 255
Красный red #FF0D0D 255, 0, 0
Розовый fuchsia #FF24FF 255, 36, 255
Сиреневый purple #B300B3 179, 0, 179
Синий blue #0909FF 0, 0, 255
Голубой aqua #15FFFF 20, 255, 255
Зелёный green #009B00 0, 155, 0
Салатовый lime #05FF05 5, 255, 5
Жёлтый yellow #FFFF04 255, 255, 4
Оранжевый orange #FFAD15 255, 173, 21

Инструмент для определения значений цветов онлайн

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

Помогла инфа? Оцените её

Поделитесь информацией с друзьями и играйте вместе!

Как задать цвет текста в css Ссылка на основную публикацию Как задать цвет текста в css
Adblock
detector

Как изменить цвет таблицы в HTML

Как изменить цвет таблицы в HTML

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

  1. Указание цвета фона ячеек. Осуществляется с помощью свойства background-color.
  2. Указание цвета текста в ячейках. Осуществляется с помощью свойства color.
  3. Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color.

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

И за цвет здесь отвечала последняя часть – lightrgay.

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

Как изменить цвет ячейки

Давайте посмотрим, как выглядит код в CSS, в котором задан цвет для ячейки.

Разумеется, изменять цвета можно и у table, и у td, и у th. Давайте попробуем придать нашей таблице умножения более солидный вид.

Добавим стили для ячеек-заголовков с тегом th, а также для ячеек по диагонали, в которых расположены квадраты чисел:

Результат в браузере:
Раскрашенная таблица умножения

Как изменить цвет рамки в таблице

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

  1. тип линии, в нашем случае solid (сплошная)
  2. толщина линии, в нашем случае 1px
  3. цвет линии, в нашем случае синий

Напомним ещё раз, как выглядит задание цвета рамки для ячейки:

Как изменить цвет строки в таблице

Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td, то должны понимать, что применимы стили будут и к остальным тегам.

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

А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:

И результат в браузере:
Таблица с чередованием цвета в строках

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

Для того, чтобы изменить цвет текста в таблице используется свойство color. Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:

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

Изменяем цвет текста для сайте

Если вы сами хотите сделать через теги на подобие FONT, SPAN и DIV, то здесь все очень просто, но в этом случай вам только нужно знать цвета. Вы на самом сайте можете увидеть прописные цвета, как &#171;red, green, blue&#187; но больше всего вам попадется 16-ричном код, который вам представлен ниже. И лучше безусловно его делать на фотошоп, как там вы просто видите курсор и смотрите какой оттенок и код автоматически появляется. Есть и скрипты оттенков, и там можно что то подобрать, но вам виднее будет.

Скрипт для использования в CSS:

* // весь текст на странице будет синим
body //текст BODY будет красным
.class_element //для элемента с определенным классом
#div_element //для элемента с определенным ID

Ставим его и настраиваем как вам нужно.

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

Здесь вы даже в этом случай можете использовать сам стиль и получиться так.

Оттенок цвета как #0000FF он и является является 16-ричным кодом.

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

PS &#8212; а так кто в стилях немного понимает, он может просто найти тот кусок, который будет отвечать за гамму. Просто сайт построен на многих оттенках, и у него нет одного главного, под каждую запись идет свой оригинальный. И без всяких стилей вы в ручном режиме можете изменить.

Оформление текста на сайте

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

Размеры шрифта:

<font> Шрифт размером 13 пунктов </font>
<font> Шрифт размером 15 пунктов </font>
<font> Шрифт размером 9 пикселей </font>
<font> Шрифт размером 12 пикселей </font>
<font> Шрифт размером 15 пикселей </font>
<font size=&#187;2&#8243;> Шрифт 2-го размера (может быть от 1-го до 7-го) </font>
<font size=&#187;4&#8243;> Шрифт 4-го размера </font>
<font size=&#187;+1&#8243;> Шрифт на 1 размер больше обычного </font>

<h2> Заголовок 1-го уровня </h2>
<h3> Заголовок 2-го уровня </h3>
<h4> Заголовок 3-го уровня </h4>
<h5> Заголовок 4-го уровня </h5>
<h5> Заголовок 5-го уровня </h5>
<h6> Заголовок 6-го уровня </h6>

Оформление текста с помощью шрифтов:

<font> Шрифт Comic Sans Ms </font>
<font> Шрифт Monotype Corsiva </font>
<font> Tahoma, 13 пикселей </font>

Оформление текста с помощью цвета:

Синий текст
* Цифра #0000ff означает синий цвет в RGB палитре.

<font color=&#187;red»> Красный текст </font>
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

<div> Голубой фон </div>
* У фона тоже можно менять цвет. Обратите внимание, что атрибут style использует синтаксис CSS.

<div> Синий текст, серый фон </div>

Некоторые предопределённые цвета

Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RRGGBB):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF

Оформление текста с использованием тени/подсветки:

Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет.
X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».

<font>
Tahoma с контуром </font>

<font>
Tahoma вдавленный </font>

<font>
Tahoma, много оттенков </font>

Выравнивание текста и форматирование параграфов

Выравнивание текста по левой стороне

<p align=&#187;center»> Выравнивание текста по центру </p>

<center> Отцентрированный текст </center>
<p align=&#187;right»> Выравнивание текста по правой стороне </p>

<p align=&#187;justify»> Выравнивание текстов по обеим сторонам — для текстов, имеющих длину более одной строки </p>

<p> Вариант выравнивания текстов по обеим сторонам с использованием параметра форматирования CSS </p>

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

У меня возникают проблемы при изменении цвета текста, который находится в классе меток JavaFX.

Это код, который я до сих пор.

Когда я создаю его и играю с ползунками, это выглядит так.

Как я могу отредактировать цвета текста «Красный», «Зеленый» и «Синий», чтобы цвета текста соответствовали подобным словам?

enter image description here

Я считаю, что это связано с созданием HBox? Я попробовал это с этим, но не знал, как сделать это правильно. Я также попытался создать переменные stringLabels1, stringLabels2, stringLabels3 и stringLabels4 для каждой из строк, но у меня возникли проблемы с этим в части gridPane. Возникли проблемы при кодировании любого из них.

Как с помощью css задать красный цвет текста для элемента

Форум Приднестровской поддержки CMS XOOPS.

По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

XOOPSДобро пожаловать на сайт поддержки XOOPS.

Приднестровская поддержка XOOPS

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

Решение
Стиль элемента формы, как и любого другого HTML-элемента, можно задать с помощью CSS.

Вид формы по умолчанию

Рис. 6.1. Вид формы по умолчанию в броузере Firefoxi

Изображенная на рис. 6.1 форма оформлена в соответствии с настройками по умолчанию, используемыми броузером Firefox под Windows XP. Ее вид будет изменяться при просмотре в различных броузерах под разными платформами. Ниже представлена типичная форма:

Внешний вид этой формы можно изменить, написав правила стилей для элементов form, input, textarea и select :

Теперь форма выглядит, как на рис. 6.2.

Та же форма после применения CSS-стилей

Рис. 6.2. Та же форма после применения CSS-стилей (DEMO)

Обсуждение
Как вы наверняка догадались, заданные правила стилей для HTML-элементов form, input, textarea и select будут применены по отношению к каждому их экземпляру, находящемуся на странице, с которой связан файл таблицы стилей. Для изменения оформления полей формы мож- но использовать множество различных свойств. С помощью CSS можно управлять практически всеми аспектами поля <input type=”text”> :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *