# CSS簡述 ###### tags: `JavaWeb CSS` ```htmlembedded= <html> <head> <meta charset="utf-8"> <--!內部樣式表--> <style type="text/css"> /*被style範圍包圍的是CSS環境，可以寫CSS代碼*/ /*標籤樣式表*/ p{ color: red; } /*類樣式*/ .f20{ font-size: 20px; } </style> <!--引用外部樣式表--> <link rel="stylesheet" href="demo01.css"> </head> <body> <!-- <p><font color="red">這是段落一</font></p>--> <!-- <p><font color="red">這是段落二</font></p>--> <p>這是段落一</p> <p>這是段落二</p> <p class="f20">這是段落三</p> <p ID="p4">這是段落四</p><!--id屬性在整個HTML文檔中，盡量保持唯一(雖然重複也不會報錯)--> <p>這是段落五</p> <div> <p><span style="font-size: 60px;font-weight: bolder;color: yellow">HELLO</span></p> <span class="f32">WORLD</span> <p class="f32">!!</p> </div> </body> </html> <!-- 1.為什麼需要CSS 需要修改的段落太多，可以統一進行處理 2.CSS的最基本的分類：標籤樣式表、類樣式表、ID樣式表 3.CSS從位置上的分類：嵌入式樣式表、內部樣式表、外部樣式表 --> ``` ```css= /*ID樣式*/ #p4{ background-color: pink; font-size: 24px; font-weight: bolder; font-style: italic; font-family: "Adobe 繁黑體 Std B"; } /*組合樣式*/ div p{ color: blue; } div.f32{ font-size: 32px; font-family: "Adobe Arabic"; } ```