CSS嵌入式是指將CSS樣式規則直接嵌入到HTML文檔中的一種方式。簡單、方便、易于維護,是初學者入門CSS的好方法。本文將為大家介紹CSS嵌入式的寫法。
首先,將CSS樣式規則嵌入到HTML文檔的頭部,使用style標簽包裹。如下所示:
<style> p { color: red; font-size: 14px; } </style>上述代碼中,樣式規則定義了p標簽的字體顏色為紅色,字體大小為14像素。 接下來,我們來講講CSS嵌入式的語法。CSS樣式規則由選擇器和聲明塊組成。選擇器用來定位要樣式化的HTML元素,聲明塊用來定義CSS屬性和屬性值。在CSS嵌入式中,選擇器和聲明塊直接寫在style標簽內。 選擇器包括標簽選擇器、類選擇器和ID選擇器。標簽選擇器用HTML標簽名作為選擇器,如上述代碼中的p標簽。類選擇器用"."來作為選擇器,并為HTML元素定義class屬性,如下代碼所示:
<style> .red-text { color: red; } </style> <p class="red-text">這是一段紅色文本</p>上述代碼中,聲明一個名為red-text的類,文本的color被定義為紅色。然后,在文本的class屬性中添加了red-text,就可以應用這個類樣式。 ID選擇器用"#"來作為選擇器,并為HTML元素定義id屬性,如下代碼所示:
<style> #content { font-size: 16px; } </style> <div id="content">這是一個文本框</div>上述代碼中,聲明一個名為content的ID,設置文本框的字體大小為16像素。然后,在文本框的id屬性中添加了content,就可以應用這個ID樣式。 以上就是CSS嵌入式的寫法。掌握好這種方法,就可以輕松地為HTML頁面添加樣式。