-
Notifications
You must be signed in to change notification settings - Fork 0
/
css-properties.txt
146 lines (146 loc) · 6.89 KB
/
css-properties.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
# **/* ===Properties=== */**
> *all ---> changes all properties*
> *display ---> box display type*
> *position ----> positioning type: absolute, fixed, relative, static*
> *float ----> float elements left or right*
> *height ---> height of the element*
> *box-sizing ----> box sizing properties *
# **/* ====Background ====---> */**
> background ---> all background properties in one declaration
> background-attachment ---> is the background image fixed or scrolls
> background-blend-mode ---> blending mode of each background layer
> background-clip ----> painting area of the background
> background-color ---> background color
> background-image ---> background image
> background-origin ---> where the background image is positioned
> background-position ---> starting position of the background image
> background-repeat ---> tthe way the background image is repeated
> background-size ---> background image size
# **/* ===Border=====> */**
> border ---> sets all border properties in one line
> border-width ---> border width
> border-bottom ---> bottom border properties in one line
> border-bottom-color --->color of the bottom border
> border-bottom-left-radius ----> border bottom left radius
> border-bottom-right-radius ----> border bottom right radius
> border-bottom-style ---> border bottom style
> border-bottom-width ---> border bottom width
> border-top --->top border properties in one line
> border-top-color ---> border top color
> border-top-left-radius ----> border top left radius
> border-top-right-radius ----> border top right radius
> border-top-style ----> border top style
> border-top-width ----> border top width
> border-left --->left border properties in one line
> border-left-color ---> border left color
> border-left-style ---> border left style
> border-left-width ---> border left width
> border-collapse ---> border collapse
> border-color ----> border color
> border-right ---> right border properties in one line
> border-right-color ----> border right color
> border-right-style --->border right style
> border-right-width ----> border right width
> border-spacing ---> border spacing
> border-radius ----> border radius of the four rounded corners
# **/* border image====> */**
> border-image ---> sets an image as border
> border-image-outset ---> border image area extends beyond the border box
> border-image-repeat ----> border image repeated, rounded or stretched
> border-image-slice ---> how to slice the border image
> border-image-source ---> path to the border image
> border-image-width ---> border image width
#
# **/* =====Margin and padding ==== */**
#
> margin ---->> set the top, right, bottom and left margins in one line
> margin-bottom ---> bottom margin
> margin-left ---> left margin
> margin-right ---> right margin
> margin-top ---> margin top
> padding ---> padding between the element border and content
> padding-bottom ----> padding bottom
> padding-left ----> padding left
> padding-right ---> padding right
> padding-top ---> padding top
# **/* ==== Flex ==== */**
> flex ----> item length, relative to others inside the container
> flex-basis ----> initial length of a flexible item
> flex-direction ----> direction of the flexible items
> flex-flow ----> shorthand for flex-direction and flex-wrap
> flex-grow ----> how much the item will grow relative other items
> flex-shrink ----> how to shrink the item relative to other items
> flex-wrap ----> wrap flexible items
> align-content ---> behavior of the flex-wrap property
> align-items ---> alignment for items inside the container
> align-self --->alignment for the selected item
> justify-content ----> justifies flexible container's items horizontally if necessary
# ***/* ===font/shadow/alinment/ overflow++===== */***
> font ----> all font properties in one line
> @font-face ----> declare non-web-safe fonts
> font-family ----> font of the element
> font-size ----> font size
> font-size-adjust ----> control font size if the first declared option is not available
>
> font-style ----> font style: normal, italic, oblique
> font-variant ---> set small-caps
> font-weight ----> use bold or thin characters
> color ----> text color
> text-align ----> horizontal alignment of text
> text-align-last ----> horizontal alignment of last line of text
> text-decoration ----> overline, underline or line-through the text
> letter-spacing ----> space between characters
> line-height ----> line height of text or inline-block elements
> list-styleall list properties in one line
> list-style-position ----> list item markers inside or outside the content flow
> list-style-type ----> set the type of the list item marker , Like none
> text-overflow ----> the way how overflowed content is marked (ellipsis)
> text-shadow ---> text shadow
> text-transform ---> capitalization of text
> vertical-align ----> vertical alignment
> visibility ---> visibility:hidden elements leave a gap
> white-space ----> how are white-spaces handled
> width ---> width of an element
> max-height ---> maximum height of element
> max-width ----> maximum width of element
> word-break ----> text breaking rules when text reaches the end of the container
> word-spacing ----> size of white space between words
> word-wrap ---> break long words and wrap onto the next line
> box-shadow ----> shadow to element
> z-index ----> stack order of the element
> cursor ----> cursor type when element is hovered
> overflow ----> hide, display or scroll if the content overflows its container
> overflow-x ----> horizontal overflow
> overflow-y ----> vertical overflow
> opacity ----> transparency level of an element
> order ---> reorder elements in a container
> outline ----> drow an outer border around elements
> outline-color ---> outline color
> outline-offset ----> gap between the element and the outline
> outline-style ----> outline style
> outline-width ---> outline width
# ***/* ===transform / transition ==== */***
> transform ---> 2D 3D transformation. See widget.
> transform-origin ---> changes the position of transformed elements
> transition ----> transition properties in one line
> transition-delay ---> delay before transition effect start
> transition-duration ----> transition effect duration
# ***/* ===Animation/////==== */***
> @keyframes ----> specifies the animation code
> animation ---> binds an animation to an element
> animation-delay ---> delays animation start
> animation-direction ----> reverse animation or in alternate cycles
> animation-duration ---> animation duration in seconds or ms
> animation-fill-mode ---> style when the animation is not playing
> animation-iteration-count ---> number of an animation replays
> animation-name --- > name for the @keyframes animation
> animation-play-state ---> the animation is running or paused
> animation-timing-function ---> speed curve of an animation
#
# ***/* media screen ////=== */***
#
> @media ---> see media queries
> max-height ---> maximum height
> max-width ----> maximum width
> min-height ----> minimum height
> min-width ---> minimum width