css3基本属性备忘单

掌握基本的CSS语法与我们的CSS3属性备忘单。...

层叠样式表或CSS定义了我们所知道的web的外观和感觉。当HTML和JavaScript专注于web的功能方面时，CSS处理web的视觉方面。

Screenshot of sample CSS properties used in a code snippet

在你学会了如何用HTML构建静态网页之后，是时候去发现如何用CSS来设计它们的样式并使它们看起来更漂亮了。下面我们的CSS3属性备忘表可以帮助您做到这一点！它涵盖了CSS3中您需要了解的基本语法，CSS3是CSS的最新版本。

CSS的实用知识可以帮助您以一种流线型的方式自定义网页的颜色、字体、边框、背景、布局等。此外，它在设计web和移动应用程序时也很方便。

免费下载：此备忘单可从我们的发行合作伙伴TradePub下载PDF格式。您必须填写一个简短的表格才能第一次使用它。下载必要的CSS3属性备忘单。

css3基本属性备忘单

Shortcut	Action
背景属性
背景	在一个声明中定义各种背景属性。
背景附件	指定是固定背景图像还是随网页滚动。
背景色	定义网页上元素的背景色。
背景图像	定义元素的背景图像。
背景剪辑	指定元素的背景图像或颜色延伸的距离。
背景原点	指定背景图像的定位区域。
背景位置	定义背景图像的原点。
背景重复	指定背景图像的平铺方式。
背景大小	指定背景图像的大小。
边框属性
边境	设置元素所有四个边的边框宽度、样式和颜色。
边框底部	设置元素下边框的宽度、样式和颜色。
边框底色	设置元素下边框的颜色。
边框左下半径	定义元素左下角边框的形状。
边框右下半径	定义元素右下角边框的形状。
边框底部样式	设置元素下边框的样式。
边框底部宽度	设置元素下边框的宽度。
边框颜色	设置元素所有四边的边框颜色。
边框图像	指定如何使用图像代替边框样式。
边框图像开始	指定边框图像区域超出边框框的范围。
边框图像重复	指定边框图像的平铺方式。
边界图像切片	指定图像边框的向内偏移。
边框图像源	指定要用作边框的图像的位置。
边框图像宽度	指定图像边框的宽度。
左边框	设置元素左边框的宽度、样式和颜色。
左边框颜色	设置元素左边框的颜色。
左边框样式	设置元素左边框的样式。
边框左宽度	设置元素左边框的宽度。
边界半径	定义元素边角的形状。
右边框	设置元素右边框的宽度、样式和颜色。
右边框颜色	设置元素右边框的颜色。
右边框样式	设置元素右边框的样式。
右边框宽度	设置元素右边框的宽度。
边框样式	设置元素所有四边的边框样式。
边框顶部	设置元素上边框的宽度、样式和颜色。
边框顶部颜色	设置元素上边框的颜色。
边框左上半径	定义元素左上角边框的形状。
边框右上半径	定义元素右上角边框的形状。
边框顶部样式	设置元素上边框的样式。
边框顶部宽度	设置元素上边框的宽度。
边框宽度	设置元素所有四边的边框宽度。
颜色属性
颜色	定义和设置文本的颜色。
不透明度	定义元素的透明度。
维度属性
高度	定义元素的高度。
最大高度	定义元素的最大高度。
最大宽度	定义元素的最大宽度。
最小高度	定义元素的最小高度。
最小宽度	定义元素的最小宽度。
宽度	指定元素的宽度。
生成的内容属性
内容	**生成的内容。
引用	指定嵌入引号的引号。
计数器复位	创建或重置一个或多个计数器。
计数器增量	递增一个或多个计数器值。
灵活的方框布局
对齐内容	指定柔性容器项目的对齐方式。
对齐项目	指定项目的默认对齐方式。
自我对齐	指定选定项目的对齐方式。
弯曲	指定柔性长度的构件。
伸缩基准值	指定弹性项的初始主大小。
弯曲方向	指定柔性项的方向。
弹性流	flex direction和flex wrap属性的速记属性。
弹性增长	指定flex项相对于flex容器中其他项的增长方式。
弹性收缩	指定flex项相对于flex容器中的其他项收缩的方式。
柔性包装	指定柔性项是否应换行。
调整内容	指定在解析任何柔性长度和自动边距后，如何沿柔性容器的主轴对齐柔性项。
秩序	指定flex项目在flex容器中的显示和布局顺序。
字体属性
字体	在一个声明中定义各种字体属性，如字体样式、字体变体、字体粗细、字体大小/行高和字体系列。
字体系列	定义元素的字体列表。
字体大小	定义文本的字体大小。
字体尺寸	Preserves the readability of text when font fallback occurs.
font-stretch	Selects a normal, condensed, or expanded face from a font.
font-style	Defines the font style for the text.
font-variant	Specifies the font variant.
font-weight	Specifies the font weight of the text.
List Properties
list-style	Defines the display style for a list and list elements.
list-style-image	Specifies the image to be used as a list-item marker.
list-style-position	Specifies the position of the list-item marker.
list-style-type	Specifies the marker style for a list-item.
Margin Properties
margin	Sets the margin on all four sides of the element.
margin-bottom	Sets the bottom margin of the element.
margin-left	Sets the left margin of the element.
margin-right	Sets the right margin of the element.
margin-top	Sets the top margin of the element.
Multi-Column Layout Properties
column-count	Specifies the number of columns in a multi-column element.
column-fill	Specifies how columns will be filled.
column-gap	Specifies the gap between the columns in a multi-column element.
column-rule	Specifies a straight line, or "rule", to be drawn between each column in a multi-column element.
column-rule-color	Specifies the color of the rules drawn between columns in a multi-column layout.
column-rule-style	Specifies the style of the rule drawn between the columns in a multi-column layout.
column-rule-width	Specifies the width of the rule drawn between the columns in a multi-column layout.
column-span	Specifies how many columns an element spans across in a multi-column layout.
column-width	Specifies the optimal width of the columns in a multi-column element.
columns	A shorthand property for setting column-width and column-count properties.
column-count	Specifies the number of columns in a multi-column element.
Outline Properties
outline	Sets the width, style, and color for all four sides of an element's outline.
outline-color	Sets the color of the outline.
outline-offset	Set the space between an outline and the border edge of an element.
outline-style	Sets a style for an outline.
outline-width	Sets the width of the outline.
Padding Properties
padding	Sets the padding on all four sides of the element.
padding-bottom	Sets the padding to the bottom side of an element.
padding-left	Sets the padding to the left side of an element.
padding-right	Sets the padding to the right side of an element.
padding-top	Sets the padding to the top side of an element.
Print Properties
page-break-after	Inserts a page break after an element.
page-break-before	Inserts a page break before an element.
page-break-inside	Inserts a page break inside an element.
Table Properties
border-collapse	Specifies whether table cell borders are connected or separated.
border-spacing	Sets the spacing between the borders of adjacent table cells.
caption-side	Specifies the position of table's caption.
empty-cells	Shows or hides borders and backgrounds of empty table cells.
table-layout	Specifies a table layout algorithm.
border-collapse	Specifies whether table cell borders are connected or separated.
Text Properties
direction	Defines the text direction/writing direction.
tab-size	Specifies the length of the tab character.
text-align	Sets the horizontal alignment of inline content.
text-align-last	Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify.
text-decoration	Specifies the decoration added to text.
text-decoration-color	Specifies the color of the text-decoration-line.
text-decoration-line	Specifies what kind of line decorati*** are added to the element.
text-decoration-style	Specifies the style of the lines specified by the text-decoration-line property
text-indent	Indents the first line of text.
text-justify	Specifies the justification method to use when the text-align property is set to justify.
text-overflow	Specifies how the text content will be displayed, when it overflows the block containers.
text-shadow	Applies one or more shadows to the text content of an element.
text-transform	Transforms the case of the text.
line-height	Sets the height between lines of text.
vertical-align	Sets the vertical positioning of an element relative to the current text baseline.
letter-spacing	Sets the extra spacing between letters.
word-spacing	Sets the spacing between words.
white-space	Specifies how white space inside the element is handled.
word-break	Specifies how to break lines within words.
word-wrap	Specifies whether to break words when the content overflows the boundaries of its container.
Transform Properties
backface-visibility	Specifies whether or not the "back" side of a transformed element is visible when facing the user.
perspective	Defines the perspective from which all child elements of the object are viewed.
perspective-origin	Defines the origin (the vanishing point for the 3D space) for the perspective property.
transform	Applies a 2D or 3D transformation to an element.
transform-origin	Defines the origin of transformation for an element.
transform-style	Specifies how nested elements are rendered in 3D space.
Transition Properties
transition	Defines the transition between two states of an element.
transition-delay	Specifies when the transition effect will start.
transition-duration	Specifies the number of seconds or milliseconds a transition effect should take to complete.
transition-property	Specifies the names of the CSS properties to which a transition effect should be applied.
transition-timing-function	Specifies the speed curve of the transition effect.
Visual Formatting Properties
display	Specifies how an element is displayed ***creen.
position	Specifies how an element is positioned.
top	Specifies the location of the top edge of the positioned element.
right	Specifies the location of the right edge of the positioned element.
bottom	Specifies the location of the bottom edge of the positioned element.
left	Specifies the location of the left edge of the positioned element.
float	Specifies whether or not a box should float.
clear	Specifies the placement of an element in relation to floating elements.
z-index	Specifies a layering or stacking order for positioned elements.
overflow	Specifies the treatment of content that overflows the element's box.
overflow-x	Specifies how to manage the content when it overflows the width of the element's content area.
overflow-y	Specifies how to manage the content when it overflows the height of the element's content area.
resize	Specifies whether or not an element is resizable by the user.
clip	Defines the clipping region.
visibility	Specifies whether or not an element is visible.
cursor	Specifies the type of cursor.
box-shadow	Applies one or more drop-shadows to the element's box.
box-sizing	Alters the default CSS box model.
Animation Properties
animation	Specifies the behavior of all animati***.
animation-delay	Specifies when the animation will start with a delay.
animation-direction	Specifies whether the animation should play forward, backward, or in alternate cycles.
animation-duration	Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
animation-fill-mode	Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-iteration-count	Specifies the number of times an animation cycle should be played before stopping.
animation-name	Specifies the name of @keyframes defined animati*** that should be applied to the selected element.
animation-play-state	Specifies whether the animation is running or paused.
animation-timing-function	Specifies how a CSS animation should progress over the duration of each cycle.