Воскресенье, 28.04.2024, 17:16
Меню сайта
Категории раздела
JQuery плагины [59]
JQuery уроки [69]
PHP полезное [24]
PHP уроки [21]
Css [26]
JS [3]
SQL [9]
Css 3 [17]
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » Css 3

Свойства CSS3

Свойства CSS

Группы свойств CSS

  • Анимация
  • Фон
  • Граница и контур
  • Коробка
  • Цвет
  • Медиа содержимое
  • Меры
  • Гибкая коробка
  • Шрифт
  • Генерированное содержание
  • Сетка
  • Гиперссылка
  • Линейная коробка
  • Список
  • Поле
  • Marquee
  • Несколько колонок
  • Заполнение
  • Страничное медиа
  • Позиционирование
  • Печать
  • Ruby
  • Речь
  • Таблица
  • Текст
  • 2D/3D трансформация
  • Переход
  • Пользовательский интерфейс

Колонка "CSS" указывает, в какой версии CSS свойство определено (CSS1, CSS2 или CSS3).

Свойства анимации

СвойствоОписаниеCSS
@keyframesОпределяет анимацию3
animationСокращенное свойство для всех типов анимации ниже, за исключением свойства animation-play-state3
animation-nameОпределяет имя анимации @keyframes3
animation-durationОпределяет, сколько секунд или миллисекунд, необходимо анимации для завершения одного цикла3
animation-timing-functionОпределяет скорость кривой анимации3
animation-delayУказывает, когда анимация начнется3
animation-iteration-countУказывает, сколько раз анимация должна быть воспроизведена3
animation-directionОпределяет, должна ли анимация играть в обратном направлении на альтернативный цикл3
animation-play-stateУказывает, будет ли анимация играть или приостановлена3

Свойства фона

СвойствоОписаниеCSS
backgroundЗадает все свойства фона в одной декларации1
background-attachmentОпределяет, будет ли фоновое изображение фиксированным или прокручиваемым с остальной частью страницы1
background-colorУстанавливает цвет фона для элемента1
background-imageУстанавливает фоновое изображение для элемента1
background-positionУстанавливает начальное положение фонового изображения1
background-repeatУстанавливает, как фоновое изображение будет повторяться1
background-clipУказывает область холста фона3
background-originУказывает, область позиционирования фонового изображения3
background-sizeУказывает размер фонового изображения3

Свойства границы и контура

СвойствоОписаниеCSS
borderЗадает все свойства границ в одной декларации1
border-bottomУстанавливает все свойства нижней границы в одной декларации1
border-bottom-colorУстанавливает цвет нижней границы
border-bottom-styleУстанавливает стиль нижней границы1
border-bottom-widthУстанавливает ширину нижней границы1
border-colorУстанавливает цвет четырех границ1
border-leftУстанавливает все свойства левой границы в одной декларации1
border-left-colorУстанавливает цвет левой границы1
border-left-styleУстанавливает стиль левой границы1
border-left-widthУстанавливает ширину левой границы1
border-rightУстанавливает все свойства правой границы в одной декларации1
border-right-colorУстанавливает цвет правой границы1
border-right-styleУстанавливает стиль правой границы1
border-right-widthУстанавливает ширину правой границы1
border-styleУстанавливает стиль четырех границ1
border-topУстанавливает все свойства верхней границы в одной декларации1
border-top-colorУстанавливает цвет верхней границы1
border-top-styleУстанавливает стиль верхней границы1
border-top-widthУстанавливает ширину верхней границы1
border-widthУстанавливает ширину четырех границ1
outlineУстанавливает все свойства контура в одной декларации2
outline-colorУстанавливает цвет контура2
outline-styleУстанавливает стиль контура2
outline-widthУстанавливает ширину контура2
border-bottom-left-radiusОпределяет форму границы нижнего левого угла3
border-bottom-right-radiusОпределяет форму границы нижнего правого угла3
border-imageСокращенное свойство для установки всех свойств border-image-*3
border-image-outsetОпределяет число, на которое изображение границы выходит за границы окна3
border-image-repeatУказывает, должно ли изображение границы быть повторено, округлено или растянуто3
border-image-sliceОпределяет внутреннее смещение изображения границы3
border-image-sourceОпределяет изображение, которое будет использоваться в качестве границы3
border-image-widthОпределяет ширину изображения границы3
border-radiusСокращенное свойство для определения всех свойств border-*-radius3
border-top-left-radiusОпределяет форму границы в верхнем левом углу3
border-top-right-radiusОпределяет форму границы в верхнем правом углу3
box-decoration-break 3
box-shadowОпределяет одно или несколько отбрасываний теней к коробке3

Свойства коробки

СвойствоОписаниеCSS
overflow-xУказывает, следует ли обрезать левый / правый края содержания, если оно переполняет область содержащего его элемента3
overflow-yУказывает, следует ли обрезать нижний / верхний края содержания, если оно переполняет область содержащего его элемента3
overflow-styleЗадает предпочтительный метод прокрутки для переполняемых элементов3
rotationПоворачивает элемент вокруг заданной точки, которая определена в свойстве rotation-point3
rotation-pointОпределяет точку как смещение от левого верхнего края границы3

Свойства цвета

СвойствоОписаниеCSS
color-profileПозволяет спецификацию цветового профиля источника, отличного от значения по умолчанию3
opacityЗадает уровень прозрачности для элемента3
rendering-intentПозволяет спецификацию цветопередачи профиля, отличного от значения по умолчанию3

Содержание для свойств медиа

СвойствоОписаниеCSS
bookmark-labelОпределяет метку закладки3
bookmark-levelЗадает уровень закладки3
bookmark-targetОпределяет цель ссылки закладки3
float-offsetПомещает плавающие элементы в противоположном направлении, где бы они плавали с float3
hyphenate-afterЗадает минимальное количество символов в слове через дефис после переноса символа3
hyphenate-beforeЗадает минимальное количество символов в слове перед дефисом переноса символа3
hyphenate-characterЗадает строку, которая отображается при переносе3
hyphenate-linesУказывает максимальное число последовательных переносов строк в элементе3
hyphenate-resourceОпределяет список разделенных запятыми внешних ресурсов, которые могут помочь браузеру определить точки переносов3
hyphensУстанавливает, как разделить слова, чтобы улучшить расположение параграфов3
image-resolutionОпределяет правильное разрешение изображений3
marksДобавляет знаки обрезания и/или пересечения в документе3
string-set 3

Свойства меры

СвойствоОписаниеCSS
heightУстанавливает высоту элемента1
max-heightУстанавливает максимальную высоту элемента2
max-widthУстанавливает максимальную ширину элемента2
min-heightУстанавливает минимальную высоту элемента2
min-widthУстанавливает минимальную ширину элемента2
widthУстанавливает ширину элемента1

Свойства гибкой коробки

СвойствоОписаниеCSS
box-alignУказывает, как выравнивать дочерние элементы окна3
box-directionУказывает, в каком направлении дети окна отображаются3
box-flexУказывает, будут ли дети окна гибкими или негибкими в размере3
box-flex-groupНазначает гибкие элементы к группе3
box-linesУказывает, будут ли колонки переходить на новую линию, когда заканчивается свободное место в родительском окне3
box-ordinal-groupОпределяет порядок отображения дочерних элементов окна3
box-orientУказывает, будут ли дети окна установлены горизонтально или вертикально3
box-packОпределяет горизонтальное положение в горизонтальной коробке и вертикальное положение в вертикальной коробке3

Свойства шрифта

СвойствоОписаниеCSS
fontУстанавливает все свойства шрифта в одной декларации1
font-familyОпределяет шрифт для текста1
font-sizeОпределяет размер шрифта текста1
font-styleЗадает стиль шрифта для текста1
font-variantУказывает, будет ли текст отображен в капитель шрифта1
font-weightОпределяет жирность шрифта1
@font-faceПравило, которое позволяет веб-сайтам скачивать и использовать шрифты, кроме "веб-безопасных" шрифтов3
font-size-adjustСохраняет читаемость текста при использовании резервного шрифта3
font-stretchВыбор нормального, уплотненного, или расширенного шрифта из семейства шрифтов3

Свойства генерированного содержания

СвойствоОписаниеCSS
contentИспользуется вместе с псевдо-элементами :before и :after, для вставления контента2
counter-incrementУвеличивает один или несколько счетчиков2
counter-resetСоздает или сбрасывает один или несколько счетчиков2
quotesУстанавливает тип кавычек для встраиваемых цитат2
cropПозволяет заменить элемент на прямоугольную область объекта, а не весь объект3
move-toВызывает элемент, который необходимо удалить из потока и заново внести, на более позднем этапе, в документе3
page-policyОпределяет, какие вхождения основанных на страницах элементов или строковых значений влияют на счетчик3

Свойства сетки

СвойствоОписаниеCSS
grid-columnsОпределяет ширину каждого столбца в сетке3
grid-rowsОпределяет высоту каждого столбца в сетке3
СвойствоОписаниеCSS
targetСокращенное свойство для установки свойств target-name, target-new, и target-position3
target-nameОпределяет, где открывать ссылки (назначение цели)3
target-newУказывает, будет ли новая ссылка назначения открываться в новом окне или в новой вкладке существующего окна3
target-positionУказывает, где новые ссылки назначения должны быть помещены3

Свойства линейной коробки

СвойствоОписаниеCSS
alignment-adjustПозволяет более точное выравнивание элементов3
alignment-baselineОпределяет, как встроенный элемент выравнивается относительно его родителя3
baseline-shiftПозволяет репозиционирование доминирующей базы по отношению к доминирующей базе3
dominant-baselineОпределяет расширенную базовую таблицу3
drop-initial-after-adjustУстанавливает выравнивание исходной точки падения для первичной точки подключения3
drop-initial-after-alignУстанавливает линию выравнивания в начальном окне, используемую в начальной точке присоединения с начальным символом3
drop-initial-before-adjustУстанавливает выравнивание исходной точки падения для вторичной точки подключения3
drop-initial-before-alignУстанавливает линию выравнивания в начальном окне, используемую во вторичной точке присоединения с начальным символом3
drop-initial-sizeУправляет частичным опусканием начального символа3
drop-initial-valueАктивизирует первоначальный раскрывающийся эффект
inline-box-alignУстанавливает, какая строка многострочного встроенного блока согласовывается с предыдущим и следующим встроенным элементом в строке3
line-stackingСокращенное свойство для определения свойств line-stacking-strategy, line-stacking-ruby, и line-stacking-shift3
line-stacking-rubyОпределяет метод укладки блочных элементов, содержащих элементы аннотации ruby3
line-stacking-shiftОпределяет метод укладки блочных элементов, содержащих элементы с базой сдвига3
line-stacking-strategyОпределяет статегию укладки для размещения встроенных блоков в пределах контейнера элемента3
text-heightУстанавливает блок-прогрессию размерности области текстового содержимого встроенного блока3

Свойства списков

СвойствоОписаниеCSS
list-styleУстанавливает все свойства списка в одной декларации1
list-style-imageОпределяет изображение как маркер элемента списка1
list-style-positionУказывает, должен ли маркер элемента находиться внутри или вне потока содержимого1
list-style-typeОпределяет тип маркера элемента списка1

Свойства поля

СвойствоОписаниеCSS
marginУстанавливает все свойства поля в одной декларации1
margin-bottomУстанавливает нижнее поле элемента1
margin-leftУстанавливает левое поле элемента1
margin-rightУстанавливает правое поле элемента1
margin-topУстанавливает верхнее поле элемента1

Свойства Marquee

СвойствоОписаниеCSS
marquee-directionУстанавливает направление перемещения содержимого3
marquee-play-countУстанавливает, сколько раз содержимое передвигается3
marquee-speedУстанавливает скорость прокрутки3
marquee-styleУстанавливает стиль перемещаемого содержимого3

Свойства нескольких колонок

СвойствоОписаниеCSS
column-countОпределяет количество колонок на которые элемент должен быть разделен3
column-fillОпределяет, как заполнять колонки3
column-gapОпределяет промежуток между колонками3
column-ruleСокращенное свойство для определения свойств column-rule-*3
column-rule-colorЗадает правило цвета между колонками3
column-rule-styleЗадает правило стиля между колонками3
column-rule-widthЗадает правило ширины между колонками3
column-spanОпределяет, на сколько колонок элемент должен быть распределен3
column-widthУказывает ширину колонок3
columnsСокращенное свойство для установки column-width и column-count3

Свойства заполнения

СвойствоОписаниеCSS
paddingУстанавливает все свойства заполнения в одной декларации1
padding-bottomУстанавливает нижнее заполнение элемента1
padding-leftУстанавливает левое заполнение элемента1
padding-rightУстанавливает правое заполнение элемента1
padding-topУстанавливает верхнее заполнение элемента1

Страничные медиа свойства

СвойствоОписаниеCSS
fitДает подсказку о том, как масштабировать замененный элемент если ни его ширина ни высота не определены как auto3
fit-positionОпределяет выравнивание объекта внутри окна3
image-orientationЗадает вращение вправо или по часовой стрелке для изображения3
pageОпределяет конкретный тип страницы, где элемент ДОЛЖЕН БЫТЬ отображен3
sizeОпределяет размер и ориентацию контейнера для содержимого страницы3

Свойства позиционирования

СвойстваОписаниеCSS
bottomОпределяет нижнюю позицию позиционирования элемента2
clearОпределяет стороны элемента, где другие плавающие элементы не допускаются1
clipОбрезает абсолютно-позиционируемые элементы2
cursorЗадает тип курсора, который будет отображаться2
displayУказывает тип коробки элемента для генерирования1
floatОпределяет, должна ли коробка плавать1
leftОпределяет левую позицию позиционирования элемента2
overflow
Указывает, что произойдет, если содержимое окна переполнит элемент2
positionУказывает тип позиционирования для элементов (static, relative, absolute или fixed)2
rightОпределяет правую позицию позиционирования элемента2
topОпределяет верхнюю позицию позиционирования элемента2
visibilityОпределяет, должен ли элемент быть видимым2
z-indexУстанавливает порядок стека элемента2

Свойства печати

СвойствоОписаниеCSS
orphansУстанавливает минимальное число линий, которые должны быть оставлены в нижней части страницы, когда разрыв страницы происходит внутри элемента2
page-break-afterУстанавливает поведение разрыва страницы после элемента2
page-break-beforeУстанавливает поведение разрыва страницы до элемента2
page-break-insideУстанавливает поведение разрыва страницы внутри элемента2
widowsУстанавливает минимальное число линий, которые должны быть оставлены в верхней части страницы, когда разрыв страницы происходит внутри элемента2

Свойства Ruby

СвойствоОписаниеCSS
ruby-alignУправление выравниванием текста ruby и содержанием основанным на ruby относительно друг друга3
ruby-overhangОпределяет, будет ли, и на чьей стороне, разрешено тексту ruby использовать частичный навес любого примыкающего текста в дополнение к своей собственной базе, когда текст ruby шире, чем база ruby3
ruby-positionУправление положением текста ruby в соответствии к его основанию3
ruby-spanУправление охватывает поведением аннотации элементов3

Свойства речи

СвойствоОписаниеCSS
markСокращенное свойство для определения свойств mark-before и mark-after3
mark-afterПозволяет именным маркерам прилагаться к аудио потокам3
mark-beforeПозволяет именным маркерам прилагаться к аудио потокам3
phonemesЗадает фонетическое произношение для текста, содержащегося в соответствующем элементе3
restСокращенное свойство для определения свойств rest-before и rest-after3
rest-afterУказывает, остальные или просодические границы, которые должны соблюдаться после зачитывания содержания элемента3
rest-beforeУказывает, остальные или просодические границы, которые должны соблюдаться до зачитывания содержания элемента3
voice-balanceОпределяет баланс между левым и правым каналами3
voice-durationОпределяет, как долго должно отображаться содержимое выбранного элемента3
voice-pitchЗадает среднюю высоту (частоту) говорящего голоса3
voice-pitch-rangeОпределяет изменение нормального шага3
voice-rateКонтролирует скорость речи3
voice-stressУказывает на силу акцента, которая должна применяться3
voice-volumeОтносится к выходу амплитуды сигнала синтезируемой речи3

Свойства таблицы

СвойствоОписаниеCSS
border-collapseУказывает, следует ли или нет свернуть границы таблицы2
border-spacingЗадает расстояние между границами соседних ячеек2
caption-sideУказывает размещение заголовка таблицы2
empty-cellsУказывает, следует ли отображать границы и фон на пустые ячейки в таблице2
table-layoutУстанавливает алгоритм расположения, используемый для таблицы2

Свойства текста

СвойствоОписаниеCSS
colorУстанавливает цвет текста1
directionОпределяет направление текста2
letter-spacingУвеличивает или уменьшает пространство между символами в тексте1
line-heightУстанавливает высоту строки1
text-alignОпределяет горизонтальное выравнивание текста1
text-decorationУказывает добавленные украшения к тексту1
text-emphasisСокращенное свойство для указания свойств text-emphasis-style и text-emphasis-color в одной декларации1
text-indentУказывает отступ первой строки в текстовом блоке1
text-transformУправление капитализацией текста1
unicode-bidi 2
vertical-alignУстанавливает вертикальное выравнивание элемента1
white-spaceУказывает, как обрабатывается пустое пространство внутри элемента1
word-spacingУвеличивает или уменьшает пробел между словами в тексте1
hanging-punctuationУказывает, может ли знак препинания быть размещен за пределами линейного блока3
punctuation-trimУказывает, может ли знак препинания сокращен3
text-align-lastОписывает, как последнюю строку блока или линии прямо перед вынужденым переносом строки выравнивать, когда выравнивание текста указано как «justify»3
text-justifyУказывает метод выравнивания, используемый когда text-align указан как «justify»3
text-outlineЗадает контур текста3
text-overflowОпределяет, что должно произойти, когда текст переполняет содержащий его элемент3
text-shadowДобавляет тень к тексту3
text-wrapОпределяет правила переноса текста3
word-breakОпределяет правила переноса для не-CJK скриптов3
word-wrapПозволяет разделить длинные, неразбиваемые слова, и перенести их на следующую строку3

Свойства трансформации 2D/3D

СвойствоОписаниеCSS
transformПрименяет 2D или 3D трансформацию к элементу3
transform-originПозволяет изменить позицию трансформированных элементов3
transform-styleОпределяет, как вложенные элементы будут отображаться в 3D-пространстве3
perspectiveОпределяет перспективы относительно того, как 3D-элементы, рассматриваются3
perspective-originЗадает нижнее положение 3D-элементов3
backface-visibilityОпределяет является ли элемент видимым, когда он не напротив экрана3

Свойства перехода

СвойствоОписаниеCSS
transitionСокращенное свойство для установки четырех свойств перехода в одном свойстве3
transition-propertyОпределяет имя свойства CSS для которого переход применяется3
transition-durationОпределяет продолжительность времени, в течении которого осуществляется переход. Значение по умолчанию 03
transition-timing-functionОписывается, как расчитывается скорость во время перехода. Значение по умолчанию "ease"3
transition-delayОпределяет, когда начнется переход. Значение по умолчанию 03

Свойства пользовательского интерфейса

СвойствоОписаниеCSS
appearanceПозволяет создать элемент, который выглядит как стандартный элемент пользовательского интерфейса3
box-sizingПозволяет определить некоторые элементы, которые соответствовуют определенной области3
iconОбеспечивает автору способность стилизовать элемент со знаковым эквивалентом3
nav-downУказывает, где использовать навигацию при нажатии стрелки вниз3
nav-indexОпределяет порядок табуляции для элемента3
nav-leftУказывает, где использовать навигацию при нажатии стрелки влево3
nav-rightУказывает, где использовать навигацию при нажатии стрелки вправо3
nav-upУказывает, где использовать навигацию при нажатии стрелки вверх3
outline-offsetСмещение контура, выводит его за пределы границы края3
resizeОпределяет, должен ли пользователь иметь возможность изменять размер элемента3
Категория: Css 3 | Добавил: ChronoW (09.07.2013)
Просмотров: 1177 | Теги: Свойства CSS3 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: