今天学习了样式方面的知识，于是写一下自己的心得，和大家分享一下~ ~
文档样式：
<!--文档样式比较常用，修改起来也方便，所以就详细讲一下文档样式的相关知识.-->
- 以<style></style>出现在文档<head>内。
如：
<style type="text/css">
规则表
</style>
- 每一条规则分两部分：选择器、一组属性与值。
如：selector {属性1:值1; 属性2:值2; ...;}
- 标签选择器
顾名思义，就是可以通过标签来设计其样式，也就是作用于整个文档的制定标签。适用于设计同一标签且样式一样的。<head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> h1{ color:red; font-size:36px; } h2,p{/*并集标签，用逗号“,”隔开*/ color:blue; } </style> </head> <body> <h1>样式设计</h1> <h2>标签选择器</h2> <p>一起学习样式</p> </body>效果图：
2.类选择器
1） 作用于多种不同的标签，适合用于设计不同标签但样式相同的标签。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.name{color:blue;}
</style>
</head>
<body>
<h1 class="name">样式设计</h1>
<h1>标签选择器</h1>
<p class="name">一起学习样式</p>
</body>
效果图：
2）类选择器也可以作用于同一标签的不同实例。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
h1.name{color:blue;}
h1.else{color:red;}
</style>
</head>
<body>
<h1 class="name">样式设计</h1>
<h1 class="else">类选择器</h1>
</body>
效果图：
3.id选择器
只能做用于文档中唯一的一个标签实例。（id在同一个页面也可以用好几次）
4.通配选择器
适用于文档中的所有标签，可以定义所有标签的样式。适用于全局配置。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{color:blue;}
h1.else{color:red;}
</style>
</head>
<body>
<h1>样式设计</h1>
<h1 class="else">类选择器</h1>
<p>配置选择器</p>
<p>标签选择器</p>
</body>
效果图：
（从效果图可以看出，在配置选择器的作用下，类选择器优先级更高。）
5.上下文选择器
限定于文档上某些特定位置上的元素，一共有两种写法：
1）写法一：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
form em {font-size:14pt; color:red;}
</style>
</head>
<body>
<form action="">
<p><em>样式作用的文字</em>其他文字</p>
</form>
<p><em>其他文字</em></p>
</body>
</html>
效果图：
2）写法二：
<head>
<style type="text/css">
#normal {font-size:20;}
#normal p {color:red; }
#normal h3 {color:blue; }
</style>
</head>
<body>
<div id="normal">
<h3>应用id继承</h3>
<p>应用id继承</p>
</div>
<h3>没有应用id继承</h3>
<p>没有应用id继承</p>
</body>
效果图：
