Обновлено: 07.06.2018 09:08

CSS свойства*

Каждое свойство стиля задаётся при помощи декларации стиля (style declaration), в формате:

property : value;

Например:

color : red;

Некоторые свойства могут иметь несколько значений. Например:

border: 1px solid red;

Такого типа свойства имеют дополнительные (дочерние свойства). Например свойство, описанное выше, может быть описано так:

border-width: 1px; border-style: solid; border-color: red;

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

Управление цветом (Color)
Границы и фон (Background, Borders)
Базовые свойства блока (box)
Гибкий блок (flexible block)
Текст
Оформление текста (Text Decoration)
Шрифты (fonts)
Режимы написания (Writing Modes)

Таблицы (Table)
Списки и щётчики (Lists, Counters
Анисация (Animation)
Трансформация (Transform)
Переходы, именения (Transition)
Интерфейс пользователя (User Interface)
Многоколочность (Multi-column)

Многостраничные носители информации (Paged Media)
Generated Content
Фильтры (Filter Effects)
Image/Replaced Content
Masking
Speech
Marquee

Управление цветом

Свойство	Описание	CSS
color	цвет текста	1
opacity	прозрачность	3

Свойства фона и границ

Свойство	Описание	Версия CSS
background	A shorthand property for setting all the background properties in one declaration	1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	1
background-blend-mode	Specifies the blending mode of each background layer (color/image)	3
background-color	Specifies the background color of an element	1
background-image	Specifies one or more background images for an element	1
background-position	Specifies the position of a background image	1
background-repeat	Sets how a background image will be repeated	1
background-clip	Specifies the painting area of the background	3
background-origin	Specifies where the background image(s) is/are positioned	3
background-size	Specifies the size of the background image(s)	3
border	Sets all the border properties in one declaration	1
border-bottom	Sets all the bottom border properties in one declaration	1
border-bottom-color	Sets the color of the bottom border	1
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner	3
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner	3
border-bottom-style	Sets the style of the bottom border	1
border-bottom-width	Sets the width of the bottom border	1
border-color	Sets the color of the four borders	1
border-image	A shorthand property for setting all the border-image-* properties	3
border-image-outset	Specifies the amount by which the border image area extends beyond the border box	3
border-image-repeat	Specifies whether the border image should be repeated, rounded or stretched	3
border-image-slice	Specifies how to slice the border image	3
border-image-source	Specifies the path to the image to be used as a border	3
border-image-width	Specifies the widths of the image-border	3
border-left	Sets all the left border properties in one declaration	1
border-left-color	Sets the color of the left border	1
border-left-style	Sets the style of the left border	1
border-left-width	Sets the width of the left border	1
border-radius	A shorthand property for setting all the four border-*-radius properties	3
border-right	Sets all the right border properties in one declaration	1
border-right-color	Sets the color of the right border	1
border-right-style	Sets the style of the right border	1
border-right-width	Sets the width of the right border	1
border-style	Sets the style of the four borders	1
border-top	Sets all the top border properties in one declaration	1
border-top-color	Sets the color of the top border	1
border-top-left-radius	Defines the shape of the border of the top-left corner	3
border-top-right-radius	Defines the shape of the border of the top-right corner	3
border-top-style	Sets the style of the top border	1
border-top-width	Sets the width of the top border	1
border-width	Sets the width of the four borders	1
box-decoration-break	Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break.	3
box-shadow	Attaches one or more drop-shadows to the box	3

Свойства блока

Свойство	Описание	CSS
bottom	Specifies the bottom position of a positioned element	2
clear	Specifies which sides of an element where other floating elements are not allowed	1
clip	Clips an absolutely positioned element	2
display	Specifies how a certain HTML element should be displayed	1
float	Specifies whether or not a box should float	1
height	Sets the height of an element	1
left	Specifies the left position of a positioned element	2
margin	Sets all the margin properties in one declaration	1
margin-bottom	Sets the bottom margin of an element	1
margin-left	Sets the left margin of an element	1
margin-right	Sets the right margin of an element	1
margin-top	Sets the top margin of an element	1
max-height	Sets the maximum height of an element	2
max-width	Sets the maximum width of an element	2
min-height	Sets the minimum height of an element	2
min-width	Sets the minimum width of an element	2
overflow	Specifies what happens if content overflows an element's box	2
overflow-x	Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area	3
overflow-y	Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area	3
padding	Sets all the padding properties in one declaration	1
padding-bottom	Sets the bottom padding of an element	1
padding-left	Sets the left padding of an element	1
padding-right	Sets the right padding of an element	1
padding-top	Sets the top padding of an element	1
position	Specifies the type of positioning method used for an element (static, relative, absolute or fixed)	2
right	Specifies the right position of a positioned element	2
top	Specifies the top position of a positioned element	2
visibility	Specifies whether or not an element is visible	2
width	Sets the width of an element	1
vertical-align	Sets the vertical alignment of an element	1
z-index	Sets the stack order of a positioned element	2

Flexible Box Layout

Свойство	Описание	CSS
align-content	Specifies the alignment between the lines inside a flexible container when the items do not use all available space	3
align-items	Specifies the alignment for items inside a flexible container	3
align-self	Specifies the alignment for selected items inside a flexible container	3
flex	Specifies the length of the item, relative to the rest	3
flex-basis	Specifies the initial length of a flexible item	3
flex-direction	Specifies the direction of the flexible items	3
flex-flow	A shorthand property for the flex-direction and the flex-wrap properties	3
flex-grow	Specifies how much the item will grow relative to the rest	3
flex-shrink	Specifies how the item will shrink relative to the rest	3
flex-wrap	Specifies whether the flexible items should wrap or not	3
justify-content	Specifies the alignment between the items inside a flexible container when the items do not use all available space	3
order	Sets the order of the flexible item, relative to the rest	3

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

Свойство	Описание	CSS
hanging-punctuation	Specifies whether a punctuation character may be placed outside the line box	3
hyphens	Sets how to split words to improve the layout of paragraphs	3
letter-spacing	Increases or decreases the space between characters in a text	1
line-break	Specifies how/if to break lines	3
line-height	Sets the line height	1
overflow-wrap	Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)	3
tab-size	Specifies the length of the tab-character	3
text-align	Specifies the horizontal alignment of text	1
text-align-last	Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"	3
text-combine-upright	Specifies the combination of multiple characters into the space of a single character	3
text-indent	Specifies the indentation of the first line in a text-block	1
text-justify	Specifies the justification method used when text-align is "justify"	3
text-transform	Controls the capitalization of text	1
white-space	Specifies how white-space inside an element is handled	1
word-break	Specifies line breaking rules for non-CJK scripts	3
word-spacing	Increases or decreases the space between words in a text	1
word-wrap	Allows long, unbreakable words to be broken and wrap to the next line	3

Оформление текста

Свойство	Описание	CSS
text-decoration	Specifies the decoration added to text	1
text-decoration-color	Specifies the color of the text-decoration	3
text-decoration-line	Specifies the type of line in a text-decoration	3
text-decoration-style	Specifies the style of the line in a text decoration	3
text-shadow	Adds shadow to text	3
text-underline-position	Specifies the position of the underline which is set using the text-decoration Свойство	3

Шрифт

Свойство	Описание	CSS
@font-face	Позволяет подключить к веб-страницам произвольные шрифты, а не только "web-safe" fonts	3
@font-feature-values	Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType	3
font	Позволяет установить все свойства шрифта (font-family, font-size, font-style, font-variant, font-weight) за одно определение.	1
font-family	шрифт текста.	1
font-feature-settings	Allows control over advanced typographic features in OpenType fonts	3
font-kerning	Controls the usage of the kerning information (how letters are spaced)	3
font-language-override	Controls the usage of language-specific glyphs in a typeface	3
font-size	установить размер текста	1
font-size-adjust	Preserves the readability of text when font fallback occurs	3
font-stretch	Selects a normal, condensed, or expanded face from a font family	3
font-style	Specifies the font style for text	1
font-synthesis	Controls which missing typefaces (bold or italic) may be synthesized by the browser	3
font-variant	Specifies whether or not a text should be displayed in a small-caps font	1
font-variant-alternates	Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values	3
font-variant-caps	Controls the usage of alternate glyphs for capital letters	3
font-variant-east-asian	Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)	3
font-variant-ligatures	Controls which ligatures and contextual forms are used in textual content of the elements it applies to	3
font-variant-numeric	Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers	3
font-variant-position	Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font	3
font-weight	Specifies the weight of a font	1

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

Свойство	Описание	CSS
direction	Направление написания (слева направо или наоборот)	2
text-orientation	Defines the orientation of the text in a line	3
text-combine-upright	Specifies the combination of multiple characters into the space of a single character	3
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document	2
writing-mode		3

Таблицы

Свойство	Описание	CSS
border-collapse	Specifies whether or not table borders should be collapsed	2
border-spacing	Specifies the distance between the borders of adjacent cells	2
caption-side	Specifies the placement of a table caption	2
empty-cells	Specifies whether or not to display borders and background on empty cells in a table	2
table-layout	Sets the layout algorithm to be used for a table	2

Списки и счётчики

Свойство	Описание	CSS
counter-increment	Increments one or more counters	2
counter-reset	Creates or resets one or more counters	2
list-style	Sets all the properties for a list in one declaration	1
list-style-image	Specifies an image as the list-item marker	1
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow	1
list-style-type	Specifies the type of list-item marker	1

Анисация

Свойство	Описание	CSS
@keyframes	Specifies the animation code	3
animation	A shorthand property for all the animation properties (except animation-play-state and animation-fill-mode)	3
animation-delay	Specifies a delay for the start of an animation	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle	3
animation-fill-mode	Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)	3
animation-iteration-count	Specifies the number of times an animation should be played	3
animation-name	Specifies the name of the @keyframes animation	3
animation-play-state	Specifies whether the animation is running or paused	3
animation-timing-function	Specifies the speed curve of an animation	3

Transform Properties

Свойство	Описание	CSS
backface-visibility	Defines whether or not an element should be visible when not facing the screen	3
perspective	Specifies the perspective on how 3D elements are viewed	3
perspective-origin	Specifies the bottom position of 3D elements	3
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3
transform-style	Specifies how nested elements are rendered in 3D space	3

Transitions Properties

Свойство	Описание	CSS
transition	A shorthand property for setting the four transition properties	3
transition-property	Specifies the name of the CSS property the transition effect is for	3
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete	3
transition-timing-function	Specifies the speed curve of the transition effect	3
transition-delay	Specifies when the transition effect will start	3

Basic User Interface Properties

Свойство	Описание	CSS
box-sizing	Tells the browser what the sizing properties (width and height) should include	3
content	Used with the :before and :after pseudo-elements, to insert generated content	2
cursor	Specifies the type of cursor to be displayed	2
ime-mode	Controls the state of the input method editor for text fields	3
nav-down	Specifies where to navigate when using the arrow-down navigation key	3
nav-index	Specifies the tabbing order for an element	3
nav-left	Specifies where to navigate when using the arrow-left navigation key	3
nav-right	Specifies where to navigate when using the arrow-right navigation key	3
nav-up	Specifies where to navigate when using the arrow-up navigation key	3
outline	Sets all the outline properties in one declaration	2
outline-color	Sets the color of an outline	2
outline-offset	Offsets an outline, and draws it beyond the border edge	3
outline-style	Sets the style of an outline	2
outline-width	Sets the width of an outline	2
resize	Specifies whether or not an element is resizable by the user	3
text-overflow	Specifies what should happen when text overflows the containing element	3

Multi-column Layout Properties

Свойство	Описание	CSS
break-after	Specifies the page-, column-, or region-break behavior after the generated box	3
break-before	Specifies the page-, column-, or region-break behavior before the generated box	3
break-inside	Specifies the page-, column-, or region-break behavior inside the generated box	3
column-count	Specifies the number of columns an element should be divided into	3
column-fill	Specifies how to fill columns	3
column-gap	Specifies the gap between the columns	3
column-rule	A shorthand Свойство for setting all the column-rule-* properties	3
column-rule-color	Specifies the color of the rule between columns	3
column-rule-style	Specifies the style of the rule between columns	3
column-rule-width	Specifies the width of the rule between columns	3
column-span	Specifies how many columns an element should span across	3
column-width	Specifies the width of the columns	3
columns	A shorthand property for setting column-width and column-count	3
widows	Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element	2

Paged Media

Свойство	Описание	CSS
orphans	Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element	2
page-break-after	Sets the page-breaking behavior after an element	2
page-break-before	Sets the page-breaking behavior before an element	2
page-break-inside	Sets the page-breaking behavior inside an element	2

Generated Content for Paged Media

Свойство	Описание	CSS
marks	Adds crop and/or cross marks to the document	3
quotes	Sets the type of quotation marks for embedded quotations	2

Filter Effects Properties

Свойство	Описание	CSS
filter	Defines effects (e.g. blurring or color shifting) on an element before the element is displayed	3

Image Values and Replaced Content

Свойство	Описание	CSS
image-orientation	Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML)	3
image-rendering	Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled	3
image-resolution	Specifies the intrinsic resolution of all raster images used in/on the element	3
object-fit	Specifies how the contents of a replaced element should be fitted to the box established by its used height and width	3
object-position	Specifies the alignment of the replaced element inside its box	3

Masking Properties

Свойство	Описание	CSS
mask		3
mask-type		3

Speech Properties

Свойство	Описание	CSS
mark	A shorthand property for setting the mark-before and mark-after properties	3
mark-after	Allows named markers to be attached to the audio stream	3
mark-before	Allows named markers to be attached to the audio stream	3
phonemes	Specifies a phonetic pronunciation for the text contained by the corresponding element	3
rest	A shorthand property for setting the rest-before and rest-after properties	3
rest-after	Specifies a rest or prosodic boundary to be observed after speaking an element's content	3
rest-before	Specifies a rest or prosodic boundary to be observed before speaking an element's content	3
voice-balance	Specifies the balance between left and right channels	3
voice-duration	Specifies how long it should take to render the selected element's content	3
voice-pitch	Specifies the average pitch (a frequency) of the speaking voice	3
voice-pitch-range	Specifies variation in average pitch	3
voice-rate	Controls the speaking rate	3
voice-stress	Indicates the strength of emphasis to be applied	3
voice-volume	Refers to the amplitude of the waveform output by the speech synthesises	3

Marquee Properties

Свойство	Описание	CSS
marquee-direction	Sets the direction of the moving content	3
marquee-play-count	Sets how many times the content move	3
marquee-speed	Sets how fast the content scrolls	3
marquee-style	Sets the style of the moving content	3

* По материалам www.w3schools.com

WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

Наши преимущества

WEB основы

Регистрация на сайте

Дополнительные материалы

CSS свойства