1、css的三种引入方式:
1.1、行内引入
<div style="color:red;">魔降风云变</div>
<html> <head> <Meta charset="UTF-8"></head> <body> <div style="color:red;">魔降风云变</div> </body> </html>
用的是行内的
<html> <head> <Meta charset="UTF-8"></head> <style> #Box{ color:gold; } </style> <body> <div id="Box" style="color:red;">魔降风云变</div> </body> </html>
没有找到它的样式
1.2内嵌式:
head中写 <style> #Box{ background-color: gold; } </style>
<head> <Meta charset="UTF-8"></head> <style> #Box{ background-color: gold; } </style> <body> <div id="Box" style="color:red;">魔降风云变</div> </body>
换了就有了,不能覆盖,优先级没它高
1.3外接式:
外接式是定义在head标签中,并且不在style中。
<link href="css/index.css" rel="stylesheet" >
index.css文件
#Box{ background-color: black; }
<html> <head> <Meta charset="UTF-8"></head> <style> #Box{ background-color: gold; } </style> <link rel="stylesheet" href="css/index.css"> <body> <div id="Box" style="color:red;">魔降风云变</div> </body> </html>
1.4、三种样式的优先级
行内样式>内嵌式和外接式
内嵌式和外接要看谁在后面,在后面的优先级高,会覆盖前面的。
2、基础选择器
2.1、id选择器
唯一的
#xxx
id选择器就是在标签里面加个id,可以和class同名 #id名字{css}
<html> <head> <Meta charset="UTF-8"></head> <style> .Box{ width: 200px; height: 200px; background-color: yellow; } .active{ border-radius: 4px; } #Box{ color:blue; } </style> <body> <div class="Box active" id="Box">小马过河</div> <hr> <div class="Box"></div> <hr> <div class="Box"></div> </body> </html>
2.2、类选择器
可以重复,归类,类也可以设置多个
.xxx
<html> <head> <Meta charset="UTF-8"></head> <style> .Box{ width: 200px; height: 200px; background-color: yellow; } .active{ border-radius: 200px; } </style> <body> <div class="Box active"></div> <div class="Box"></div> <hr> <div class="Box"></div> </body> </html>
border-radius边框圆角,似乎当边框圆角和正方形div的宽高一致的时候就会成圆形
.active{ border-radius: 40px; #将200改为40 }
2.3标签选择器
标签{css}
<html> <head> <Meta charset="UTF-8"></head> <style> .Box{ width: 200px; height: 200px; background-color: yellow; } .active{ border-radius: 4px; } #Box{ color:blue; } div{ border: 1px solid #000; } </style> <body> <div class="Box active" id="Box">小马过河</div> <hr> <div class="Box"></div> <hr> <div class="Box"></div> </body> </html>