web前端学习笔记——Day3(css)
css：层叠样式表，用来控制网页数据的表现，可以使用网页的表现与数据内容分离
一、css的四种引入方式
1、行内式
行内式是在标记的style属性中设定css样式。
"background-color:rebeccapurple">hello
2、嵌入式
嵌入式是将css样式集中写在网页的head标签对的style标签对中。格式如下：
Title
hello world
"">来点我啊
3、连接式 常用
将一个css文件引入到HTML文件中，没有个数限制格式：
<link href="css文件名" rel="stylesheet" type="text/css"/>
4、导入式
将一个独立的css文件引入HTML文件中，导入式使用css规则引入外部css文件，style标记也是写在head标签中，有个数限制。格式如下：
<style>
@import"css文件名";//注意css文件路径
style>
二、css的选择器
”选择器“指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的那些元素。
1、基础选择器
*： 通过元素选择器，匹配任和元素 *{margin:0;padding:0}
E(标签名): 标签选择器，匹配所有使用E标签的元素 p{color:green;}
#id名
.class名
.info和E.info:class选择器，匹配所有class属性中包含info的元素 .info{background:#ffo;} p.info{background:blue;}
eg:举例：
<html>
<head>
<title>css四种引入方式title>
<style type="text/css">
*{
background-color: red;
}
div{
color: yellow;
}
#a{
background-color: green;
}
.c{
color: blue;
}
style>
head>
<body>
hello world
<div>hello divdiv>
<p id="a">wwwwp>
<p id="b">zzzzp>
<p class="c">qqqqp>
<p class="c">ddddp>
body>
html>
2、组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，F和E之间用逗号分隔 eg：div，p{color：#f00;}
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 eg：li a{font-weigh:bold;}
E>F 子元素选择器，匹配所有E元素的子元素F eg: div > p {color:#f00;}
E+F 呲邻元素选择器，匹配所有紧随E元素之后的同级元素 eg：div + p {color:#f00;}
注意嵌套规则：
1、块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1，h2，h3，h4，h5，h6，p，dt
3、li内可以包含div
4、块级元素与块级元素并列，内联元素与内联元素并列。
举例：
<html>
<head>
<title>css组合选择器title>
<style type="text/css">
#b,div.c{color: red;}
.div1 div{background-color: yellow;}
.div1 .div2{background-color: red;}
.div1 .d{color: green;}
div>a{background-color: blue;}
.div1>div+.div2{color: green;}
/*//必须紧挨着*/
style>
head>
<body>
hello world
<div>hello divdiv>
<p id="a">wwwwp>
<p id="b">zzzzp>
<p class="c">qqqqp>
<p class="c">ddddp>
<div class="c">eeeediv>
<div class="div1">
<div>
<a href="">gggga>
<p class="d">hhhhp>
<div>div3div>
div>
<div class="div2">div2div>
div>
body>
html>
3、属性选择器
E[属性] 匹配所有具有该属性的E元素，不考虑它的。（注意：E在此处可以省略。比如"[cheacked]"。）
E[att="value"] 匹配所有att属性等于value的E元素。
div[class="a"]{color:red;}
E[att~="value"] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"value"的E元素。 td[class="name"]{color:red;}
E[att^="value"] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:red;}
E[att$="value"] 匹配属性值以指定值结尾的每个元素
div[class$="test"]{color:red;}
E[att*="value"] 匹配属性值中包含指定值的每个元素
div[class*="test"]{color:blue;}
<html>
<head>
<title>属性选择器title>
<style type="text/css">
[name]{color: red;}
[alex="aa"]{font-size: 30px;}
p[alex="aa"]{background-color: green;}
[alex~=qq]{background-color: pink;}
[name^=w]{color: green;}
[name$=d]{background-color: blue;}
[name*=q]{background-color: red;}
style>
head>
<body>
<div name="q">hellodiv>
<div name="ased">hello 1div>
<div alex="sb qq">hello 2div>
<div alex="aa">hello 3div>
<p alex="aa">hello 4p>
<p name="ww qq">helow 4p>
body>
html>
三、css的伪类
css的伪类是用来给选择器添加一些特殊效果。
anchor伪类
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代码；}
eg：举例
<html>
<head>
<title>css的伪类title>
<style type="text/css">
a:link{color: red;}
a:visited{color: green;}
a:hover{color: blue;}
a:active{color: yellow;}
style>
head>
<body>
<a href="1.html">hello-woelda>
body>
html>
hover伪类（悬浮）
eg：举例：
<html>
<head>
<title>css的伪类title>
<style type="text/css">
.top{width: 100px;height: 100px;background-color: red;}
.wzq{width: 100px;height: 100px;background-color: yellow;}
.top:hover{background-color: yellow;}
.wzq:hover{background-color: green;}
style>
head>
<body>
<div class="box">
<div class="top">div>
<div class="wzq">div>
div>
body>
html>
before after 伪类
:before p:before 在每个元素之前插入内容
eg：p:before{content:"hello";color:red;}
:after p:after 在每个
元素之后插入内容
eg：p:after{content:'blue';color:blue;}
eg：举例
<html>
<head>
<title>css的伪类title>
<style type="text/css">
.add:before{
content: "某某";
}
.add:after{
content: "欢迎你";
}
style>
head>
<body>
<div class="add">hello 乒乓div>
body>
html>
四、选择器优先级和继承
css优先级：所谓css优先级，即是指css样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1、内联样式表的权值最高
2、统计选择符中的ID属性个数
3、统计选择符中的class属性个数
4、统计选择符中的HTML标签名个数
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较舍取时按照从左向右的顺序逐位比较。
注意：当不知道优先级谁高，可以加 !important，强制显示加了它的类型。
有!important声明的规则高于一切；如果!important声明冲突，则比较优先级；如果优先级一样，则按照在源码中出现的顺序决定，后来者居上；由继承而得到的样式没有specificity的计算，他低于一切其它规则（比如全局选择符定义的规则）。*
eg：举例：
<html>
<head>
<title>css选择器的优先级title>
<style type="text/css">
#id1{color: green;}*/
/*2、id*/
div{color: blue;}
/*4、名称*/
.div1{color: red;}
/*3、class*/
style>
head>
<body>
<div class="div1" id="id1" style="color: yellow;">优先级div>
body>
html>
eg2：举例：
<html>
<head>
<title>css优先级2title>
<style type="text/css">
.div3{color: red!important;}
/*优先级3*/
#div1 .div3{color: green;}
/*优先级2*/
#div1 .div2 div{color: yellow;}
/*优先级1*/
style>
head>
<body>
<div id="div1">
<div class="div2">
<div class="div3">
嵌套优先级
div>
div>
div>
body>
html>
css的继承性：
继承是css的一个主要特征，它依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。列如一个body定义了颜色值也会应用到段落的文本中。
hello yuanbody{color：red}
这段文字都继承了body{color：red}样式定义的颜色。然而css继承性的权重是非常低的，是比普通元素的权重还要低的0.
p{color：green；}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见，任何显示申明的规则都可以覆盖掉其继承样式。
此外，继承是css重要的一部分，我们甚至不用去考虑它为什么能够这样，但css继承也是有限制的。有一些属性不能被继承。如：border、margin、padding、background等。