分类
-
- 内联
<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写在样式后边,可打破优先级