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>
