九.css样式

1.什么是css？

css即层叠样式表的首字母简写

2.css三大特性

层叠性，即为同意元素设置多个一样的样式，如颜色，同级的会是最后出现的颜色

继承性：当子标签没设置样式时，会继承父级的样式

优先级：！importan>行内样式>id选择器>类选择器>标签选择器>通配符>继承

3.css的语法

css构成
选择器 {声明1;声明2}
{}中间用;隔开
选择器 {属性1：属性值;属性2：属性值;}

4.css文件的引入方式

1.内联样式

段落标签

2.内部样式表
在head中写入style



3.外部链接方式
在head中加入link标签

4.导入样式表
@import "css/1.css"



注意：样式表的优先级
内联样式>内部样式>外部样式>浏览器缺省设置

4.基础选择器

1.id选择器
第一步：

盒子1

第二步：head中的style



2.class选择器
第一步：

盒子1

盒子2

第二步：head中的style



3.元素选择器
第一步：

盒子1

盒子2

第二步：head中的style



4.*选择器,通配符选择器，选择全部元素
第一步：

盒子1

盒子2

第二步：head中的style

5.选择器扩展

1.后代选择器
样式：E F {声明；}
选择父级E中的所有F元素，包括子孙
第一步：

段落标签1

段落标签2

第二步：head中的style



2.子代选择器
样式：E>F {声明；}
选择父级E中的所有F子元素，不包括孙子
第一步：

段落标签1

段落标签2

第二步：head中的style



3.分组选择器
E,F,G,H {声明;}

段落标签1

段落标签2

第二步：head中的style



4.交集选择器

段落标签1

段落标签2

第二步：head中的style



5.兄弟选择器
同级元素 E~F {声明;}
第一步：

这是一个标题

这是一个文字段落

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个文字段落

第二步：



6.相邻选择器
同级元素 E-F {声明;}
第一步：

这是一个标题

这是一个文字段落

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个文字段落

第二步：

6.权重

内联样式(1000)+id选择器(100)+类选择器(10)+元素选择器(1)

7.伪类选择器

注意：
必须时如下顺序，active是按下时
选择器:link {声明;}
选择器:visited {声明;}
选择器:hover {声明;}
选择器:active {声明;}

css常用属性

1.背景属性

1.复合样式
选择器{background：颜色 图片 是否平铺 位置;}
选择器{background：red url("路径") no-repeat top left;}
2.backgound-color背景颜色
选择器{background-color:red;}
3.background-image背景图片
选择器{backgroud-image:url("路径");}
4.background-repeat控制图片平铺
选择器{backgroun-repeat:repeat;}
5.backround-position背景图片位置
百分比:选择器{backgound-position:20% 20%;}
关键字:选择器{backgound-position:top left;}使用时注意top或者bottom在前
长度：选择器{backgound-position:50px 50px;}
6.background-size背景大小
选择器{backgound-size:contain;}
选择器{backgound-size:cover;}
选择器{backgound-size:400px 600px;}
选择器{backgound-size:100%;}

2.文本属性

1.文本颜色
选择器{color:red;}
2.文本对齐,left,right,center,justfy(宽度相等，左右外边距对齐)
选择器{text-align:center;}
3.文本修饰，none,overline（上划线）,line-through（删除线）,ubderline（下划线）
选择器{text-decoration:underline;}
4.文本转换uppercase（全部大写）,lowercase（全部小写）,captitalize（首字母大写）
选择器{text-transforma:uppercase;}
5.文本缩进
选择器{text-indent:16px;}
选择器{text-indent:2em;}
6.单词间距
选择器{word-spacing:16px;}
7.字符间距
选择器{letter-spacing:16px;}
8.行间距,行间距=文字高度+上间距+下间距
选择器{line-height:26px;}

3.字体属性

文字属性复合样式
选择器{font:font-style font-weight font-size/line-height font-family;}
1.字体名称font-family
注意字体名字多个单词的时候用引号括起来，多个字体的时候用,号分隔开
选择器{font-family:"Times New Roman",Times,serify;}
2.字体倾斜样式:narmal（正常）,italic（倾斜）,oblique（文字倾斜，少用）
选择器{font-style:normal;}
3.文字大小
选择器{font-size:30px;}
4.文字粗细:bold（加粗）,bolder（更粗）,normal（正常）,lighter(细，透明)，700（粗，无单位），100（细）
选择器{font-weigth:bold;}

4.列表属性

ul复合样式
ul{list-style: square inside url("路径")}
1.列表样式属性:none（无样式），disc（实心圆），square(实心正方形)，circle(空心圆)，demical(阿拉伯数字)，lower-alpha,upper-alpha（大小写英文字母），lower-roamn,upper-roman大小写罗马数字
ul {list-style-type:none}
2.列表样式图片
ul{list-style-image:url("路径")
3.列表样式位置inside,outside
ul{list-style-position:inside;}

5.表格

6.颜色

1.颜色名如red
2.16进值 #000000~#FFFFFF
3.RGB
4.RGBA(alpha)
5.transparent透明

7.如何设置图片垂直居中？

1.基线baseline，文字有个基线用于放q,g,p这种字母，当图片下方有空白的时候怎么解决呢？
对图片垂直居中，用垂直对齐
img {vertical-align:middle;}
文字垂直居中，用行间距
p {line-height:20px}

8.ul列表元素和父盒子高度不一致的时候怎么居中？

将列表元素设置成行内块,然后设置成行高
li {
display:line-block;
}