目录
css三种引入方式
1、行间样式:权重最高1000,在标签的style属性中写css样式。
2、内部引入方式:在head中写style标签,然后在style标签中写css样式。
3、外部引入方式:使用link引入外部css文件,css样式写在css文件中。
注意:外部和内部引入方式没有权重高低之分 文档后面的会覆盖文档前面的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css三种引入方式</title> <!-- 外部引入方式 --> <link rel="stylesheet" href="yr.html"> <!-- 内部引入方式 --> <style> div{ width: 100px; } </style> </head> <body> <!-- 行间样式 --> <div style="width: 100px"> </div> </body> </html>
选择器
标签选择器:
权重为1。
语法:标签名{css样式}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 */ div{ width: 100px; height: 100px; background-color: aqua; } </style> </head> <body> <div class="div1"> <p> <span>CSDN1</span> </p> <span>CSDN2</span> </div> <div id="words" style="margin-top: 20px"></div> </body> </html>
class选择器:
1、 特点:一个标签可以有多个class名。多个标签可以有相同的class名。
2、 权重为10。
语法:.class名{css样式}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 */ div{ width: 100px; height: 100px; background-color: aqua; } /* class选择器 */ .div1{ width: 120px; height: 200px; background-color: aquamarine; } </style> </head> <body> <div class="div1"> <p> <span>CSDN1</span> </p> <span>CSDN2</span> </div> <div id="words" style="margin-top: 20px"></div> </body> </html>
id选择器:
1、 特点:id名是唯一的,一个标签只能有一个id。不同标签id名不能相同。
2、权重为100。
语法:#+id名{css样式}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 */ div{ width: 100px; height: 100px; background-color: aqua; } /* class选择器 */ .div1{ width: 120px; height: 200px; background-color: aquamarine; } /* id选择器 */ #words{ width: 140px; height: 140px; background-color: gold; } </style> </head> <body> <div class="div1"> <p> <span>CSDN1</span> </p> <span>CSDN2</span> </div> <div id="words" style="margin-top: 20px"></div> </body> </html>
后代选择器:
权重为几个选择器权重相加。
语法:父选择器 子选择器{css样式}
孙代span和子代span都属于div1后代
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 */ div{ width: 100px; height: 100px; background-color: aqua; } /* 后代选择器 */ .div1 span{ color: red; } </style> </head> <body> <div class="div1"> <p> <span>CSDN1</span> </p> <span>CSDN2</span> </div> <div id="words" style="margin-top: 20px"></div> </body> </html>
子代选择器:
权重为几个选择器权重相加。
语法:父代选择器>子代选择器{css样式}
只选中子代span
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 */ div{ width: 100px; height: 100px; background-color: aqua; } /* 子代选择器 */ .div1>span{ color:red; } </style> </head> <body> <div class="div1"> <p> <span>CSDN1</span> </p> <span>CSDN2</span> </div> <div id="words" style="margin-top: 20px"></div> </body> </html>
组合选择器:
权重为每个选择器单独计算。
语法:选择器1,选择器2......{css样式}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器</title> <style> /* 标签选择器 */ div{ width: 100px; height: 100px; background-color: aqua; } /* 组合选择器 */ .div1,#words{ width: 200px; height: 200px; background-color: cadetblue; } </style> </head> <body> <div class="div1"> <p> <span>CSDN1</span> </p> <span>CSDN2</span> </div> <div id="words" style="margin-top: 20px"></div> </body> </html>
通配符选择器:
权重最小
语法:*{css样式}