核心提示：HTML基础学习-12-CSS class id 控件样式定义!DOCTYPE htmlhtml!--p{标记选择器}//class形式样式，可以重复使用.p{}//p class=p样式表段落/pc...
HTML基础学习-12-CSS class id 控件样式定义
<!DOCTYPE html>
<html>
<!--
p{
标记选择器
}
//class形式样式，可以重复使用
.p{
}
//<p class="p">样式表段落</p>
class 形式定义 以 .p{属性:属性值;属性1:属性值1;}
.p p{属性:属性值;}多层次属性定义
id选择器是唯一选择器，即不允许有相同id
id 形式定义 以 #开始
#p{属性:属性值}
#p p{属性:属性值;}
优先级style定义样式问题
id > class > html 对于同一个控件同时有三种定义的时候按照优先级最高为准
-->
<head>
<title>html5样式定义</title>
<meta charset="utf-8">
<style type="text/css"
>
/*p{
color:red;
font-size:28px;
}*/
/*class 样式定义*/
.p{
color:green;
font-size:28px;
}
/*单独控制在class属性为p下的子类的p的样式*/
.pp p{
color:red;
}
/*id样式定义*/
#ppp{
color:blue;
}
/*html样式定义*/
.p{color:red}
/*组合选择器 多个控件样式定义*/
h1,h2,h3,h4,p{
color:red;
}
/*伪类选择器 定义超链接*/
<!--
定义标签 a
link 正常链接的 颜色
hover 已经鼠标放上去 访问时候的连接颜色
active 鼠标按下去的时候
visited 访问过的颜色
-->
a:link{color:blue}
a.hover{hover:green}
a.active{color:red}
a.visited{color:yellow}
</style>
</head>
<body>
<p class="p">样式表段落</p>
<p class="pp">
<p class="p">样式段落2</p>
</p>
<p id="ppp">
<p>id选择器定义</p>
</p>
<p id="ppp" class="p">
<p>优先级测试</p>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
</p>
<a href="https://www.baidu.com">百度</a>
</body>
</html>
