МегаПредмет

ПОЗНАВАТЕЛЬНОЕ

Сила воли ведет к действию, а позитивные действия формируют позитивное отношение


Как определить диапазон голоса - ваш вокал


Игровые автоматы с быстрым выводом


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


Целительная привычка


Как самому избавиться от обидчивости


Противоречивые взгляды на качества, присущие мужчинам


Тренинг уверенности в себе


Вкуснейший "Салат из свеклы с чесноком"


Натюрморт и его изобразительные возможности


Применение, как принимать мумие? Мумие для волос, лица, при переломах, при кровотечении и т.д.


Как научиться брать на себя ответственность


Зачем нужны границы в отношениях с детьми?


Световозвращающие элементы на детской одежде


Как победить свой возраст? Восемь уникальных способов, которые помогут достичь долголетия


Как слышать голос Бога


Классификация ожирения по ИМТ (ВОЗ)


Глава 3. Завет мужчины с женщиной


Оси и плоскости тела человека


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


Отёска стен и прирубка косяков Отёска стен и прирубка косяков - Когда на доме не достаёт окон и дверей, красивое высокое крыльцо ещё только в воображении, приходится подниматься с улицы в дом по трапу.


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

Стили цветового форматирования





Параметр стили цвета color принимает значения, задаваемые ключевым словом или RGB-значением. Кроме этих ключевых слов, можно задавать идентификаторы системных цветов операционной системы пользователя, например, Windows

Примеры применения ключевых слов:

BODY {color: black }

H1 { color: maroon }

H2 { color: olive }

Примеры применения RGB-значений цветов:

EM { color: #f00 }

EM { color: #ff0000 }

EM { color: rgb(255,0,0) }

EM { color: rgb(100%, 0%, 0%)}

Формат 16-ричной записи RGB-значения содержит три или шесть 16-ричных символов Функция rgb возвращает 16-ричное число с тремя или шестью цифрами. Например, вызов rgb(f, b, 0) возвращает число #fb0 или #ffbb00, в зависимости от цветового разрешения дисплея пользователя.

Устройство отображения документа также корректирует указанные разработчиком RGB-значения. Например, разработчик, вызывая функцию rgb(300,0,0), говорит, что первая (красная) составляющая RGB-значения должна принимать максимально допустимое значение в диапазоне от 0 до 300. Браузер пользователя, если любая из RGB-составляющих цветов дисплея может принимать значение от 0 до 255, решает, что эта составляющая может принимать значение только в диапазоне от 0 до 255

Стили фона

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

<HEAD>

<STYLE type="text/css">

BODY {background: url("images/bgrnd2.giF')

H3{ background: rgb(255,200,100)}

P { background: Gray }

</STYLE>

</HEAD>

</BODY>

<НЗ>Заголовок со своим фоном</Н3>

<Р>Абзац со своим фоном.

</BODY>

Теги, для которых не указан фон, наследуют фон родителя. Например, если бы для абзацев не был установлен фон, абзацы унаследовали бы фон от родителя (в этом случае от тела BODY) Но фон дочернего тега, если он задан, перекрывает фон родителя.

В общем случае стили фона задают параметрами background-color, background-image, background-repeat, background-attachment, background-position и background.

Параметр background-color устанавливает RGB-значение цвета фона. Нa него распространяются правила работы с параметром color. Например;

Н1 { background-color: #F00 }

Параметр background-image задаст адрес файла изображения, применяемого для наполнения фона тега Например

BODY { background-image: url("marble.gif')}

Р { background-image: none }

Параметр background-repeat применяют совместно с параметром background-image. Он задает способ отображения указанного изображения. Например, в следующем случае:

<HEAD>

<STYLE type="text/css">

BODY { background: url("images/bgrnd2.gif');

background-repeat: repeat-y;

background-position: center;}

H3 { background: rgb(255,200,100)}

P { background: Gray }

</STYLE>

</HEAD>

<BODY>

<НЗ>Заголовок со своим фоном</НЗ>

<Р>Абзац со своим фоном. </BODY>

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

Параметр background-attachment применяют совместно с параметром background-image. Он задает степень подвижности изображения. Например, если в предыдущем примере стиль тела описать следующим образом:

BODY { background: url("images/bgrnd2.gif");

background-repeat: repeat-y;

background-position: center;

background-attachment: fixed;

}

то рисунок фона bgrnd2.gif не будет прокручиваться вместе с содержимым документа.

Параметр background-position применяют совместно с параметром background-image. Он задает расположение указанного изображения.

Если значение параметра background-position задано в процентах, то браузер применяет следующие правила:

1. В случае пары значений 0% 0% левый верхний угол изображения совмещают с левым верхним углом поля для фона.

2. В случае пары значений 100% 100% правый нижний угол изображения совмещают с правым нижним углом поля для фона.

3. В случае пары значений N% M% (0<N,M<100) точку пересечения N% M% поверхности изображения совмещают с точкой пересечения N% М% поля для фона. Например, в следующем случае центр фонового изображения будет совмещен с центром рабочей области окна просмотра:

BODY { background: url("images/bgrnd2.giF');

background-repeat: no-repeat;

background-position: 50% 50%;

background-attachment: fixed;

}

Если расположение указывают в единицах длины (length), например парой значений Nem Mem, то левый край изображения от левого края поля фона отступает на N сантиметров, а верхний край изображения от верхнего края поля фона - на М сантиметров.

Если для параметра background-position указаны два значения, то перовое значение задает позицию по горизонтали. Если указано только одно значение (в процентах или единицах длины), то второе значение автоматически приравнивается 50%. Разрешены комбинации в процентах или единицах длины (например, 50% 2cm)Допустимы и отрицательные значения.

Ключевые слова нельзя комбинировать со значениями в процентах или единицах длины. Допустимы следующие комбинации ключевых слов для параметра background-position:

- top leftи left top -тоже, что и 0% 0%;

- top, top centerи center top - тоже, что и 50% 0%;

- right topи top right -тоже, что и 100% 0%;

- left, left centerи center left - тоже, что и 0% 50%;

- centerи center center -то же, что и 50% 50%;

- right, right centerи center right -тоже, что и 100% 50%,

- bottom leftи left bottom - тоже, что и 0%100%,

- bottom, bottom centerи center bottom - тоже, что и 50% 100%,

- bottom rightи right bottom- то же, что и 100% 100%

Параметр background применяют для сокращенного указания значений параметров стилей фона background-color, background-image, background-repeat, background-attachmentи background-position.

Например, равноценны следующие описания

BODY { background: url("images/bgrnd2.gif");

background-repeat: no-repeat;

background-position: left;

background-attachment: fixed;

}

и

BODY { background: url("images/grnd2.gif")

no-repeat left fixed }

Стили рамок

Стили рамок описывают толщину, цвет и стиль линий рамок.

Толщину линий рамок задают параметры border-top-width, border-right-width, border-bottom-widthи border-left-width,а также параметр border-width. Толщину линий задают явным неотрицательным значением.

Параметры, устанавливающие толщину одной из сторон рамки (border-top-width, border-right-width, border-bottom-widthи border-left-width)никакой сложности не представляют.

Параметр border-widthимеет некоторые особенности, связанные с тем, что устанавливает толщину всех сторон рамки Рассмотрим возможные варианты задания значений этого параметра:

1. Если задано одно значение, то оно применяется к всем сторонам рамки.

2. Бели заданы два значения, то первое значение устанавливает толщину верхней и нижней сторон, а второе значение - левой и правой сторон рамки Например, следующий заголовок

H1 { border: solid; border-width: thin thick;text-align: center }

имеет рамку, у которой верхняя и нижняя стороны рисуются тонкой сплошной линией, а левая и правая - толстой сплошной линией.

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

H1 {border: solid; border-width: thin 1сm thick; text-align: center }

имеетрамку, у которой верхняя сторона рисуется тонкой сплошной линией, левая и правая стороны - сплошной линией толщиной 1 см, а нижняя - толстой сплошной линией

4. Если заданы четыре значения, то они устанавливают толщину соответственно верхней, правой, нижней и левой сторон рамки.

Цвет линий рамок задают параметры border-top-color, border-right-color, border-bottom-colorи border-left-color,а также параметр border-color.Цвет рамки задают значением типа color.

Параметры, устанавливающие цвет одной из сторон рамки (border-top-color, border-right-color, border-bottom-colorи border-left-color)никакой сложности не представляют.

Параметр border-colorимеет некоторые особенности, связанные с тем, что устанавливает цвет всех сторон рамки Эти особенности такие же, как и в случае параметра border-width.Например, следующий заголовок.

Н1 { border: solid; border-width: thin 1 сm thick;

text-align: center; border-color: gray Purple Yellow }

имеет рамку, у которой верхняя сторона рисуется серой линией, левая и правая стороны - пурпурной линией, а нижняя - желтой линией.

Тип линий рамок задают параметры border-top-style, border-right-style, border-bottom-styleи border-left-style,а также параметр border-style.

Параметры, которые устанавливают тип линии одной из сторон рамки (border-top-style, border-right-style, border-bottom-styleи border-left-style)никакой сложности не представляют.

Параметр border-styleимеет некоторые особенности, связанные с тем, что устанавливает типы линий всех сторон рамки. Эти особенности такие же, как и в случае параметра border-width.

Стиль (толщину, цвети и тип) линий рамок задают параметры border-top, border-right, border-bottomи border-left,а также параметр border .

Например, следующий заголовок:

H1 { border-bottom: thick solid red }

имеет только нижнюю сторону рамки из толстой сплошной линии красного цвета.

Внимание, параметр borderне может устанавливать разные стили для разных сторон рамки





©2015 www.megapredmet.ru Все права принадлежат авторам размещенных материалов.