当前位置：首页 > news >正文

【web前端】CSS样式

news 2025/7/12 16:11:44

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>