1,HTML标记定义
<p>...</p>
p{属性:属性值;属性1:属性值1}
p可以叫做选择器,定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加“;”
2,Class定义
<p class=“p”>...</p>
class 定义是以“.”开始
.p{属性:属性值;属性1:属性值1}
3,ID定义
<p id=“p”>...</p>
ID 定义是以“.”开始
#p{属性:属性值;属性1:属性值1}
4,优先级的问题:
a,ID>Class>HTML
b,同级时选择离元素最近的一个的,如:#p{color:red},#p{color:#f60},执行颜色为#f60的
5,组合选择器(同时控制多个元素)
h1,h2,h3,h4{color: red}
选择器组合可以使用“;”隔开
6,伪元素选择器
a:link 正常连接的样式
b:hover 鼠标放上去的样式
c:active 选择连接时的样式
d:visited 已经访问过的连接的样式
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义CSS样式</title>
<style type="text/css">
/*p{
font-size: small;
color: green;
}
.p{color: red;font-size: 28px}
.p p{color: green}*/
div{color: lavender}
.p{color: green}
#pp{color: red}
h1,h2,h3,h4{color: red}
a:link{color: red}
a:hover{color: green}
a:active{color: darkslategray}
a:visited{color: yellow}
</style>
</head>
<body style="background-color: lavender">
<h1>定义CSS样式</h1>
<h2>定义CSS样式</h2>
<h3>定义CSS样式</h3>
<h4>定义CSS样式</h4>
<div class="p" id="pp">
<p>定义CSS样式</p>
定义CSS样式定义CSS样式定义CSS样式
</div>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>