【web前端】CSS样式
CSS应用方式
在标签
<h2 style="color: aquamarine">hello world!</h2>
在head标签中写style标签
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 100px;}.c2{height: 200px;color: aqua;}</style> </head> <body><h1 class="c1">用户列表</h1><h1 class="c2">用户列表</h1></body>
写到文件
- 文件：
.c1{height: 100px;
}
.c2{height: 200px;color: aqua;
}
- html:
<html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="com.css"></head> <body><h1 class="c1">用户列表</h1><h1 class="c2">用户列表</h1>
选择器
类选择器
.c1{color: pink; }<h1 class="c1">乒乓球</h1>
ID选择器
#c2{height: 100px; }<h2 ID="c2">羽毛球</h2>
标签选择器
li{color: aquamarine; }<ul><li>篮球</li><li>排球球</li> </ul>
属性选择器
input[type='text']{border: 1px;color: chocolate; }<input type="text"> <input type="password">
后代选择器
.yy li{color: blue; }<div class="yy"><ul><li>中国</li><li>美食</li></ul> </div>
多个样式和覆盖
覆盖顺序是按照style中的顺序来的， <div class="c2 c1">中国移动</div>和 <div class="c1 c2">中国移动</div>是一样的效果
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: blue;border: 1px solid red;}.c2{font-size: 20px;color: aqua;}</style> </head> <body><div class="c1 c2">中国移动</div> </body>
