Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML

HTML: Атрибут style

Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

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

Код примера познакомит вас с новым способом форматирования документа:

<html>
  <body style="background-color:Gray;">

    <h1>Посмотрите на цвета и стили</h1>
    <p style="font-family:verdana;color:red;">
      Этот текст написан красным цветов с помощью шрифта Verdana.
    </p>
    <p style="font-family:times;color:green;">
      Этот текст написан зеленым цветом с помощью шрифта Times.
    </p>
    <p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p>

  </body>
</html>
Попробовать »

Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. Встроенный стиль применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

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

Задний фон

Задний фон элемента задается с помощью свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style. Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после ";" предыдущего свойства.

Цвет текста

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

Определение цвета по названию

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

color: silver;

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

Определение цвета через значение, задаваемое сочетанием красного, зеленого и синего

Можно определить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

color: rgb(80%, 40%, 0%);

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно писать 204 красного, 102 зеленого и 0 синего.

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

color: rgb(204, 102, 0);

Определение цвета через шестнадцатеричный код

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

color: #cc6600;

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

Шрифт

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

font-family: Verdana, Geneva, Arial, sans-serif;

Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: "Courier New".

Размер

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

font-size: medium;

Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.

Выравнивание текста

Выравнивание текста в HTML документе задаётся с помощью свойства text-align, которое позволяет выравнять текст по правой или левой строне, а так же задать выравнивание текста по ширине. Свойство text-align работает только с блочными элементами, выравнивая все строчные элементы внутри блочного:

<html>
  <body style="background-color: black; color: white;">

    <h1 style="font-family: verdana;">Заголовок</h1>
    <p style="font-size: 10px;">Очень маленький размер текста.</p>
    <p style="text-align: right;">Этот текст будет выровнен по правому краю.</p>

  </body>
</html>
Попробовать »
    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь