11月3日学习内容整理：CSS语言、引入方式、选择器
css语言是实现页面布局和其它比html复杂的渲染效果
通常css都是和html连用，实现步骤是先查找标签再操作标签
一、引入方式
1、行内式：
》》》就是利用标签的某种属性来引入css语言的效果
》》》<h style="background : red">hahahah</h> 这样的方法来实现背景颜色的渲染
》》》但是行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用
2、嵌入式：
》》》嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<style>
这里就直接写CSS代码，比如
div {
color :red
} 这样就对所有的div标签都设置了红色的字体颜色，这种方式就是嵌入式
</style>
》》》但是嵌入式只能对当前页面的标签进行控制，不能对其它页面的标签进行控制，这样显然是很麻烦的，且效率也不高
3、链接式：
》》》就是将一个css文件引入到htnl文件
》》》利用html的head标签中的link标签<link href="mystyle.css" rel="stylesheet" type="text/css">
》》》href属性就是css文件的路径，rel属性是固定的
》》》链接式是会先加载css文件，加载完后再在网页上显示
4、导入式
》》》将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中
（1）格式：
<style type="text/css">
@import"mystyle.css"; 此处要注意是css文件的路径</style>
5、导入式和链接式都是引入css文件的方式，但区别是：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点
所以导入式可能会出现我们平时遇到的那种网页显示的东西很乱过一会后又变得和以前一样
二、选择器
1、概念：选择器的用处是给指定的一个或多个标签统一做效果，选择器其实就是用来查找标签的
下面说一下分类：
三、基本选择器
1、element选择器（标签选择器）
》》》格式：
标签名｛｝就这样就找到了所有的指定标签，在大括号里可以为所有的指定标签设置很多渲染效果，注意是所有的指定标签
例如：p{ color : red} 就对所有的p标签的内容设置字体颜色为红色
2、id选择器
》》》格式：
#标签的id值｛｝ 这样就会对id对应的标签做效果
3、class选择器
》》》格式：
.class值{ } 用【点】表示class值，这样就会对所有相应的class值的标签做效果
4、通配选择器
》》》格式：
* ｛｝ 这样就会对所有的标签做效果，这里指的是当前页面所有的标签，也包括head和body标签，不是指的某一个标签
补充：class和id的设置方法一样，都是属性，但是class和id的最大区别就是class值可以重复，id值不能重复
四、组合选择器
1、后代选择器
.class值 嵌套的标签名｛｝ 指的是嵌套中所有指定的标签名都被渲染，不管有几层嵌套，用空格隔开
2、子代选择器
.class值>嵌套的标签名｛｝ 只是【儿子辈】中指定的标签名，没有【孙子辈】或者更深层次的嵌套标签，用大于号隔开
3、毗邻选择器
.class值+下面的标签名｛｝ 必须是下面的第一个标签名也就是紧挨着的标签名，用加号隔开，注意若指定的标签不是下面的第一个则渲染是不生效的
4、兄弟选择器
.class值~下面的标签名｛｝ 不用紧挨着，只要是下面的对应的标签名即可，用~号隔开
5、多元素选择器
.class值，.class值 标签名｛｝ 用逗号隔开是代表或的关系，意味着只要满足两种关系的其中一种就可以被渲染，也就是两种标签有相同的渲染效果
标签名.class值｛｝ 紧挨着不能有任何符号代表且的关系，也就是必须同时满足两种关系的标签才会被渲染
五、属性选择器
我们可以自己定义标签的属性，比如：<标签名 egon="haha"> 这里就自定义了egon属性，属性值是haha
我们可以通过自定义的属性来查找标签
》》》[属性名]｛｝ 可以查找到所有有对应属性名的标签
》》》[属性名=属性值]｛｝ 只能查找到有对应属性名和值的标签
》》》标签名[属性名=属性值]｛｝ 紧挨着代表且的关系，必须同时满足对应标签名和属性名和值对应的标签才能被找到
》》》标签名[属性名~=属性值]｛｝ 意思是只要和标签的某个属性的多个属性值的一个对应起来就可以被找到
》》》标签名[属性名*=指定值]｛｝ 意思是只要是标签的某个属性名的属性值的一部分就可以被找到，类似python中in的用法
》》》标签名[属性名^=指定值]｛｝ 意思是只要标签的某个属性名的属性值以指定的内容开头就可以被找到
》》》标签名[属性名$=指定值]｛｝ 意思是只要标签的某个属性名的属性值以指定的内容结尾就可以被找到
补充：标签的class或者是自定义属性可以有多个属性值，比如class="gaga rere"或者自定义属性egon="qwe qww"这样用空格隔开就是代表多个属性值，并不是空格也算属性值的一部分
六、选择器的优先级
从高到低：按照先后顺序比较
》》》！important 代表其余所有选择器的渲染全部放弃，只用当前设置的效果
》》》style属性，优先级是1000
》》》id属性，优先级是100
》》》class属性，优先级是10
》》》属性选择器的优先级比element高，比class低
》》》element（标签选择器）属性，优先级是1
》》》当几种属性混合的时候就比较和的大小，注意和的大小不能凌驾在上面的属性优先级之上，比如几个class的属性优先级之和大于id了，但是也会选择id选择器的渲染效果，一位id比class优先级高
》》》当相加的和一样是，谁最后加载就听谁的，也就是选择位置在最下面的
》》》继承
七、继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} <p>helloyuan</p>
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。
此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，就是无法继承所有的渲染效果，如：border, margin, padding, background等
div{
border:1px solid #222
}
<div>hello <p>yuan</p> </div>
浙公网安备 33010602011771号