CSS是一種用來定義HTML頁面外觀的樣式表語言。與HTML結構相比,CSS只關注表現層面的布局、顏色和字體等。為了使CSS樣式與HTML對應,需要使用選擇器來選擇HTML元素。
/* 例如,選擇所有p標簽 */ p { color: red; font-size: 16px; }
選擇器有多種類型,其中最基本的是元素選擇器,可以直接選擇HTML標簽,如上述例子中的p標簽。CSS還支持class選擇器、ID選擇器、屬性選擇器等多種類型,具體可參考相關文檔。
/* 例如,選擇class為"header"的div標簽 */ div.header { background-color: #ddd; height: 200px; } /* 例如,選擇ID為"logo"的img標簽 */ img#logo { width: 100px; height: 100px; }
除了選擇器外,CSS還包含了眾多樣式屬性用來調整HTML元素的顯示效果。一些常用的樣式屬性如下:
/* 改變字體大小 */ font-size: 18px; /* 改變字體顏色 */ color: #333; /* 改變背景顏色 */ background-color: #f5f5f5; /* 改變文本對齊方式 */ text-align: center; /* 居中元素 */ margin: 0 auto;
需要注意的是,CSS樣式會遵循特定的優先級規則。如果多個選擇器同時作用于同一個元素,樣式會按優先級別順序進行處理,具體優先級順序可查閱相關資料。
最后,將CSS樣式表與HTML頁面關聯起來需要在HTML頭部使用link標簽引入外部樣式表文件,或者在HTML文件頭部使用style標簽內部定義。
/* 引入外部CSS樣式表 */ <link rel="stylesheet" href="style.css"> /* 在HTML頭部定義樣式 */ <style> /* CSS樣式定義 */ </style>