一.样式表
内联样式：内联样式只能在html中将样式定义在一个属性中，在body标签中，一般是style属性，形如：
<div style="background: red; width: 500;height: 300;">我是div</div>需要注意空格的存在，内联样式的缺点就是一次只能定义一个元素，不能定义多个元素，所以不怎么实用。。。
内部样式表：内部样式表主要是通过head元素中的style标签来设置网页的样式，优点是可以作用于多个body里的元素，但是缺点是只能对当前网页有作用，涉及到跨网页操作就不可以了
<style>
#d1{
background-color: blue;
width: 500px;
height: 400px;
}
#d2{
border: 2px double orange;
width: 500px;
height: 100px;
}
</style>这就是一个利用了id选择器来更改网页样式，在body中对标签设置一个id属性即可实现，需要注意必须是 属性名：值 成一对的形式。
外部样式表：十分好用的东西，可以在html文件外编写一个css文件，以达到更改网页样式的目的，此外，因为可以利用link标签来将其引用到html文件中，外部样式表还可以作用于不同的html文件中，在调用文件时，使用相对路径./找到文件所在路径即可。
二.选择器
在这个模块里，会学习比较多的选择器，不同的选择器他们最终的目的都是相同的，为了改变在body标签里元素的样式，这里主要会介绍五大种选择器：
第一个是标签选择器，通过直接调用标签的名字来达到改变样式的目的，最简单的方法，形如
<style>
p{
color: red;
}
</style>
<body>
<p>
我是刘德华
</p>
</body>需要注意的是，在使用标签选择器时，会将所有同名标签里的内容全部更改，这也是他的缺点，没有靶向性。
第二种是类选择器，我非常喜欢，点赞，使用时需要在body中的标签里加上class元素，然后在style中通过.class类名的方式调用，好处是类名可以重复，在同一个标签内可以存在多个类名，但是缺点是当时用的类名过多时，代码的可读性会大大下降。
<style>
.c1{
color: blue;
}
</style>
<body>
<div class="c1">
我是吴彦祖
</div>
</body>第三种是id选择器，他的作用就像是身份证id号一样，具有很强的靶向性，同样是写在标签内的元素，一个标签只能有一个id值，一个id选择器也只能选择一个标签，需要注意的是，和类选择器不一样的是，id选择器通过#id值来调用
<style>
#d1{
color: red;
}
</style>
<body>
<div id="d1">
我是彭于晏
</div>
</body>第四种是通配符选择器，这个选择器属于全方面打击，它可以选择页面中的所有标签，并同时改变样式，通过*来调用
<style>
* {
color: yellow;
}
</style>
<body>
<div>
我是玛卡巴卡
</div>
</body>他的缺点也很明显，由于是对所有的标签都作用，所以他的针对性也很差，在实际应用中极少。
上述的四类为最基本的选择器，下述的相对复杂一些
交集选择器，选择器1后面直接加上选择器2，会处理他们共同作用的标签，需要注意之间没有任何符号，是紧挨着的，并且如果有标签选择器的话，那么标签选择器必须放在前面。
<style>
p.one{
color: red;
}
</style>
<body>
<p class="one">
我是张三
</p>
<p>
我是翠花
</p>
</body>最后的结果会显示出来我是张三而不是翠花，因为同时满足p
标签和.one类的只有张三。
下一个是并集选择器，和高中学的数学一样，并集的含义就是选择多个标签，并对他们设置相同的样式，各个选择器之间必须用逗号隔开。
<style>
p,div{
color: red;
}
</style>
<body>
<p>
我长得百里挑一
</p>
<div>
不，万里挑一 </div>
</body>这两个标签都会改变颜色，这就是并集选择器，会将需要的标签设置为相同的样式。
下一部分是关系选择器，有四种
第一个是父<子选择器,选择父子中的满足条件的儿子
div>span {
color: blue;
font-size: 40px;}
意思是在div中选择标签是span的儿子，并设置样式
第二个是祖先选择后代，选择祖先后所有后代都会被设置样式中间用空格隔开，
div span {
color: red;
}
选择div的所有后代，标签名是span的
第三个是兄+弟选择器，他会哥哥的弟弟（必须严格相邻才会选泽）中间用加号链接
div+span {
color: greenyellow;}
表示div相邻的弟弟颜色变为黄绿色
第四个是兄~弟选择器，它会使哥哥符合条件的所有弟弟都会被选择
下一部分是属性选择器，他需要在标签中先定义好特殊的属性，然后通过不同的字符来选择具体使用哪种选择器。
第一个是[属性名]直接在style中使用即可，操作简单易懂可以将所有带有该属性名的标签更改样式
[title]{color: blue; }，所有标签中带有title元素的都会变为蓝色。
第二个是[属性名=属性值]，需要针对属性值来特殊找到几个符合要求的标签
[title=a]{color: orange； }标签中带有title值等于a的会被更改为橘黄色。
第三个是[属性名^=属性值]，表示寻找属性值是以我规定的属性值开头的标签
[title ^=a]{ color: pink； }，只要title元素值中是以a开头的标签，都会被选中
第四个是[属性名$属性值]，表示寻找的属性值是以规定的属性值结尾的标签
[title$=c]{ color: blueviolet;}只要属性值是以c结尾的，都会被选中
最后一个是[属性名*=属性值]，表示只要包含该属性值的标签丢会被选中
[title*=b]{ color: teal; }
下一部分是伪类选择器，一共有十一种，但是在实际操作上来讲，难度系数不高
首先明确一下伪类的意思，它并不是真正的类，而是用来描述元素的状态，比如鼠标点击时的状态，他一般都用于开头，在：前如果有空格则表示从子类开始遍历，没有空格代表从当前标签的级数开始遍历
第一种是 ：first child 表示找到第一个子元素
：last child 表示找到最后一个子元素
:nth child(n) 表示找到第n个元素，n可以替换为2n表示偶数
2n+1表示奇数，odd也可以表示奇数，even也可以表示偶数
第二种是：否定伪类选择器 形如
：not（）括号内加入其他选择器，但是并不支持加入复合选择器
主要目的就是将复合选择器的内容排除
div :not(p:first-of-type):not(p:last-child) {
color: red;
}
返回的结果就会是先将p类型的第一个和最后一个去掉，然后将中间的标签变红
第三种是超链接的伪类，一般形如：
<style>
/* 超链接访问前的颜色设置 */
a:link{
color: orange;
}
/* 超链接访问后的颜色设置，注意，网址必须真实存在，才能表示访问过 */
a:visited{
color: green;
}
/* 鼠标进入后的状态设置 */
p:hover{
background-color: yellow;
}
/* 鼠标左键点击的状态设置 */
p:active{
color: violet;
font-size: 40px;
}
</style>:link 超链接独有的选择器，表示未访问前的状态
：visited 超链接独有的选择器，表示访问过的状态
：hover 所有元素都可以使用的选择器，表示鼠标进入该元素时的状态
：active: 所有元素都可以使用的选择器，表示鼠标左键点中该元素时的状态
下一部分是伪类选择器，一共有五个：
p::first-letter 对段落中的首字符设置样式
p::first-line 对段落的首行设置样式
p::selection 对段落中被鼠标选中的文字设置样式
p::before 对段落中第一个字符的前面设置样式,可以理解为向段落的第一个字符插入内容
p::after 对段落中的最后一个字符进行设置，可以理解为向段落的最后插入内容*/
他们可以对段落进行一定的设置形式最后两个的实际目的就是为了插入内容 ，他们写在style里，并且也是虚假的元素。
在选择器中，同样是有着等级制度的，等级越强的选择器，其权限越高：
内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态
可以看出，内联样式最强，但是他的局限性也是最高的。
扫一扫
1211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
