Html 初识样式表&选择器
样式表&类选择器分类
样式表分类：
1.内联式样式表：在标签内部写样式代码，精确但不方便，增加工作量，后期修改麻烦。
2.嵌入式样式表：一般写在head内 以<style>......</style>方式可以控制整个页面内的某个标签样式。
3.外联式样式表：单独将样式表定义成一个css文件，然后在css文件中调节页面样式
一般会在head标签内写一句：<link type="text/css" rel="styleseet" href="文件所在目录">
注：在css文件中不用在<style></style>标签内用类选择器。！！！
4.注入样式表：在一个css文件中引入另一个css文件
例：
在A.css文件中写 @inport url(B.css);
即表示在A.css文件中引入B.css文件中的样式
类选择器分类：
1.全局选择器：*后跟大括号；作用：控制全局页面整体调。
2.ID选择器：#后跟定义的id名加大括号；用法：一般应用于单个标签。ID值不可以重复
3.class选择器： .后面跟定义的class名加大括号； 注：class值可以重复，用的最多的应该就是他。
4.标签选择器：直接写标签名跟大括号；
5.复合选择器：大括号前写多种选择器用逗号隔开；如 #c1,.c2,p,a{
.......
}
6.关联选择器：说白了就是嵌套使用，用空格彼此分开由外往内选择要选的元素。
例：
div p em{..........} 最普通的标签嵌套格式 其他格式也可以使用。！！！！
<div>
<p>
<em>关联选择器案例</em>
</p>
</div>
7.伪元素选择器：对同一个标签的不同状态使用样式。
例：
a标签格式
a:link{.....} //a标签链接状态
a:hover{......} //鼠标放上去的状态
a:visited{.......} //访问过的状态
<a href="http://www.baidu.com">百度</a>
上述状态会使所有a标签状态都一样
例2：
a标签 伪元素与类选择器同时使用
a.one:link{.....} //a标签链接状态
a.two:hover{......} //鼠标放上去的状态
a.three:visited{.......} //访问过的状态
<a class="one" href="http://www.baidu.com">百度</a>
<a class="two" href="http://www.sina.com.cn">新浪</a>
<a class="three" href="http://www.souhu.com">搜狐</a>
不同的链接样式不一样
下面是代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/**全局选择器: *后面跟大括号*/
*{
margin: 0px; /*外边距为0像素*/
padding: 0px; /*内边距为0像素*/
}
/*不常用的 自己定义属性的类选择器*/
[doubi="2"]{
color: chartreuse;
}
/*类选择器的关联选择器： 由标签最外层向内找到你所要找的元素 注意没个选择器之间的空格 */
#c2 .class-2 em{
color: crimson;
}
/*复合选择器:大括号前写多种标签并用逗号隔开*/
span,p,a,#c1,.class-1{
width: 200px;
height: 50px;
background-color: cyan;
}
/*id选择器: #直接跟id定义的名*/
#c1{
width: 100px;
height: 140px;
}
/*class选择器: .后面跟class名 */
.class-1{
width: 200px;
height: 100px;
}
/*标签选择器 直接打标签名即可选择标签内元素
注:只要是有span标签的都会被选中(span只是其中一种也可是其他标签)*/
span{
width: 50px;
height: 100px;
/*这里冒号后面必须写"单位"*/
}
</style>
<!-- 引用外部css文件-->
<link type="text/css" rel="stylesheet" href="你新建的CSS文件位置"/>
<title></title>
</head>
<body>
<span>
span选择器更改
</span>
<div class="class-1">
class选择器更改样式
</div>
<!--style="可以随便加样式用；隔开用；结尾"-->
<div style="background: blue; color: black;">
哈哈哈哈哈哈
</div>
<p id="c1">
id选择器使用案例
</p>
<a>
A标签选择器案例
</a>
<center id="c2">
<p class="class-2">
<em>
关联选择器案例
</em>
</p>
</center>
<div doubi="2">
自定义属性选择器案例
</div>
</body>
</html>
说一下优先级的问题
<div style="background: blue; color: black;">
</div>
优先级最高所以他的使用率应该是最低的，给自己留一个修改机会。若对同一个元素进行编辑最后编辑的样式会覆盖之前编辑的样式
class用的应该是最多的
注：
div:division 可以吧div理解成一个房子，里面可以放很多东西。
即<div>...........</div>相当于一个容器，里面可以容纳段落，标题，乃至章节，搞要，备注等等。
注意：<p>........</p>内不能放置<div>.....</div>标签，通常会把<p></p>放置于<div></div>内。
我只是一只菜鸟非喜勿喷！有什么不对的地方您可以私信我。请您帮助我成长！
