目录
文本设置
color | 设置文本颜色 |
line-height | 设置行高(即行间距) |
text-align | 设置对齐方式 |
letter-spacing | 设置字符间距 |
text-decoration | 设置文本修饰 |
white-space | 规定如何处理空白:如规定是否换行,一般不换行 |
字体属性
font-family | 设置字体类型 | 微软雅黑、宋体。。。 |
font-size | 设置字体大小 | 12px(12像素)、larger、small。。。 |
font-style | 设置字体风格 | initial(初始)、italic(斜体字)、normal(默认)、oblique(倾斜) |
font-wight | 设置字体的粗细 | 100-900、bold(加粗)、 |
font | 在一个声明中设置所有字体属性 | font:italic bold 36px 宋体;(顺序不可变) |
背景属性
background | 简写属性 |
background-color | 设置元素的背景颜色 |
background-image | 将图像设置为背景 |
background-repeat | 设置背景的平铺方式 |
background-position | 设置背景出现的初始位置 |
列表属性
list-style | 简写属性 |
list-style-image | 将图像设置为列表标志的位置 |
list-style-position | 设置列表中列表项的位置 |
list-style-type | 这是列表项标志的类型 |
display常用属性
block:将元素显示为块级元素,该元素前后会带有换行符 |
inline:默认,元素会显示为内联元素,该元素前后没有换行符 |
none:该元素不会被显示 |
盒子模型有关的属性
边框属性
border-color | 边框颜色 |
border-width | 边框宽度 |
border-style | none:默认值,无边框;solid:实线;dashed:虚线 |
border-top | 上边框 |
border-right | 右边框 |
border-bottom | 下边框 |
border-left | 左边框 |
border | 简写属性 |
外边距属性
margin-top | 上外边框 |
margin-right | 右外边框 |
margin-bottom | 下外边框 |
margin-left | 左外边框 |
margin | 简写四个边距:默认,上右下左 |
内边距属性
padding-top | 内容与上边距之间的距离 |
padding-right | 内容与右边距之间的距离 |
padding-bottom | 内容与下边距之间的距离 |
padding-left | 内容与左边距之间的距离 |
padding | 四个方向的内边距默认顺序为:上,右,下,左 |
鼠标属性:
a:link | 未单击访问时超链接样式 |
a:visited | 单击访问后超链接样式 |
a:hover | 鼠标悬浮其上的超链接样式 |
a:active | 鼠标单击未释放的超链接样式 |
设置伪类顺序:a:link->a:visited->a:hover->a:active
浮动属性float:
none | 不浮动 |
right | 右浮动 |
left | 左浮动 |
清除浮动 clear:
主要是用来:扩展盒子高度
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左、右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
overflow属性
主要是用来:扩展盒子高度
visible | 默认值,内容不会被修剪,呈现在盒子之外 |
hidden | 内容会被修剪,并且其余内容是不可见的 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
position定位属性
static | 默认值,没有定位 |
relative | 相对定位 |
absolute | 绝对定位(r如果有父元素,则以父元素为基准,否则以浏览器窗口为基准),从标准流中脱离,对其他元素的定位不会造成影响。 |
fixed | 固定定位 |
例如:
div ul li{
position: relative;
left:45%;
top:-350px;(负值为相对原来的位置向上移动)
}
注意:fixed目前还不被一些浏览器支持,实际网页制作中也不常用。
堆叠顺序
z-index属性设置定位元素的堆叠顺序
设置透明度:
opacity:x设定网页元素的透明度