Описание каждого атрибута происходит по одному шаблону, содержит таблицу браузеров с номерами версий, которые поддерживают указанное свойство, синтаксис написания, допустимые значения параметра, наследование и к каким элементам он применяется. Каждый параметр иллюстрируется примером, который показывает область его применения. В большинстве случаев приводится рисунок, который показывает результат примера, что позволяет наглядно понять, как действует тот или иной параметр.
Браузеры
Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять по той причине, что они просто не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие параметры будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Netscape, Opera, Safari, Mozilla и Firefox, а также используются следующие обозначения:
Да — параметр полностью поддерживается браузером со всеми допустимыми аргументами;
Нет — атрибут браузером не воспринимается и игнорируется;
Частично — параметр поддерживается лишь частично, например, не все допустимые аргументы действуют или атрибут применяется не ко всем элементам, которые указаны в спецификации;
Ошибки — свойство понимается браузером, но при его работе возможно появление различных ошибок. В примечании к описанию свойства обычно указывается, какого рода ошибки обнаруживаются в браузере.
Синтаксис
Каждое свойство CSS записывается в следующем обобщенном виде:
Селектор { свойство1: аргументы; свойство1: аргументы }
Селектором называют имя стиля, в котором указаны параметры форматирования, делятся они на несколько типов: селекторы тегов, идентификаторы и классы.
Селекторы тегов используются для определения стилей встроенных тегов HTML. Классы применяются для создания стилей, которые можно применять к любому тегу HTML, для создания выделений или изменения стиля блока текста. Идентификаторы обычно используются совместно со скриптами чтобы можно было управлять параметрами стиля динамически, кроме того, каждый идентификатор в пределах страницы должен быть уникальным.
Далее в фигурных скобках указывают имя параметра CSS и через двоеточие его желаемое значение. Писать несколько параметров можно, перечисляя их через двоеточие, либо задавая отдельно каждый параметр, как показано ниже.
P { color: green; background: #f0f0f0 }
P { color: green }
P { background: #f0f0f0 }
В первой строке для селектора P одновременно устанавливается цвет текста и фона, а во второй — вначале задается цвет текста, а затем уже цвет фона. Поскольку селектор указан один, а свойства разные, то они будут применяться одновременно. Поэтому приведенные формы записи параметров приводят к одному результату.
Если для одного селектора определяются одинаковые атрибуты, но с разными значениями, то использоваться будет тот, что указан в коде последним.
P { color: green }
P { color: red }
В строке показано изменение цвета фона у параграфа P. Вначале задается зеленый цвет, а затем красный, который и будет применен к тексту.
Любые свойства CSS, а также их значения не чувствительны к регистру, поэтому их можно набирать как заглавными, так и строчными символами. Но при этом их традиционно всегда пишут маленькими буквами.
При описании синтаксиса применяются следующие обозначения:
* вертикальная черта между значениями (например, fixed | scroll) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только один аргумент из предложенных;
* двойная вертикальная черта (border-style || color) обозначает объединяющее ИЛИ (ИЛИ/И), каждый аргумент может использоваться самостоятельно или совместно с другими через пробел;
* квадратные скобки ([left | center | right]) помечают группу, из которой, как правило, выбирается одно значение;
* два числа в фигурных скобках ({a,b}) говорят, что предшествующее им значение следует повторять не менее a, но не более b раз.
Значение по умолчанию
Если какой-то параметр в стиле не приводится явно, то браузер, тем не менее, самостоятельно применяет его со значением, которое установлено по умолчанию. Подобные аргументы не всегда являются оптимальными, поэтому их можно переназначить, если напрямую указать свойство с желаемым значением.
Наследование
Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для параграфа <P> задан красный цвет текста, а для курсива <I>, который находится внутри параграфа, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный текст также будет красным.
Наследование полезно для задания свойств, применяемых к элементу по умолчанию. Так, достаточно задать параметры форматирования тега <TABLE> и к ячейкам таблицы <TD> они будут применены автоматически. Точно так же можно определить свойства тега <BODY>, который порождает стиль всех остальных элементов веб-страницы.
Существует два варианта применения наследования. Если свойства элемента наследуются, то для его дочернего элемента их можно не указывать, кроме случая, когда использование параметра не желательно. Наоборот, если свойства элемента НЕ наследуются, то для дочернего элемента их требуется указывать снова или пропустить, когда они не нужны.
Применение
Свойства CSS можно применять далеко не ко всем элементам веб-страницы подряд, а только к тем, с которыми они <дружат>. Большинство атрибутов работают со всеми элементами, а некоторые только с блочными или позиционированными. Определенные свойства, хотя и указано, что могут применяться ко всем элементам, не всегда приводят к какому-либо результату. Например, для изображений совершенно бессмысленно устанавливать атрибуты, которые манипулируют с текстом. Так что в каждом случае следует решать самостоятельно, когда применять параметр, а когда нет.
Объектная модель
Для динамического изменения свойств элемента через JavaScript, необходимо знать, как к нему обращаться. Зная имя объекта и желаемое свойство, можно указать его новое значение без перезагрузки веб-страницы. Так, для сокрытия и отображения элемента применяется атрибут visibility, а объектная модель для управления его значением — document.getElementById("elementID").style.visibility. Указывая вместо elementID свой идентификатор элемента, заданный параметром id, получаем механизм для динамического скрывания некоторого содержимого.
Скачать учебник
http://adminsgetbb.ifolder.ru/7768957
+Все атрибуты css
Цвет и фон
background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.
background-attachment
Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
background-color
Устанавливает фоновый цвет элемента.
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.
background-position
Задает начальное положение фонового изображения, установленного с помощью параметра background-image.
background-repeat
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
color
Определяет цвет текста элемента.
opacity
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Границы
border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
border-bottom
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
border-bottom-color
Устанавливает цвет границы внизу элемента.
border-bottom-style
Устанавливает стиль границы внизу элемента.
border-bottom-width
Задает толщину границы внизу элемента.
border-color
Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.
border-left
Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
border-left-color
Задает цвет границы слева от элемента.
border-left-style
Устанавливает стиль границы слева от элемента.
border-left-width
Задает толщину границы слева от элемента.
border-right
Параметр позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
border-right-color
Задает цвет границы справа от элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.
border-right-style
Устанавливает стиль границы справа от элемента.
border-right-width
Устанавливает толщину границы справа от элемента.
border-style
Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
border-top
Одновременно задает толщину, стиль и цвет границы сверху элемента.
border-top-color
Задает цвет границы сверху элемента.
border-top-style
Устанавливает стиль границы сверху элемента.
border-top-width
Устанавливает толщину границы сверху элемента.
border-width
Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.
Шрифт
font
Универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой.
font-size
Определяет размер шрифта элемента, который может быть установлен несколькими способами.
font-style
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста.
font-variant
Определяет, как нужно представлять строчные буквы ? делать их все прописными уменьшенного размера или оставить без изменений. Такой способ изменения символов называется капителью.
font-weight
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Также допустимо использование ключевых слов.
Текст
letter-spacing
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут.
line-height
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.
text-align
Определяет горизонтальное выравнивание текста в пределах элемента.
text-decoration
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
text-indent
Устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается.
text-transform
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.
vertical-align
Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.
white-space
Параметр white-space устанавливает, как отображать пробелы между словами.
word-spacing
Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно.
Списки
list-style
Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.
list-style-image
Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.
list-style-position
Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом.
list-style-type
Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).
Форматирование
clear
Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
clip
Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник.
display
Многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.
float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
height
Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG. Высота не включает толщину границ вокруг элемента, значение отступов и полей.
max-height
Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height.
max-width
Устанавливает максимальную ширину элемента.
min-height
Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height.
min-width
Задает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
visibility
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.
width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Позиционирование
bottom
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
left
Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.
position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
right
Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.
top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.
z-index
Управляет размещением элементов по z-оси, что позволяет накладывать элементы друг на друга.
Отступы
margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.
margin-bottom
Устанавливает величину отступа от нижнего края элемента.
margin-left
Устанавливает величину отступа от левого края элемента.
margin-right
Задает величину отступа от правого края элемента.
margin-top
Устанавливает величину отступа от верхнего края элемента.
Поля
padding
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
padding-bottom
Устанавливает значение поля от нижнего края содержимого элемента.
padding-left
Устанавливает значение поля от левого края содержимого элемента.
padding-right
Задает значение поля от правого края содержимого элемента.
padding-top
Задает величину поля от верхнего края содержимого элемента.
Таблицы
border-collapse
Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.
border-spacing
Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.
caption-side
Определяет положение заголовка таблицы, который задается с помощью тега CAPTION, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.
table-layout
Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
Интерфейс
cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Важность
!important
Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стилевого параметра.
Псевдоэлементы
after
Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент after работает совместно с атрибутом content.
before
Псевдоэлемент before применяется для отображения желаемого контента до элемента, к которому он добавляется. before работает совместно с атрибутом content.
Псевдоклассы
active
Псевдокласс active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
hover
Определяет стиль элемента при наведении на него курсора мыши.
link
Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление.
visited
Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление.[ Свернуть ]