一 css的引入方式
1.行内样式:在标签的style属性中设定css样式。
<div style="width:100px;height:100px;background-color:red;"></div>
2.内嵌式: 是将css样式集中写在网页中的head标签内的style中。
<style>
div{
width:100px;
height:100px;
}
</style>
3.链接式:引入外部css文件,在head标签中使用link标签引入外部样式表文件。
<link type="text/css" rel="stylesheet" href="style.css"/>
4.导入样式:
<style>
@importurl(style.css);
</style>
二 css选择器
1.标签选择器
2.类选择器
3.ID选择器
4.通用选择器
5.伪类选择器
6.后代选择器
7.子元素选择器
8.群组选择器
9.相邻选择器
10.交集选择器
11.表单类型选择器
三 css长度单位
1.相对长度单位: px em
2.绝对长度单位: mm cm
四 字体属性
字体 font-family:"黑体"
粗细 font-weight:100-900 bold bolder lighter
英文字母大小写转换: text-transform: capitalize(首字母大写)
uppercase(全大写)
lowercase(全小写)
文字大小:font-size:px/em/rem/%;
文字装饰效果: text-decoration: underline(下划线)
line-through(删除,中间线)
overline(上划线- -)
none
blink(文字闪烁 不推荐使用)
段落首行缩进:text-indent: px/em;
设置字词间距:letter-spacing: px ; 中文、字母,字间距
word-spacing:px; 只用于英文,单词与单词的间距
文本的水平位置:text-align: left/right/center/justify/
文字颜色:color
段落的垂直对齐方式:vertical-align
行高:line-height:px/%
五 背景属性 background
背景图片 background-image:url(路径)
背景图片平铺:background-repeat:repeat(默认平铺)/repeat-x(水平平铺)/repeat-y(垂直
平铺)/no-repeat(不平铺)
背景图片定位: background-position: 水平(left/right/center) 垂直(top/bottom/center);
背景位置固定:background-attachment:fixed(固定定位)/scroll
background复合属性:
background:url(路径) no-repeat right bottom fixed 多个属性之间用空格隔开
背景图片大小:background-size:px/% px/%; 空格隔开,不能用在复合属性中。