分类
-
- 内联
<div style="color:red;">样式表测试</div>
直接写在标签里面，优点：控制精确 ，缺点：代码重用性差
- 内嵌
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{color:red;} </style> </head>
在<head>头标签内，优点：代码重用性高，缺点：不如内联精确
- 外部
<link href="file:///E|/PRACTICE/css.css" rel="stylesheet" type="text/css" />
在<head>头标签内引入.css文件，优点：代码重用性高，缺点：不如内联精确
- 内联
优先级：内联>内嵌、外部
- 选择器：在样式表内部使用，用于选取要控制的元素
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #div1{color:red;} .div2{color:green;} div{font-size:14px;} *{background-color:blue;} </style> </head> <body> <div id="div1">样式表测试</div> <div class="div2">样式表测试2</div> <div class="div2">样式表测试3</div> <div class="div2">样式表测试4</div> </body>
- "#" 用于选择id，id为唯一的不可重复，选取一个
- "."同于选择class，class可重复，选取多个
- 直接用标签名选择对应标签，可选取多个
- "*"用于选择多有元素
优先级：id>class>标签名>所有
- !important写在样式后边，可打破优先级