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

HTML: Атрибут style

Атрибут style

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

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

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

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

    <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 справочнике на странице с данным свойством.

Задний фон

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

Цвет текста

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

Установка цвета по имени

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

color: silver;

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

Установка цвета с помощью RGB

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255 для числовых значений или от 0% до 100%

Можно установить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 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: DarkGray; color: white;">

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

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

Реклама на сайте | puzinfo@puzzleweb.ru | ruen