css2
css：
定义如何显示html 页面 个人感觉就是展示样式
作用方式： 先找到要渲染的目标 然后按照样式渲染，，，，
css 里面的注释 /* */ html注释 <!-- -->
html文件测试引入方式，猜测优先级
/* 测试html引入css文件 */ #d3{ color:blue; }
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css应用方式</title> <style> #d2{ color:yellow; } #d1{ color:yellow; } </style>
<link rel="stylesheet" href="yiyi.css" type="text/css">
</head>
<body>
<div id="d1" style="color:red">我是一个div</div>
<div id="d2">我还是一个div</div>
<div id="d3">不得不说我还是div</div>
<!--css 作用的优先级可以内比 作用域，局部大于全局-->
</body>
</html
推荐使用外部样式（外部引入文件） 方便管理，代码整洁
元素 id 类 类 常用选择器 ：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css选择器</title> <link rel="stylesheet" href="zz.css" type="text/css"> </head> <body> <div id="d1">11</div> <div id="d2" class="c1 c2 c3">22</div> <!--class里面有多个值时用空格分开，不要用纯数字开头--> <div id="d3">33</div> <p id="p1">111</p> <p id="p2" class="c1">12</p> <p id="p3">123</p> </body> </html>
p{ color:blue; }id div{ color:yellow; } /*元素选择器*/ #d1{ color:black } /* id 选择器*/ .c2{ color:pink } /* 类选择器*/
*{color:blue}
/*body里面所有的标签*/
组合选择器：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /* 后代选择器*/ div span{ color:yellow; } /* #d1 span{ color:blue; }*/ /*儿子选择器*/ /* #d1>span{color:yellow} #d2>span{color:blue} */ /*毗邻选择器*/ /*p+span{color:blue}*/ /*找的是p后面的span标签*/ /*弟弟选择器 p标签下面的所有同级的标签*/ /*p~span{color:yellow}*/ /*属性选择器*/ /* div[ss]{color:blue} p[ss]{color:blue} input[type="text"]{border: 1px solid yellow}*/ /*p+span, p>span {color:blue} */ </style> </head> <body> <div id="d1"> <span>我是d1 div下面的子</span> <div id="d2"> <p> <span>span1</span> </p> <span>span2</span> <span>span3</span> </div> </div> <span>外面的span p上</span> <p>外米的p</p> <span>外面的span</span> <span>外面的span</span> <span>外面的span</span> <div ss="suisiyousheng">属性选择器</div> <p ss="sususu">属性选择器</p> <hr> <input type="text"> <input type="password"> </body> </html>
伪类选择器：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> a:link{color:red;} a:visited{color:yellow} #d1:hover {color:yellow} /*鼠标移上去的时候改变颜色*/ #zz:active {color:red} /*选定的事件改变颜色*/ input:focus{ outline:none; border: 1px solid deeppink; } /*输入框获取焦点的样式*/ p:first-letter {color:yellow} p:before{ content:"*"; colot:red } p:after{ content:"[]"; colot:blue } /*在开始或者结束时间导入* 或者[] fseaa*/ </style> </head> <body> <a id="zz" href="https://www.baidu.com">baidu</a> <a href="https://www.qq.com">qq</a> <div id="d1">div</div> <input type="text" id="in"> <hr> <hr> <p>去一个望京西然后安徽打电话</p> <p>去一个望京西然后安徽打电话</p> <p>去一个望京西然后安徽打电话</p> <p>去一个望京西然后安徽打电话</p> <p>去一个望京西然后安徽打电话</p> <p>去一个望京西然后安徽打电话</p> </body> </html>
选择器的优先级
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <link rel="stylesheet" href="zz.css" type="text/css"> <!--<style>--> <!--.c1{color:yellow}--> <!--</style>--> <!--<!–选择器相同，下面的会覆盖上面的，依次向下执行–>--> <!--选择器不同，内联 1000 id 100 类 10 元素 1--> <style> div.c1{color:red} .c1{color:yellow} </style> <!--变成红色，10+1--> <!--!important 强制生效--> </head> <body> <div class="c1">div</div> <div>div1</div> </body> </html>
