8. HTML——定义CSS样式(CSS选择器)
2020-08-15 本文已影响0人
TheRightPath1
1.几种样式定义:
9.定义CSS样式.png
9.定义CSS样式.png
2.几种样式说明:
(1)HTML标记定义:
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器定义方式</title>
<style type="text/css">
body{
background-color: green;
}
h1{
color: white;
background-color: gray;
font-size: 30px;
}
p{
color: red;
background-color: yellow;
font-size: 50px;
}
</style>
</head>
<body>
<h1 style="color: white">HTML标记定义</h1>
<p>HTML标记定义</p>
</body>
</html>
(2)class定义:类定义的方式为 .类名{属性:属性值; 属性:属性值...}
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器定义方式</title>
<style type="text/css">
/*此处会将div标签下的p标签中的内容一起修改为相同的样式*/
.p{ background-color: red; font-size: 40px}
/*当对父标记的类定义属性后要想对下面的子标记单独定义,需要使用.类名 标记名{属性名:属性值}*/
.p p{background-color: gray; font-size: 60px; color: green}
</style>
</head>
<body>
<div class="p">HTML标记定义
<p>HTML标记定义</p>
</div>
</body>
</html>
(3)id定义:id定义的方式为 #id{属性:属性值; 属性:属性值...}
(4)优先级问题: 以上三种定义方式的属性优先级为id> class> HTML,当同级的选择器对同一个内容操作时会执行离元素最近的属性
(5)组合选择器
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器定义方式</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, .p, #pp{font-size: 50px; color: red}
</style>
</head>
<body>
<h1>组合选择器</h1>
<h2>组合选择器</h2>
<h3>组合选择器</h3>
<h4>组合选择器</h4>
<h5>组合选择器</h5>
<h6>组合选择器</h6>
<div class="p">组合选择器</div>
<p id="pp">组合选择器</p>
</body>
</html>
