Возможные значения свойств CSS 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Возможные значения свойств CSS



Ключевые слова. Большинство свойств CSS могут применять лишь определенные значения из конечного множества возможных значений. Такие значения называются ключевыми словами. Пример: right, center, auto, solid и другие. Все значения, представляющие собой ключевые слова, пишутся без кавычек.

Числа. В качестве значения CSS – свойства может выступать обычное число. Значение в виде чисел задается без кавычек.

Размер. Правильнее указывать числовое свойство с единицей измерения. Единицы измерения бывают относительными и абсолютными.

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

Абсолютные единицы измерения существуют сами по себе и всегда постоянны.

К относительным единицам измерения относятся:

- em – размер относительно шрифта текущего элемента;

- ex – размер относительно высоты символа х (в нижнем регистре);

- px – размер в пикселях;

- % - размер в процентах. В этом случае размер определяется относительно родительского элемента или окна браузера.

К абсолютным единицам измерения относятся:

- in – дюйм (1 дюйм = 2,54 см);

- cm – сантиметр;

- mm – миллиметр;

- pt – пункт (1 пункт = 1/72 дюйма);

- pc – пика (1 пика = 12 пунктов).

Чаще всего при вёрстке используют следующие единицы измерения:

- px - для указания ширины, высоты и толщины элемента или его границы;

- em – для задания межстрочного интервала;

- pt – для указания размера шрифта;

- % - для задания величины относительно родительского элемента.

Единицу измерения указывают всегда, исключение составляет значение 0. Значения в виде размеров задаются без кавычек.

Цвет. Существует три способа задания цвета:

Ключевое слово, представляющее собой английское название цвета.

Шестнадцатеричный код в формате #ааббвв, где

аа – две цифра от 0 до F красного компонента цвета

бб – две цифра от 0 до F зеленого компонента цвета

вв – две цифра от 0 до F синего компонента цвета

RGB – цвет – rgb (аа, бб, вв), где

аа – две цифра от 0 до 255 красного компонента цвета

бб – две цифра от 0 до 255 зеленого компонента цвета

вв – две цифра от 0 до 255 синего компонента цвета

В данном формате вместо чисел в десятичной системе счисления можно использовать проценты. Например rgb(100%, 20%, 33%)

Адрес. Основной формат записи адреса следующий: url (“адрес”). Например: url(“img/bg_body.png”)

Вставки стиля CSS

Существует три способа вставки стиля css:

- Внешние таблицы стилей (css файл);

- Внутренние таблицы стилей (стиль в элементе head);

- Строчный стиль.

Внешние таблицы стилей отлично подходят для стилей, которые применяются к множеству страниц. С помощью внешних таблиц стилей вы можете изменить оформление всего веб-сайта, изменяя только один файл. На каждой странице сайта вы должны сделать ссылку на внешние таблицы стилей (css файл/файлы) с помощью тега < link >. Тег < link > помещается в элементе head:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Внешние таблицы стилей можно создать в любом текстовом редакторе. В этом файле не должно быть тегов html. Файл внешних стилей надо сохранить с расширением.css.

Пример

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Внутренние таблицы стилей обычно используют в том случае, когда единственная страница сайта имеет уникальный стиль. Внутренний стиль записывается в элементе head между тегами <style>, </style>:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Строчный стиль CSS противоречит идеологии разделения оформления и содержания, поэтому используйте его осторожно.

Для вставки строчного стиля используется атрибут style соответствующего элемента html. Атрибут style может содержать любое свойство CSS. В примере ниже показано, как изменить отступ слева и цвет текста параграфа:

<p style="color:sienna; margin-left:20px" >Это параграф.</p>

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



Поделиться:


Последнее изменение этой страницы: 2021-04-05; просмотров: 66; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.191.211.66 (0.004 с.)