CSS常用属性大全

177 阅读8分钟

css属性大全

背景属性

background	简写属性,作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

文本属性。

color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写 
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

字体属性

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

链接属性

a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:linka:visited后面
a:active 必须跟在 a:hover后面

列表属性

list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

table表格

border	指定CSS表格边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
Widthheight属性定义表格的宽度和高度。
text-align	属性设置水平对齐方式,向左,右,或中心
vertical-align	垂直对齐属性设置垂直对齐,比如顶部,底部或中间

盒子模型

Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

border-style 值:
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值

border-width	属性为边框指定宽度。
border-color	属性用于设置边框的颜色
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式

border	简写属性,用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width	简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color	简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom	简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。
border-radius	设置圆角的边框。

轮廓

outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

margin外边距

margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

padding内边距

padding	使用简写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

尺寸属性

height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

Display(显示) 与 Visibility(可见性)

display:none;
visibility:hidden;

Position:(定位)

static	HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
relative	相对定位元素的定位是相对其正常位置。
fixed	元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
absolute	绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
sticky	基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottomleft 之一,换言之,指定 top, right, bottomleft 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip	剪辑一个绝对定位的元素
cursor	显示光标移动到指定的类型
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域
position	指定元素的定位类型
right	        定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top		定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
z-index	        设置元素的堆叠顺序

Overflow: 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

visible	默认值。内容不会被修剪,会呈现在元素框之外。
hidden	内容会被修剪,并且其余内容是不可见的。
scroll	内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

浮动

clear	指定不允许元素周围有浮动元素。
float	指定一个盒子(元素)是否可以浮动。