CSS引入方式及选择器
CSS层叠样式表
- HTML结构和CSS样式如何关键到一起（CSS的引入方式）
- CSS的引入方式
CSS常用属性
`width:100px; 宽度`
`height: 100px; 高度`
`line-height: 100px; 行高 文字垂直居中 `
`background-color: green; 背景颜色 `
`color:white; 字体颜色 `
`text-align: center; 文字水平居中 `
left默认值居左，right居右，center居中
`font-weight: bold; 文字加粗 `
bold加粗 / normal 去掉加粗
`font-size: 30px; 字体大小 `
`text-decoration:none; 去掉下划线`
`list-style: none; `去掉列表的默认样式（小黑点、序号）
CSS引入方式 面试题
- 行内式：直接写在html标签的后面，再通过标签属性style来引入的
<div style="color:red;">区分大模块</div>
- 内嵌式：将css代码单独的放在style标签中，通过css选择器来选择html元素
- style标签一般放在head标签内（title下面）
<style>
/* css选择器{css样式} */
div{color:red;}
</style>
<div>div1</div>
<div>div2</div>
-
外链式：将css代码单独的放在一个文件中，再通过link标签来进行引入的
- link标签一般放在head元素内，title下面
<link rel="stylesheet" href="style.css" type="text/css">
link 标签
rel="stylesheet" 样式表，不可缺少
href="" 样式表的地址、路径
type="text/css" 类型，可以省略掉
- 导入式：将css代码单独放在一个文件中，再通过style标签来引入，
@import "css样式表地址";
<style>
@import "style.css";
</style>
<div>div1</div>
<div>div2</div>
CSS选择器的分类
标签选择器
直接把html元素当做选择器来用
权重：1
标签选择器会选择html页面中的所有相同的标签
<style>
div{color:red;}
</style>
<div>1</div>
<div>2</div>
类选择器
将html元素后面添加class标签属性，利用标签属性值（类名）当作选择器来用，在标签属性值的前面加一个"."
权重：10
标签属性值（类名）可以重复使用
标签属性值（类名）可以有多个，标签属性值（类名）之间用空格隔开
<style>
div {
color: red;
}
.div2{
color: green;
}
.title{
font-size: 30px;
}
</style>
<div>div1 红色</div>
<div class="div2">div2 绿色</div>
<p class="div2 title">段落</p>
<p>11111</p>
font-weight : normal;
<--去掉加粗-->
ID选择器
将html元素后面添加id标签属性，利用标签属性值当作选择器来用，再标签属性值的前面加一个"#"
权重：100
id在页面中具有唯一性，不能重名
id选择器是配合Javascript来使用的
<style>
div{}
.box{
color:red;
}
#div1{
color:green;
}
</style>
<div class="box" id="div1">div1</div>
<div id="div1"></div> 错误的
通配符选择器
匹配了所有的HTML元素
语法：*{ css属性名 : css属性值; }
权重： 0 < * < 1
在项目中，通配符选择器不用，它比较消耗性能
reset.mn.css 清除默认样式表
*{
margin:0;
padding:0;
}
后代选择器（派生选择器）
在一个根元素（大盒子）的范围内，去查找它的后代元素
语法：祖辈选择器 后代选择器{}
权重：所有选择器权重相加之和
作用：增加权重、精确查找范围
<style>
ul li span{
color: red
}
.box ul li span{
color: green
}
ul span{
color:pink
}
.box ul span{
color:yellow
}
</style>
<div class="box">
<ul>
<li>
<span>11</span>
</li>
</ul>
<ol>
<li>
<span>2</span>
</li>
</ol>
</div>
分组选择器
将同一份css样式，分别给了不同的html元素，并给这个htlm元素添加css样式
语法：选择器1,选择器2,选择器3 { css样式 }
权重：独立计算的，不会相加
<style>
.box,p,h2,span{
color:red;
}
</style>
<div class="box">大盒子</div>
<p>段落</p>
<h2>标题</h2>
<span>行内小模块</span>
子级选择器
存在包含关系的元素选择，通过父级选择子级
语法：父级选择器>子级元素{}
权重：所有选择器权重相加之和
<style>
.box ul li span{}
.box ul span{}
ul span{}
ul li span{}
.box>ul>li>span{}
.box>ul>span{} 错误的
ul>span{} 错误的
ul>li>span{}
</style>
<div class="box">
<ul>
<li>
<span>1</span>
</li>
</ul>
<ol>
<li>
<span>2</span>
</li>
</ol>
</div>
伪类选择器
给html元素添加某种状态
例如：鼠标经过时的状态
权重：10
伪类选择器在项目中常用的状态是:hover
/* :hover 鼠标经过时的状态 */
.nav a:hover{
color: green;
font-weight: bold;
}
标签属性选择器
利用标签属性名和标签属性值当做选择器来用，来选择html元素
语法：[标签属性名]{css样式}
[标签属性名=标签属性值]{css样式}
权重：10
如果遇到HTML元素中带有class标签属性时，一般都用类选择器来选择HTML元素，不会使用标签属性选择器
<style>
div{}
.box{}
[title]{}
[title=zf]{}
[class]{}
[class=box]{}
</style>
<div class="box" title="zf">111</div>
交集选择器
两种选择器同属一个元素时，可以用我们的交集选择器来准确选择html元素
权重：所有选择器权重相加之和
交集选择器：标签选择器和类选择器相结合、标签选择器和标签属性选择器相结合、标签选择器和id选择器相结合、类选择器和类选择器相结合、类选择器和标签属性选择器相结合....
<style>
div{}
.box{}
[class]{}
[class=box]{}
[title]{}
[title=zf]{}
div.box{}
div[title]{}
div[class]{}
.box[title]{}
.box.info{}
</style>
<div class="box info" title="zf" id="div1">jk</div>
CSS继承
子级元素从父级元素身上继承一些可继承的css属性
可以继承的CSS属性：和文字相关、和列表相关的css样式
网站css样式调整之css的继承方式
路径
绝对路径
指完整的域名网址或者磁盘中指定文件的全部路径
http://www.zhufengpeixun.cn/
一般用在网站的尾部或者友情链接上
相对路径
是指在同一个文件下，通过一个参考点找到其他文件
一般常用在引入图片、css样式表....这些地方
返回上一级 用 ../
同级（平级）之间直接用文件名(文件夹名)
下一级 用 /
