-
引入CSS
-
页面级css
-
外部css文件（最实用的）
-
选择器：css如何选择HTML中的元素
我的前端学习笔记（四）CSS篇
注释：被注释掉的部分代码浏览器是识别不了的。
注释的功能：
1.用来写备注
<!--注释的内容--> 快捷键Ctrl+?可以直接注释2.可以用来调bug，用注释排除法判断哪行代码出错。
要清楚，web前端中html负责结构，css负责样式，javascript（js）负责行为CSS（cascading style sheet-层叠样式表）
<div style=""></div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调查</title> <!--<style type=”css”></style>--> <style> <!--填写css代码--> </style> </head> <body> <H2> 您的性别是 </H2> <div></div> </body> </html>````
<link rel=”stylesheet” type=”text/css” href=”填写css所在文件路径”>这样，刚才写的css文件就会被调用到这个网页。
网页写好了别人怎么看见呢，
我们写的css，js，html文件要放到服务器中，这个服务器有地址，方便别人找到，比如192.168.000.001(物理地址) 平常见的是www.baidu.com，这个叫域名，他俩的关系就是 www.baidu.com--dns---192.168.000.001 通过dns将域名解析到192.168.000.001。 浏览器通过访问对应文件下载在浏览器中，呈现在浏览器中。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调查</title> <link rel=”stylesheet” type=”text/css” href=”填写css所在文件路径”> </head> <body> <H2> 您的性别是 </H2> <div></div> </body> </html>
1.1 id选择器
在html元素头上加id=”这里是名字” 名字随意 例<div id=”name”>124</div>这时候这个元素就有了id
Css id选择器写法
#id值 这里是name，然后后面加｛｝，花括号中间加css代码#name｛ background-color: red; <!--css代码--> ｝Id选择器特点：一个元素只能有一个id值，一一对应。 说白了id就像人的身份证，一个人只能有一张。
1.2class选择器
<div class=”name1”></div>在元素中添加class，添加一个名 Class选择器Css写法 .class名
.name1{
<!--css代码-->
}
Class和元素是多对多的关系，一个元素可以有好几个class，一个class可以被好几个元素使用。
一个元素加多个class只需在Cass名后面空格再写一个Class名
<div class="name1 name2"></div>
.name1{
<!--一个css代码-->
}
.name2{
<!--另一个css代码-->
}
这样这个div就能被两个css修饰了·
1.3标签选择器
Html中不用添加东西 标签选择器css写法 标签名｛｝ 例如div{
<!--css代码-->
}
这时，html中所有的的div都会被修饰
1.4通配符选择器
所有的标签都是这个css装饰类似全选（全局） 通配符选择器css写法*{
<!--css代码-->
}
选择器中id优先级高，然后是class，再就是标签，通配符
行间样式大于id选择器
1.5属性选择器
<div class="name1 name2"></div>其中class叫属性名 属性选择器就是通过属性来选择， Css写法 [属性名或属性名加值] { <!--css代码--> } 理解同上。
[class或class=”name”] {
<!--css代码-->
}
Class选择器和属性选择器优先级相同
优先级总结
行间样式>id>class=属性>标签>通配符
在属性值后面加!important优先级最高
Css权重
!important infinity（）
行间样式 1000
Id 100
Class|属性|伪类 10
标签|伪类 1
通配符 0
其中的1000 100是256进制
