文章目录
三种css样式引入方式
id选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#css1{
background-color:red;
}
</style>
</head>
<body>
<span id = "css1">Hello World</span>
</body>
</html>
标签选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#css1{
background-color:red;
}
div{
background-color:pink;
}
</style>
</head>
<body>
<span id = "css1">Hello World</span>
<div>Hello World2</div>
<div>Hello World3</div>
<div>Hello World4</div>
</body>
</html>
类选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#css1{
background-color:red;
}
div{
background-color:pink;
}
.myclass{
background-color:green;
}
</style>
</head>
<body>
<span id = "css1">Hello World</span>
<div>Hello World2</div>
<div>Hello World3</div>
<div>Hello World4</div>
<span class = "myclass">Hello World5</span>
<div class = "myclass">Hello World6</div>
</body>
</html>
可以看出类选择器可以使得不同标签的样式相同。