今天學習了樣式方面的知識，於是寫一下自己的心得，和大家分享一下~ ~
文檔樣式：
<!--文檔樣式比較常用，修改起來也方便，所以就詳細講一下文檔樣式的相關知識.-->
- 以<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>
效果圖：
