CSS属性

不念不忘少年蓝@ 2022-02-21 11:43 410阅读 0赞

# **CSS样式属性** #

# **CSS背景属性** #

Background-color:设置元素的背景颜色

属性值：

Color\_name:颜色值为颜色名称的背景颜色(比如：red)

Hex\_number:颜色值为十六进制值的背景颜色(比如：\#FF0000)

Rgb\_number:颜色值为rgb代码的背景颜色(比如：rgb(255,0,0))

Transparent:默认。背景颜色为透明。

Background\-image:设置元素的背景图像。

属性值：

url(URL):指定图像的路径

none:默认值，不显示背景图像。

Background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动

该属性的值：

Scroll:默认值。背景图像会随着页面其余部分的滚动而移动。

Fixed：当页面的其余部分滚动时，背景图片不会移动

Background-repeat：设置是否如何重复背景图像

属性值：

Repeat：默认。背景图像将在垂直方向和水平方向重复

Repeat-x：背景图像将在水平方向重复

Repeat-y：背景图像将在垂直方向重复

No-repeat：背景图像将仅显示一次

Background-position：设置背景图像的起始位置。

属性值：

Top left/top center/top right/center left/center center/center right/bottom left/bottom center/bottom right:如果仅规定一个关键词，那么第二个值将是center。默认值：0% 0%。

X% y%：第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%。右下角是100% 100%，如果仅规定了一个值，另一个值是50%。

Xpos ypos：第一个值是水平位置，第二个值是垂直位置。左上角是0 0.单位是像素(0px 0px)或其他任何CSS单位。如果仅规定一个值，另一个值将是50%，可以混合使用%和position值。

Background-size：设置背景图像的尺寸 CSS3

属性值：

Length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置auto

Percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置auto.

Cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

Contain：把图像扩展值最大尺寸，以使其宽度和高度完全适应内容区域。

Background-origin：设置background-position属性相对于什么位置来定位 CSS3

属性值：

Padding-box：背景图像相对于内边距框来定位

Border-box：背景图像相对于边框盒来定位

Content-box：背景图像相对于内容框来定位

Background-clip：设置背景的绘制区域 CSS3

属性值：

Padding-box：背景图像相对于内边距框来定位

Border-box：背景图像相对于边框盒来定位

Content-box：背景图像相对于内容框来定位

Background：简写属性，在一个声明中设置所有的背景属性。

示例：background: \#00FF00 url(bgimage.gif) no-repeat fixed top;

# **CSS字体属性** #

Font\-family:设置文本的字体系列

属性值：设置某个元素的字体，如：宋体，仿宋等。

Font\-size:设置文本的字体尺寸

Font-style:设置文本的字体样式

属性值：

Normal：默认值。浏览器显示一个标准的字体样式。

Italic：浏览器会显示一个斜体的字体样式

Oblique：浏览器会显示一个倾斜的字体样式

Font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但所有使用小型大写字体的字母与其他文本相比，其字体尺寸更小。

属性值：

Normal：默认值。浏览器会显示一个标准的字体

Small-caps：浏览器会显示小型大写字母的字体。

Font-weight：设置文本的粗细

属性值：

Normal：默认值。定义标准的字符

Bold：定义粗体字符

Bolder：定义更粗的字符。

100-900:定义由粗到细的字符。400相同于normal，700等同bold

Font-size-adjust：为元素设置aspect值。该属性IE不支持

属性值：

None：默认值。如果此字体不可用，则不保持此字体的x-height。

Number：定义字体的aspect值比率。其计算公式：首选字体的字体尺寸 \* (font-size-adjust值/可用字体的aspect值)=可应用到可用字体的尺寸。如：如果14px的Verdana(aspect值是0.58)不可用，但某个可用字体的aspect值是0.46,那么替代字体的尺寸将是14 \* （0.58/0.46）= 17.65px。

# **CSS文本属性** #

Color:设置文本的颜色

属性值：

Color\_name:颜色值为颜色名称的背景颜色(比如：red)

Hex\_number:颜色值为十六进制值的背景颜色(比如：\#FF0000)

Rgb\_number:颜色值为rgb代码的背景颜色(比如：rgb(255,0,0))

Direction：设置文本的方向/书写方向

属性值：

Ltr：默认。文本方向从左到右

Rtl：文本方向从右到左

Letter-spacing：增加或减少字符之间的空白(字符间距)

属性值：

Normal：默认值。设置字符之间没有额外的空白(相对于值为0)。

Length：定义字符之间的固定空间(允许使用负值)。

Line\-height:设置行高

Normal：默认值。设置合理的行间距。

Number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距

Length：设置固定的行间距

%：基于当前字体尺寸的百分比行间距。

Text\-align：设置文本的水平对齐方式

属性值

Left:把文本排列到左边。默认值，由浏览器决定

Right：把文本排列到右边

Center：把文本排列到中间

Justify：实现两端对齐文本效果

Text-decoration：设置添加到文本的装饰效果

属性值：

None:默认值。定义标准的文本

Underline:设置文本下的一条线

Overline：设置文本上的一条线

Line-through：设置穿过文本下的一条线

Blink：设置闪烁文本

Text\-indent：设置文本块中首行文本的缩进

属性值：

Length：设置固定的缩进。默认为0

百分比值%：设置基于父元素宽度的百分比的缩进。

Text\-transform：设置文本的大小写

属性值：

None：默认值。定义带有小写字母和大写字母的标准文本

Capitalize：文本中的每个单词以大写字母开头

Uppercase：定义仅有大写字母

Lowercase：定义仅有小写字母

White\-space：设置如何处理元素的空白

属性值：

Normal：默认值。空白会被浏览器忽略

Pre：空白会被浏览器保留。其行为方式类似HTML中的<pre>标签

Nowrap：文本不会换行，文本会在同一行上继续。直到遇到<br/>标签为止

Pre-wrap：保留空白符序列，但是正常地进行换行

Pre-line：合并空白符序列，但保留换行符

Word\-spacing：增加或减少单词间的空白(即字 间距)

属性值：

Normal：默认值。定义单词间的标准空间

Length：定义单词间的固定空间

Text\-overflow：设置当文本溢出包含元素时发生的事情，IE不支持 CSS3

Clip：修剪文本

Ellipsis：显示省略符号来代表被修剪的文本。

String：使用给定的字符串来代表被修剪的文本。

Text-shadow：向文本设置阴影。IE不支持。CSS3

属性值：

H-shadow：必需。水平阴影的位置。允许负值

V-shadow：必需。垂直阴影的位置。允许负值

Blur：可选。模糊的距离

Color：可选。阴影的颜色

Word\-break：设置自动换行的处理方法 IE不支持。CSS3

属性值：

Normal：默认值。使用浏览器默认的换行规则

Break-all：允许在单词内换行

Keep-all：只能在半角空格或连接字符处换行

Word\-wrap：允许长单词或URL地址换行到下一行。IE不支持。CSS3

属性值：

Normal：只在允许的断字点行会(浏览器保持默认处理)

Break-Word：在长单词或URL地址内部进行换行。

# **CSS表格属性** #

Border\-collapse：是否合并表格边框

属性值：

Separate：默认值。边框会被分开。不会忽略border-spacing和empty-cells属性

Collapse：如果可能，边框会合并一个单一的边框。会忽略border-spacing和empty-cells属性

Border\-spacing：设置相邻单元格的边框间的距离（仅用于边框分离）

注意：该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个水平间距，第二个是垂直间距。除非border-collapse被设置为separate。否则将忽略这个属性。

属性值：

Length length：设置相邻单元格的边框之间的距离。使用px，cm等单位，不允许负值。如果定义一个length参数，那么定义的是水平和垂直间距。如果定义两个length参数，则一个是水平，一个是垂直。

Caption\-side：设置表格标题的位置

属性值：

Top：默认值。把表格标题定位在表格之上

Bottom：把表格标题定位在表格之下

Empty\-cells：设置是否显示表格中的空单元格（仅用于分离边框）

属性值：

Hide：不在空单元格周围绘制边框。

Show：在空单元格周围绘制边框。默认值。

Table\-layout：用来显示表格单元格、行、列的算法规则

属性值：

Automatic：默认值。列宽度由单元格内容设定。

Fixed：列宽由表格宽度和列宽度设定

# **CSS尺寸属性(Dimension)** #

Height:设置元素高度

该属性定义元素内容区的高度，在内容区域外可以增加内边距、边框和外边距，行内非替换元素会忽略该属性。

属性值：

Auto：默认值。浏览器会计算出实际的高度

Length：使用px、cm等单位定义高度

百分比：基于包含它的块级对象的百分比高度

Width：设置元素的宽度

该属性和height属性一样，可在内容区域外面增加内边距、边框和外边距

属性值：

Auto：默认值。浏览器会计算出实际的宽度

Length：使用px、cm等单位定义宽度

百分比：基于包含它的块级对象的百分比宽度

Max-height:设置元素的最大高度

属性值：

none：默认值。定义对元素允许的最大高度没有限制

Length：设置元素的最大高度值

百分比：设置基于包含它的块级对象的百分比最大高度值

Max\-width：设置元素的最大宽度

高属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽，不允许指定负值

属性值：

None：默认值。定义对元素的最大宽度没有限制

Length：定义元素的最大宽度值

百分比：定义基于包含它的块级对象的百分比最大宽度

Min\-height：设置元素的最小高度

该属性值会对元素高度设置一个最低限制，因此，元素可以比指定值高，但不能比其矮，不允许指定负值

属性值：

Length：设置元素的最小高度值。默认值是0

百分比：设置基于包含它的块级对象的百分比最小高度值

Min\-width：设置元素的最小宽度

该属性会对元素宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。

属性值：

Length：定义元素的最小宽度值，默认值，取决于浏览器

百分比：定义基于包含它的块级对象的百分比最小宽度值

# **CSS列表属性** #

List\-style-type：设置列表向标记的符号。

属性值：

None：无标记

Disc：默认。标记是实心圆

Circle：标记为空心圆

Square：标记为实心方块

Decimal：标记是数字

Decimal-leading-zero：以0开头的数字标记(如：01,02,03)

List\-style-image：使用图像来替换列表项的标记

该属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-type属性控制。注意：请始终规定一个list-style-type属性以图像不可用。

属性值：

URL：图像的路径

None：默认值。无图像被显示。

List\-style-position：设置在何处放置列表项标记

Inside：列表项标记放置在文本以内，且环绕文本根据标记对齐

Outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外。且环绕文本不根据标记对齐

List\-style:简写属性在一个声明中设置所有的列表属性

该属性是一个简写属性，涵盖了所有其他列表样式属性。一般按照如下顺序排列属性值：

List-style-typeàlist-style-positionàlist-style-image

# **CSS内边距属性(padding)** #

Padding-top:设置元素的上内边距

行内非换行元素上设置的上内边距不会影响行高计算，因此，如果有一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。不允许指定负值。

属性值：

Length：设置以具体单位的固定的上内边距值。单位px、cm。默认值为0px

百分比：定义基于父元素宽度的百分比上内边距。此值不会如预期的那样工作于所有浏览器中

Padding-bottom:设置元素的下内边距

该属性值的设置与上内边距相同。

Padding-left:设置元素的左内边距

行内非替换元素上设置的左内边距仅在元素所生成的第一个行内框的左边出现。

Length：设置以具体单位计的固定的左内边距，如：px、cm。默认值是0px。

百分比：定义基于父元素宽度的百分比左内边距。此值不会如预期的那样工作于所有浏览器中

Padding-right:设置元素的右内边距

行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现。

属性值与左内边距设置相同。

Padding：在一个声明中设置所有的内边距属性

属性值设置可以是4、3、2、1个。

4值个代表上、右、下、左内边距。3个值代表上、右、下内边距。2个值代表一个上下内边距，一个代表右左内边距。1个值代表全部内边距。

# **CSS外边距属性(margin)** #

Margin-top：设置元素的上外边距

属性值：

Auto：浏览器设置的上外边距

Length：定义固定的上外边距。默认值是0，单位是：px、cm

百分比：定义基于父对象总高度的百分比上外边距。

Margin\-bottom：设置元素的下外边距

属性值的设置与上外边距设置相同。

Margin\-left：设置元素的左外边距

属性值：

Auto：浏览器设置的左外边距

Length：定义固定的左外边距。默认值是0；单位：px、cm

百分比：定义基于父对象总高度的百分比左外边距

Margin\-right：设置元素的右外边距

属性值的设置与左外边距设置相同

Margin：在一个声明中设置所有外边距

该属性的值可以有1到4个值。4个值代表上、右、下、左外边距。3个值代表上、右、下外边距。2个值的第一个值代表上下外边距，第二个值代表右、左外边距。1个值代表全部外边距。

# **CSS边框属性(border和outline)** #

Border\-bottom：在一个声明中设置所有的下边框属性

该属性是一个简写属性，把下边框的所有属性设置一个声明中。声明顺序：下边框宽度à下边框样式à下边框颜色

Border\-bottom-color：设置下边框的颜色

属性值：

Color\_name：设置颜色值为颜色名称的边框颜色比如red

Hex\_number：设置颜色值为十六进制值的边框颜色，比如\#FF0000

Rgb\_number：设置颜色值为rgb代码的边框颜色，比如RGB(255,0,0)

Transparent:默认值。边框颜色为透明

Border\-bottom-style：设置下边框的样式

属性值：

None：定义无边框

Hidden：与none相同。不过应用于表时除外，对于表，hidden用于解决边框冲突

Dotted：定义点状边框。在大多数浏览器呈现为实线

Dashed：定义虚线。在大多数浏览器呈现为实线

Solid：定义实线

Double：定义双线。双线的宽度等于border-width的值

Groove：定义3D凹槽边框。效果取决于border-color的值

Ridge：定义3D垄装边框。其效果取决于border-color的值

Inset：定义3Dinset边框。效果取决于border-color的值

Outset：定义3Doutset边框。效果取决于border-color的值

Border\-bottom-width：设置下边框的宽度

属性值：

Thin：定义细的下边框

Medium：默认值。定义中等的下边框

Thick：定义粗的下边框

Length：允许自定义下边框宽度

Border\-color：设置四条边框的颜色

该属性设置四条边框的颜色，其值可设置1到4个值；其中1个值为四条边的颜色，其中2个值为第一个为上下边框的颜色值，第二个值为右左边框颜色值。其中3个值表示上、右、下边框的颜色值。4个值为四条边框的颜色值。

Border-left：在一个声明中设置所有的左边框属性

该属性是简写属性把左边框的所有属性设置到一个声明中。其顺序为:左边框宽度à左边框样式à左边框颜色

Border\-left-color：设置左边框的颜色

属性值：

该属性值与下边框颜色相同

Border\-left-style：设置左边框的样式

属性值：

该属性值与下边框样式设置相同

Border\-left-width：设置左边框的宽度

属性值：

该属性值的与下边框宽度设置相同

Border\-right：在一个声明中设置所有的有边框属性

该属性把有边框的所有属性设置到一个声明中，其顺序为：右边框宽度à右边框样式à右边框颜色

Border\-right-color：设置右边框的颜色

属性值：

该属性值的设置与下边框属性值的设置相同

Border\-right-style：设置右边框的样式

属性值：

该属性值的设置与下边框属性值的设置相同

Border\-right-width：设置右边框的宽度

属性值：

该属性值的设置与下边框属性值的设置相同

Border\-style：设置四条边框的样式

属性值：

简写属性，该属性可以是1到4个值。其中1个值表示四条边框样式为同一个样式，其中2个值，第一个值为上下边框的样式，第二个为右左边框的样式，其中3个值为上、右、下边框样式。其中4个值为四条边框的样式

Border\-top：在一个声明中设置所有的上边框属性

简写属性，该属性把上边框的所有属性设置到一个声明中，其顺序为：上边框宽度à上边框样式à上边框颜色

Border\-top-color：设置上边框的颜色

属性值：

该属性值的设置与下边框属性值的设置相同

Border\-top-style：设置上边框的样式

属性值：

该属性值的设置与下边框属性值的设置相同

Border\-top-width：设置上边框的宽度

属性值：

该属性值的设置与下边框属性值的设置相同

Border\-width：设置四条边框的宽度

属性值：

简写属性，该属性可以是1到4个值。其中1个值表示四条边框宽度相同，其中2个值，第一个值为上下边框宽度，第二个为右左边框宽度，其中3个值为上、右、下边框宽度。其中4个值为四条边框的宽度

Border：在一个声明中设置所有的边框属性

简写属性，该属性在一个声明设置所有的边框属性。边框宽度à边框样式à边框颜色

Outline：在一个声明中设置所有的轮廓属性

轮廓是绘制于元素周围的一条线，位于边框边缘的外围。可起到突出元素的作用。

注意：请始终在outline-color属性之前设置outline-style属性。元素只有获得轮廓后才能改变轮廓颜色。轮廓不会占据空间，也不一定是矩形。

简写属性，在一个声明中设置所有的轮廓属性。其顺序为：轮廓颜色à轮廓样式à轮廓宽度

Outline\-color：设置轮廓的颜色

属性值：

Color\_name:设置颜色值为颜色名称的轮廓颜色如red

Hex\_number：设置颜色值为十六进制值的轮廓颜色如\#FF0000

Rgb\_number：设置颜色值为rgb代码的轮廓颜色如rgb(255,0,0)

Invert:默认值。执行颜色反转(逆向的颜色).可使轮廓在不同的背景颜色中都是可见的。

Outline\-style：设置轮廓的样式

属性值：

None：默认值。定义无轮廓

Dotted：定义点状的轮廓

Dashed：定义虚线轮廓

Solid：定义实线轮廓

Double：定义双线轮廓。双线宽度等同于outline-width的值

Groove：定义3D凹槽轮廓，此效果取决于outline-color值

Ridge：定义3D凸槽轮廓，此效果取决于outline-color值

Inset：定义3D凹边轮廓。此效果取决于outline-color值

Outset：定义3D凸边轮廓。此效果取决于outline-color值

Outline\-width：设置轮廓的宽度

只有当轮廓样式不是none时，宽度才会起作用。如果样式为none，宽度实际上重置为0.不允许设置为负值。

属性值：

Thin：设置细轮廓

Medium：默认。设置中等轮廓

Thick：设置粗的轮廓

Length：设置规定轮廓粗细的值

Border\-bottom-left-radius：定义边框左下角的形状 CSS3

属性值：

Length：定义左下角的形状

百分比：以百分比值定义左下角的形状

Border\-bottom-right-radius：定义边框右下角的形状 CSS3

属性值：

Length：定义右下角的形状

百分比：以百分比值定义右下角的形状

Border\-top-left-radius：设置边框左上角的形状 CSS3

属性值：

Length：定义左上角的形状

百分比：以百分比值定义左上角的形状

Border\-top-right-radius：设置边框右下角的形状 CSS3

Length：定义右上角的形状

百分比：以百分比值定义右上角的形状

Border\-radius：简写属性，设置所有四个border-\*-radius属性 CSS3

属性值：

该属性与上面左下角的属性值相同。

定义语法：border-radius:1-4length|% / 1-4 length|%

Border-image-outset：设置边框图像区域超出边框的量 CSS3

属性值：

Border-image-outset:length|number

注释：border-image-outset属性设置边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值。则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许有负值

Border\-image-repeat：设置图像边框是否应平铺(repeated)/满铺(rounded)/拉伸(stretched) CSS3

注释：该属性设置如何延伸和铺排边框的边缘和中间部分。因此，可以设置两个值。如果省略第二个值。则采取与第一个值相同的值。

属性值：

Stretch：拉伸图像来填充区域

Repeat：平铺(重复)图像来填充区域

Round：类似repeat值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域

Border-image-slice：设置图像边框的向内偏移 CSS3

注释：该属性规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词 fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同

属性值：

Number：数字值，代表图像中像素(如果是光栅图像)或矢量坐标(如果是矢量图像)

百分比：相对于图像尺寸的百分比：图像的宽度影响水平偏移，高度影响垂直偏移

Fill：保留边框图像的中间部分

Border\-image-source：设置用作边框的图片 CSS3

注意：该属性可以代替border-style属性中设置边框样式，如果该属性值为none，或图像无法显示，则使用边框样式

None：不使用图像

Image：url(image)用作边框的图像的路径

Border\-image-width：设置图片边框的宽度 CSS3

注释：border-image-width 属性的四个之规定将边框图像分割为九个部分的偏移。它们代表了从区域的上、右、下、左侧向内的距离。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-width 值。

属性值：

Number：代表对应的border-width的倍数

百分比：参考边框图像区域的尺寸：区域高度影响水平偏移，宽度影响垂直偏移

Auto：如果设置该属性，则宽度为对应图像切片的固有宽度

Border-image：简写属性，设置所有border-image-\*属性 CSS3

该属性设置所有边框图像属性。属性值顺序：图像路径à图像内偏移à宽度à超出量à图像(repeat)

Box-shadow：向方框加一个或多个阴影 CSS3

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

属性值：

H-shadow：必须。水平阴影的位置。允许负值

V-shadow：必须。垂直阴影的位置。允许负值

Blur：可选。模糊距离