前端——CSS的引入方式、选择器
前端——CSS的引入方式、选择器
什么是CSS？
层叠样式表（就是用来调节标签的样式）
CSS注释
/*单行注释*/
/*多行注释1
多行注释2
多行注释3
*/
注释的使用
css应该是一个独立的文件
/*页面通用样式*/
/*顶部导航栏样式*/
/*侧边菜单栏样式*/
……
css语法结构
选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;……}
css三种引入方式
-
外部css文件（最正规的书写方式）
/*mycss*/ /*这是一个非常牛逼的页面的css样式文件*/ /*公共样式*/ p { color: aquamarine; } /*外部引用css文件*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css"> </head> <body> <p>秦时明月汉时关</p> </body> </html> -
head内style标签内部直接书写css代码
/*head内style标签内部直接书写css代码*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: blue; } </style> </head> <body> <p>秦时明月汉时关</p> </body> </html> -
标签内部通过style属性直接书写对应的样式（不推荐）
/*标签内部通过style属性直接书写对应的样式*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="color: red">秦时明月汉时关</p> </body> </html>
css选择器
基本选择器
-
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { /*将页面中所有的div标签内的文本变成红色*/ color: red; } </style> </head> <body> <div class="c1">我是div我的class为c1 /*---> 变红色*/ <span>我是div内部的span</span> /*---> 变红色*/ </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> <div>我是div</div> /*---> 变红色*/ <span class="c1">我是span我的class为c1</span> <p>我是p</p> <span id="d2">我是span我的id为d2</span> </body> </html> -
类选择器：. 属性值 {css样式} 重点：一定记住是.号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器*/ .c1 { /*将页面中具有c1类属性值的标签内部文本全部变成蓝色*/ color: blue; } </style> </head> <body> <div class="c1">我是div我的class为c1 /*---> 变蓝色*/ <br> <span>我是div内部的span</span> /*---> 变蓝色*/ </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> /*---> 变蓝色*/ <div>我是div</div> <span class="c1">我是span我的class为c1</span> /*---> 变蓝色*/ <p>我是p</p> <span id="d2">我是span我的id为d2</span> </body> </html> -
id选择器：#id值{css样式} 重点：一定记住是#号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { /*将页面中id为d1的标签内所有文本变成黄色*/ color: yellow; } </style> </head> <body> <div class="c1">我是div我的class为c1 <br> <span>我是div内部的span</span> </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> /*---> 变黄色*/ <div>我是div</div> <span class="c1">我是span我的class为c1</span> <p>我是p</p> <span id="d2">我是span我的id为d2</span> </body> </html> -
通用选择器：{css样式} 重点：**** 号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*通用选择器*/ * { /*将当前页面内的所有标签内所有内容改为绿色*/ color: green; } </style> </head> <body> <div class="c1">我是div我的class为c1 /*---> 变绿色*/ <br> <span>我是div内部的span</span> /*---> 变绿色*/ </div> <p id="d1" class="c1">我是p我的id为d1我的class为c1</p> /*---> 变绿色*/ <div>我是div</div> /*---> 变绿色*/ <span class="c1">我是span我的class为c1</span> /*---> 变绿色*/ <p>我是p</p> /*---> 变绿色*/ <span id="d2">我是span我的id为d2</span> /*---> 绿色*/ </body> </html>
组合选择器(重点记住特殊符号)
-
后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*后代选择器*/ div span { /*空格表示div内部的 没有层级限制*/ color: red; } </style> </head> <body> <span>div上面的span</span> <br> <span>div上面的span</span> <div> <span>div内部第一个span</span> /*---> 变红色*/ <p>div内部的p <br> <span>div内部的p的span</span> /*---> 变红色*/ </p> <span>div内部最后一个span</span> /*---> 变红色*/ </div> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <div>弟弟舔她 <p>放开那个女孩，让我来！</p> </div> <span>我会把你活活sao死</span> </body> </html> -
儿子选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*儿子选择器*/ div > span { /*> 表示div内部的儿子 有层级限制*/ color: blue; } </style> </head> <body> <span>div上面的span</span> <br> <span>div上面的span</span> <div> <span>div内部第一个span</span> /*---> 变蓝色*/ <p>div内部的p <br> <span>div内部的p的span</span> </p> <span>div内部最后一个span</span> /*---> 变蓝色*/ </div> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <div>弟弟舔她 <p>放开那个女孩，让我来！</p> </div> <span>我会把你活活sao死</span> </body> </html> -
毗邻选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*毗邻选择器*/ div + span { color: green; } </style> </head> <body> <span>div上面的span</span> <br> <span>div上面的span</span> <div> <span>div内部第一个span</span> <p>div内部的p <br> <span>div内部的p的span</span> </p> <span>div内部最后一个span</span> </div> <span>div下面的span</span> /*---> 变绿色*/ <br> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <span>div下面的span</span> <br> <div>弟弟舔她 <p>放开那个女孩，让我来！</p> </div> <span>我会把你活活sao死</span> /*---> 变绿色*/ </body> </html> -
弟弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*弟弟选择器*/ div ~ span { /*同级别下的所有标签*/ color: yellow; } </style> </head> <body> <span>div上面的span</span> <br> <span>div上面的span</span> <div> <span>div内部第一个span</span> <p>div内部的p <br> <span>div内部的p的span</span> </p> <span>div内部最后一个span</span> </div> <span>div下面的span</span> /*---> 变黄色*/ <br> <span>div下面的span</span> /*---> 变黄色*/ <br> <span>div下面的span</span> /*---> 变黄色*/ <br> <span>div下面的span</span> /*---> 变黄色*/ <br> <div>弟弟舔她 <p>放开那个女孩，让我来！</p> </div> <span>我会把你活活sao死</span> /*---> 变黄色*/ </body> </html>
属性选择器（根据属性或属性值来选择标签）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*属性选择器*/
[username] { /*找到页面上所有具有username属性名的标签*/
color: green;
}
[username='kang'] { /*找到页面上所有具有username属性名并且属性值为kang的标签*/
color: red;
}
input[username='a'] { /*找到页面上所有具有username属性名并且属性值为kang的input标签*/
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" username="a">
<input type="text" username="b">
<input type="text" username="c">
<p username="kang">秦时明月汉时关，万里长征人未还</p>
<div username="zhao">秦时明月汉时关，万里长征人未还</div>
<span username="li">秦时明月汉时关，万里长征人未还</span>
</body>
</html>
分组与嵌套
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分组与嵌套</title>
<style>
/*div, span, p {*/
/*color: blue;*/
/*}*/
/*.c1, #d1, p {*/
/*color: red;*/
/*}*/
.c1 h2 { /*找具有c1属性值标签的后代h2*/
color: aquamarine;
}
</style>
</head>
<body>
<div class="c1">找工作，拿高薪，牛皮~~
<h2>我是h标签</h2>
</div>
<span id="d1">找工作，拿高薪，牛皮~~</span>
<p>你好骚啊~~</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
a:link { /*未点击过为红色*/
color: red;
}
a:hover { /*鼠标悬浮在上面是绿色*/
color: green;
}
a:active { /*点击过后为黄色*/
color: yellow;
}
input:focus { /*聚焦时 背景为粉色*/
background-color: deeppink;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://lcxy.sougou.com/">搜狗</a>
<a href="https://www.LOL.com">撸啊撸</a>
<input type="text">
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
div:before { /*在div标签内容前添加*/
content: '瞬间爆炸';
color: red;
}
div:after { /*在div标签内容后添加*/
content: '啊啊啊我死了！';
color: yellow;
}
</style>
</head>
<body>
<div>奥术大师大所大大所大所大所大</div>
</body>
</html>
选择器优先级问题
选择器相同
就近原则
选择器不同
行内 > id选择器 > 类选择器 > 元素选择器
