Выбор занятия

Выберите текущее занятие

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

CSS

Свойства CSS

Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет.

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

Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для тега p задан красный цвет текста, а для курсива i, который находится внутри абзаца, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.

Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Так, достаточно задать параметры форматирования тега table и к ячейкам таблицы td они будут применены автоматически. Точно так же можно определить свойства тега body, который порождает стиль всех остальных элементов веб-страницы.

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

Любому элементу можно прописать любые свойства, но нужно ли?. Но свойства CSS можно применять далеко не ко всем элементам веб-страницы, а только к тем, с которыми они «дружат». Большинство свойств работают со всеми элементами, а некоторые только с блочными или позиционированными. Например, для изображений совершенно бессмысленно устанавливать свойства, которые манипулируют с текстом. Так что в каждом случае следует решать самостоятельно, когда применять свойство, а когда нет.

Основные положения
Объединение	Несколько селекторов через запятую. Объединение позволяет применить одинаковый стиль сразу нескольким элементам (селекторам). Всем четырем тегам заголовков определен красный цвет шрифта. `h1, h2, h3, h5 {color: red;}`
Селекторы по контексту	Несколько селекторов через пробел. В примере ниже текст внутри элемента `<b>...</b>` будет красным только если он будут внутри элемента `<h1>...</h1>`. `h1 b {color: red;} <h1>Здесь <b>красный</b>.</h1> <p>Здесь <b>нет</b>.</p>`
Class (атрибут тега `class=""`)	Селекторы классов могут быть использованы как атрибуты тегов. Селектор класса — строка, начинающаяся с точки. Не нужно использовать точку ссылаясь на класс. Название класса (значение атрибута `class=""`) не должно начинаться с цифры. `.example {color: red;} <p class="example">Этот текст красный.</p>`
ID (атрибут тега `id=""`)	Селекторы ID могут быть использованы как атрибуты тегов. Селектор ID — строка, начинающаяся с символа #. Не нужно использовать # ссылаясь на селектор ID. Значение атрибута `id=""` не должно начинаться с цифры и должно быть уникальным в пределах документа. `#i5 {color: red;} <p id="i5">Этот текст с ID 'i5'.</p>`
Комментарии	Отличная идея оставлять комментарии в таблице стилей. В комментарии можно писать любой текст, даже в несколько строк. `/* Это комментарии. */`
Тэги `<div>` и `<span>`	Эти два HTML-тэга, для которых поддержка стилей особенно актуальна. `<div>...</div>` используется для формирования структуры документа в виде блоков текста. `<div style="color:green; font-weight:bold"><h1>Это заголовок</h1></div>` `<span>...</span>` используется для оформления внутри строк. `<p>Это <span style="color:red;">красный текст</span> внутри параграфа</p>`
Упрощенный синтаксис	Многие свойства можно описать кратко. Их значения читаются: сверху-справа-снизу-слева (top-right-bottom-left). `Например: div { padding: 5px 10% 0 3%; } означает то же самое, что и: div { padding-top:5px; padding-right:10%; padding-bottom:0; padding-left:3%; }`

Значения
Единицы измерения	Единицы измерения обозначаются аббревиатурой из двух букв без пробела между цифрами и обозначением. Они делятся на две категории: Абсолютные: in: дюйм - 1 дюйм равен 2.54 сантиметрам. cm: сантиметр mm: миллиметр pt: точка - 1 точка, используемая в CSS2, равна 1/72 дюйма. pc: пика - 1 пика равна 12 точкам. Относительные: em: свойство `'font-size'` соответствующего шрифта ex: свойство `'x-height'` соответствующего шрифта px: пиксели, относительно устройства просмотра `Например: width: 50px; margin-left: 2em;`
Процентные соотношения	Любое значение, задаваемое в процентах, всегда определяется относительно некоторого другого значения, например, значения длины. Например, размер шрифта элемента `<h2>` будет 75% от размера шрифта по умолчанию. `h2 {font-size: 75% }`
Ключевые слова	В CSS используются ключевые слова как значения для различных свойств. Например: bolder, lighter, larger, x-large, xx-large, x-small.
Значения цвета	Шестнадцатиричное значение; в процентах; по названию. `color: #FF00FF; /* такое значение может быть сокращено до #F0F */ color: rgb(100%,0%,100%); color: chocolate`
URLs (ссылки)	Используются в различных свойствах для обозначения местоположения изображения. Относительные ссылки указывают размещение файлов относительно CSS, а не HTML документа. `url(picture.gif) url(http://www.xhtml.ru/lib1/pic278.gif) list-style-image: url(bullet3.gif)`

Каскадность
!important	Свойство стиля объявлено как `!important`. Это свойство перекроет все другие свойства: исходные или переопределенные. `h1 {color: maroon !important;}`
Наследование	Свойства форматирования любого элемента наследуются от элемента, в котором он размещается. CSS свойства всегда имеют некоторые значения, даже если автор их не определил. Этим можно пользоваться для минимизации описания стилей. Но следует помнить, что в различных браузерах могут быть различные значения по умолчанию и отображение страницы при этом будет различаться.
Связь с внешней таблицей стилей	Внешние таблицы стилей используются для управления внешним видом нескольких страниц с помощью одного файла CSS. Используйте тэг <link> в секции <head> HTML документа. Например: `<link rel="stylesheet" type="text/css" href="style.css" />`
Каскадный порядок и синтаксис	Наибольший приоритет имеет свойство, определенное в атрибуте `style` у элементов. Внутри таблицы стилей последнее определение имеет наивысший приоритет. Ниже приведен порядок применения таблиц стилей к документу. Первый способ в списке имеет наивысший приоритет: style="что-то там" свойства стилей задано в атрибуте тэга Например: `<p style="color: red; font-family: 'Times New Roman', serif">строка текста</p>` Тэг <style> в секции <head> HTML документа Например: `<style> .title { font-family: 'Snap ITC', cursive; font-size: 60pt;} </style>` Тэг <link> для привязки внешней таблицы стилей в секции <head> HTML документа Например: `<link rel="stylesheet" type="text/css" href="style.css">` Стили браузера по умолчанию
Media	CSS2 позволяет определять различные таблицы стилей для отображения страниц на разных устройствах. `/* css для печати, элементы с атрибутомclass="noprint"` не будут напечатаны / <style media="print"> .noprint {display: none;} </style> / css для экрана, элементы с атрибутом `class="noshow"` будут скрыты */ <style media="screen"> .noshow {display:none;} </style>

Псевдо-классы и Псевдо-элементы
anchor	Псевдо-классы могут использоваться в контекстуальных селекторах и могут комбинироваться с обычными классами. `A:link {color: #900} A:link IMG { border: solid blue } A:hover { background:#ffff00; } A:visited {} A:active {} /* стиль, видимый только в момент клика по ссылке */` Комбинирование: обычные имена классов размещаются до псевдо-классов. `A.external:link { color: magenta } <A CLASS="external" HREF="http://out.side/">внешняя ссылка</A>`
first-line	Применяется к первой линии текста в элементе и только к блочным элементам. `P:first-line {color: red;} <P>Первая строка параграфа красная. Далее что-то там там там...</P>`
first-letter	Применяется к первой букве в элементе и только к блочным элементам. `P:first-letter {color: red;} <P>Эта заглавная 'Э' в начале параграфа красная.</P>`

Разное
cursor	Определяет внешний вид курсора при наведении указателя мыши на элемент. Значения: auto (браузер сам определяет по контексту); crosshair; default (обычно стрелка - определено операционной системой); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize. Использование 'hand' возможно для отображения курсора в виде руки для IE4, IE5, и Opera 3.5, хотя и не рекомендуется W3C. Лучше использовать, 'pointer', это понимают современные браузеры. `P { cursor: help }`

Цвет и фон

С помощью CSS присвоить цвет элементу и его фону, а так же использовать рисунок в качестве фона элемента и управлять его положением.

Цвет в CSS может быть задан тремя методами:
Именным значением, например: red - красный.
Значением цвета RGB, например: RGB(255,0,0) - опять таки красный.
Шестнадцатеричным значением цвета RGB, например: #ff0000 - всё тот же красный.

С именным значением цвета всё понятно: black - черный, green - зелёный, olive - оливковый и т.д.

Однако по понятным причинам не для всех оттенков цветов зарезервировано индивидуальное имя. Когда возникает необходимость в использовании какого либо "нестандартного" цвета необходимо определить его значение RGB, (Red, Green , Blue ) сочетание красного, зеленого и синего цвета в числовом выражении. Каждый оттенок из основных цветов в системе RGB может выражаться в числе от 0 до 255.

Например, черный цвет будет иметь значение 0,0,0 то есть отсутствие всякого цвета.. белый - значение 255,255,255 теоретически если смешать основные цвета должен получится белый, а вот например классический синий цвет имеет значение 0,0,255 то есть на "мольберте" присутствует только синий. На рисунке наглядно показано, что происходит с красками если их смешать, так смешивая оттенки основных цветов можно добиться любого цвета из видимого спектра.
Однако в большинстве случаев "веб краски" имеют шестнадцатеричное выражение десятичного значения RGB.
В шестнадцатеричном исчислении цифры от 10 до 15 заменены латинскими буквами и числовой ряд приобретает следующий вид:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Числа больше 15ти в шестнадцатеричной системе образуются путём объединения двух и более чисел в одно. Так например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе.
Значит, для того чтобы выразить нужный оттенок в шестнадцатеричном виде, нам понадобиться три пары чисел, где первая пара - значение красного цвета, вторая пара значение зелёного и третья пара синего цвета. Так, например, тот же классический синий в шестнадцатеричном выражении будет выглядеть так: #0000FF. Знак решётки перед числом ставится для указания того что данное число является шестнадцатеричным, например в числе #808000 нет латинских букв однако со знаком решётки понятно что оно шестнадцатеричное и выражает собой оливковый цвет.

Выражая цвет в шестнадцатеричном виде можно обойтись тремя числами, которые затем будут дублироваться, например запись #DAF будет сокращённой формой #DDAAFF.

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

#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.

Пример:

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
	</body>
</html>

А вот свойство background-color - определяет цвет фона элемента. Цвет фона может иметь следующие значения:

#ff0000 - шестнадцатеричное значение цвета RGB.
red - именное значение цвета.
RGB(255,0,0) - значение цвета RGB.
transparent - прозрачный фон. (по умолчанию)

Для любого элемента можно присвоить фоновое изображение с помощью CSS свойства: background-image со значением url(путь_к_файлу).
Для того чтобы сделать некую картинку фоном для элемента необходимо указать к ней путь согласно следующего синтаксиса url(путь к файлу/имя файла). Путь к файлу указывается в том случае, если рисунок находится в другой папке.

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

fixed - фиксированный фон.
scroll - подвижный фон (по умолчанию).

Если рисунок не заполняет собой весь фон элемента, то он повторяется и выкладывается "плиткой". Свойство background-repeat - регулирует повторение фонового изображения. Возможные значения:

no-repeat - запретить повторение, показать только одно изображение.
repeat - повторять изображение (по умолчанию).
repeat-x - повторять только по горизонтали.
repeat-y - повторять только по вертикали.

При помощи CSS свойства background-position - можно управлять позицией фонового изображения в элементах где оно задано с помощью background-image.
Позицию фонового изображения, а точнее его верхнего левого угла, можно задать в процентах, пикселях, а также любых других единицах измерения CSS, с помощью двух значений, где первое значение будет являться отступом от левой границы элемента, а второе значение отступом от верхней границы элемента.
Например, запись: background-position: 200px 100px; будет обозначать, что фоновое изображение будет смещено по горизонтали на 200 пикселей от левой границы элемента и по вертикали на 100 пикселей от верхней границы элемента.
Так же можно использовать следующие значения для задания опзиции по горизонтали: left - расположить слева, center - расположить по центру, right - расположить справа. И по вертикали: top - расположить сверху, center - расположить по центру, bottom - расположить снизу.

Ссылки:

Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.