CSS复习（一）

CSS层叠样式表

一、引入CSS样式
１.行内式

＜标签　ｓｔｙｌｅ＝＂属性１：属性值１；属性２：属性值２；“＞

２.内嵌式

＜ｈｅａｄ＞
　　＜ｓｔｙｌｅ＞
　　　　选择器　｛
　　　　　属性１：属性值１；
　　　　　属性２：属性值２；
　　｝　
　　＜／ｓｔｙｌｅ＞
＜／ｈｅａｄ＞

３外链式

＜ｈｅａｄ＞
　　　＜ｌｉｎｋ　ｒｅｌ＝＂ｓｔｙｌｅｓｈｅｅｔ＂　ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂　ｈｒｅｆ＝＂***ｃｓｓ文件路径***＂＞
＜／ｈｅａｄ＞

二、CSS选择器
１.标签选择器：可以将所有的同类标签选择起来
２.类选择器：一个标签可以有多个类名

　．类名　｛
　　　　　属性１：属性值１；
　　　　　属性２：属性值２；
　　｝
　　＜标签　ｃｌａｓｓ＝＂类名＂＞＜／标签＞

３.ｉｄ选择器：唯一性

＃id　｛
　　属性１：属性值１；
　　属性２：属性值２；
　　｝
＜标签　id＝＂ｉｄ名＂＞＜／标签＞

４.通配符选择器＊：指所有标签
三、CSS字体样式
１.font－size：字体大小
２.font－family：字体（宋体，微软雅黑等）
３.font－weight：字体粗细
　normal：默认，正常。相当于４００
　bold　　加粗，相当于７００
４．font－style字体风格
　　normal：正常
　　italic：斜体
５．综合写法
font：font－style　font－weight　font-size　font-family；
四、CSS外观属性
1.color
2.text-align：文本水平对齐，对行内元素有效
left，right，center
3.line-height：行间距
4.text-indent：首行缩进，1em相当于一个汉字
5.text-decoration：文本装饰
none：默认，取消下划线
underline：下划线
五、复合选择器
1.后代选择器：包括子孙
父代 子代 { }
2.子元素选择器：子选择子元素
父代>子代 { }
3.交集选择器（p.red不含空格）
4.并集选择器（p,span用逗号隔开）
5.链接伪类选择器：a有默认样式，需单独指代
六、标签显示模式display
1.块级元素：div,p,h1~h6,ul,ol,li等
特点：1.独占一行
2.可以设置内边距，宽度，高度
3.宽度默认为父级的100%
4.可以放行内和块级元素（p,h1~h6不能放div）
2.行内元素：span,a,i,u,strong,em等
特点：1.一行可以放多个
2.宽高设置无效
3.宽度默认为自身内容宽度
4.只能容纳其他文本或其他行内元素
3.行内块元素：img，input，td
特点：1.相邻行内元素在同一行上，中间有空白间隙
2.默认宽度为本身内容宽度
3.宽高可设置
4.转换
display:inline/block/inline-block;
七、ＣＳＳ 背景
1.颜色：background-color
2.图片：background-image：none/url
3.平铺：background-repeat：repeat/no-repeat/repeat-x/repeat-y
4.背景位置：background-position
5.背景附着：background-attachment：scroll/fixed
6.简写：
background：颜色 图片 平铺 滚动 位置
八、CSS三大特性
１.层叠行
２．继承性（ｔｅｘｔ－，ｆｏｎｔ－，ｌｉｎｅ－，ｃｏｌｏｒ）
３．优先级：
　　权重：
　　继承或＊　：０，０，０，０
　　标签：　　　０，０，０，１
　　类　　　　　０，０，１，０
　　id　　　　　０，１，０，０
　　行内样式　　１，０，０，０
　　！important：权重最大