Distal --CSS manner of introduction, the selector
What is CSS?
Cascading Style Sheets (adjustment pattern is used to label)
CSS comments
/*单行注释*/
/*多行注释1
多行注释2
多行注释3
*/Use annotations
css should be a separate file
/*页面通用样式*/
/*顶部导航栏样式*/
/*侧边菜单栏样式*/
……css syntax structure
选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;……}css introduced three kinds of ways
External css files (the most formal writing style)
/*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>The direct write head style internal label css code
/*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>Internal label written directly by a corresponding style style attributes (not recommended)
/*标签内部通过style属性直接书写对应的样式*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="color: red">秦时明月汉时关</p> </body> </html>
css selector
The basic selector
Tag selector
<!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>Class Selector: Property Value} {css style Key: must remember that it is . No.
<!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 selector: #id value} {css styles focus: Always remember that it is the #
<!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>Universal selector: {} CSS style Key: **** No.
<!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>
Combined selector (important to remember special symbols)
Descendant selectors
<!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>Son selector
<!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>Nearby selector
<!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>Brother selector
<!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>
Attribute selector (based on the attribute or attribute value to select tag)
<!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>Packet nested
<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>Pseudo class selector
<!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>Pseudo-element selector
<!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>