标签：今天 使用方法 开头 href info 标签 font before 四种
css，暂时把他比作给html加各种花里胡哨东西的插件。
那么如果你要使用css给您的html增加一些东西，你必须得先导入他，怎么操作呢？
一、css引入方式，以下四种方法：
1.直接就在你的原有标签中增加style属性，用键值对去描述他。
<p style="color:font-weight:bold;">">引入方式1</p>
2.head标签里面增加<style>标签
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color:red} </style> </head> <body> <p>引入方式2</p> </body> </html>
3.放入文件内，使用link这种半标签进行导入（链接式引入）
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
这里的rel参数非常重要，必须书写，不然系统是不知道你导入的文件是一个css文件的
4.通过加载文件，只是加载方式不同（导入式引入）
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径</style>
引入方式3（链接式引入）和引入方式4（导入式引入的区别）
1.使用方法3，对导入文件数量没有限制，但是导入式只能导入一个
2.加载方式不同，使用导入式引入，浏览器会预先加在html部分在进行css部分的渲染，如果网络出现延迟会出现没有渲染效果的html，但是链接式引入使用的是预先完成css部分的效果加载之后，再同步进行输出，只要能看到，就是完整的。
综合这些因素，后期使用比较多的就是链接式引入方式
二、css的选择器
成功导入了css部分之后，面临的下一个问题就是，如何找到我们要进行渲染的部分，我把伪类放到了一个单独的部分，姑且就说是三种吧
找到了之后就可以在中括号里面进行自由的编辑了。
1.基础选择器。
＊ ： 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
E ： 标签选择器，匹配所有使用E标签的元素 p { color:green; }
.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
这里应该注意class就是一个我们给取得名字，不是Python中出现的类
#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
#开头就表示要找id，id又是唯一的，当然能够找到
2.组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔，
可以是两个，当然也可以是很多个，然后选择的方式很多，可以使用.class和#id的方式，混搭也是没有问题的
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
这个主要用在发生嵌套的部分，如果嵌套了很多层，他会一直找下去，各一两层都是没问题的
E > F 子元素选择器，匹配所有E元素的子元素F
和上面的空格进行一个区分吧，上面是不管隔了多少层都会向下找，但是这个只会找挨着的那一层，基本就是只找儿子，有点像西周的分封制，我只对自己的主子负责，我的奴隶不是我主子的奴隶
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
用的比较少，主要是用在确定相邻关系的时候才会用，这样以后可以直接写，相邻就发生，不相邻就不触发，还是蛮好的
重在练习，看下演示吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1>p{ background-color: aqua; color: deeppink; } .main2>div{ background-color: blueviolet; color: chartreuse; } </style> </head> <body> <div class="div1">hello1 <div class="div2">hello2 <div>hello4</div> <p>hello5</p> </div> <p>hello3</p> </div> <p>hello6</p> <hr> <div class="main2">1 <div>2 <div> </div> </div> <div> </div> </div> </body> </html>
注意嵌套规则：
a.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
b.有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
c.div内可以包含div
d.块级元素与块级元素并列、内联元素与内联元素并列。
3.属性选择器
属性这个东西，可以是固定的系统里面有的，也可以是你自己编的
需要注意属性的一个问题style = “sb dsb”表示的是style的属性可能是sb或是dsb，而不是“sb dsb”
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
三、伪类
典型的一个案例就是，一个超链接，你悬浮在上面一个样子，正常时候一个样子，点完之后一个样子
<style type="text/css"> a:link{ color: red; 正常时候的颜色 } a:visited { color: blue; 访问之后的颜色 } a:hover { color: green; 悬停时候的颜色 } a:active { color: yellow; 触发时候的颜色 } </style> </head> <body> <a href="01-hello-world.html">hello-world</a> </body> </html>
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
还有一个before after的伪类不是很明白，不知道到底怎么用
暂时先不总结到这里。
昨天的空白总算补上了，今天不是很开心，觉得自己太大度了，该小气的时候还是要小心眼一点啊。
标签：今天 使用方法 开头 href info 标签 font before 四种
原文地址：https://www.cnblogs.com/xiaoyaotx/p/12776360.html
