在HTML中插入CSS修饰的三种方法
这是刚入坑的小萌新用作总结用的文章,可能会有错的地方,希望大家指出。
- 第一种方式:内联插入
<div style="width: 300px; height: 300px;background-color: aqua;display: block;
border-color: red ; border-width: 1px; border-style: solid;"></div>
- 第二种方式:在style标签内定义样式,使用选择器选择需要做修饰的标签。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二种方式</title>
<style type="text/css">
#usernameErrorMsg{
/*
id选择器
*/
font-size: 20px;
color: red;
}
div{
width: 300px;
height: 300px;
background-color: aquamarine;
border: red 1px solid;
}
.myclass{
/*类选择器*/
border: black 1px solid;
}
</style>
</head>
<body>
<span id="usernameErrorMsg">对不起,用户名不能为空!</span>
<div></div>
<div></div>
<br><br><br><br>
<input type="text" class="myclass"/>
<br><br><br><br>
<select class="myclass">
<option>本科</option>
<option>专科</option>
</select>
</body>
</html>
- 第三种方式:定义一个.css文件,将css文件导入,导入方法如下
<head>
<meta charset="UTF-8">
<title>第三种方式</title>
<link rel="stylesheet" type="text/css" href="css-dom/1.css">
</head>