溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何在html標(biāo)簽中寫css樣式

發(fā)布時間：2020-12-17 09:30:06 來源：億速云 閱讀：830 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)如何在html標(biāo)簽中寫css樣式，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

方法：直接在標(biāo)簽的style屬性中寫入css樣式即可，style屬性中可以規(guī)定元素的行內(nèi)樣式，語法“<element style="css樣式代碼"></element>”。

CSS 樣式代碼必須保存在.css類型的文本文件中，或者放在網(wǎng)頁內(nèi) <style> 標(biāo)簽中，或者插在網(wǎng)頁標(biāo)簽的 style 屬性值中（行內(nèi)樣式）。

行內(nèi)樣式就是把 CSS 樣式直接放在代碼行內(nèi)的標(biāo)簽中，一般都是放入標(biāo)簽的style屬性中，由于行內(nèi)樣式直接插入標(biāo)簽中，故是最直接的一種方式，同時也是修改最不方便的樣式。

【示例1】針對段落、<h3> 標(biāo)簽、<em> 標(biāo)簽、<strong>標(biāo)簽以及 <div> 標(biāo)簽，分別應(yīng)用 CSS 行內(nèi)樣式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行內(nèi)樣式</title>
</head>
<body>
    <p style="background-color: #999900">行內(nèi)元素，控制段落-1</p>
    <h3 style="background-color: #FF6633">行內(nèi)元素，h3 標(biāo)題元素</h3>
    <p style="background-color: #999900">行內(nèi)元素，控制段落-2</p>
    <strong style="font-size:30px;">行內(nèi)元素，strong 比 em 效果要強</strong>
    <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內(nèi)元素，div 塊級元素</div>
    <em style="font-size:2em;">行內(nèi)元素，em 強調(diào)</em>
</body>
</html>

頁面演示效果如下圖所示：

如何在html標(biāo)簽中寫css樣式

在上面示例中，行內(nèi)樣式由 HTML 元素的 style 屬性，即將 CSS 代碼放入style=""引號內(nèi)即可，多個 CSS 屬性值則通過分號間隔，例如示例中 <div> 標(biāo)簽塊級元素

<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內(nèi)元素，div 塊級元素 </div>

的編寫，我們拋棄過去 HTML 結(jié)構(gòu)和樣式放在一起的寫法，即<body bgcolor="#33ffff">。

段落 <p> 標(biāo)簽設(shè)置背景色為褐色（background-color: #999900），標(biāo)題 <h3> 標(biāo)簽設(shè)置背景色為紅色（background-color: #FF6633）。

<strong> 標(biāo)簽設(shè)置字體為 30 像素（font-size:30px;），<div> 標(biāo)簽設(shè)置高度和行高為 30 像素以及進行背景色、顏色的設(shè)置（background-color:#66CC99; color:#993300; height:30px; line-height:30px;），<em> 標(biāo)簽設(shè)置字體大小為相對單位（font-size: 2em;）。

兩個段落 <p> 標(biāo)簽，雖內(nèi)容不同，但使用一樣的背景色設(shè)置，卻添加兩次 CSS 行內(nèi)屬性設(shè)置背景色 background-color: #999900。

<h3> 標(biāo)簽、<p> 標(biāo)簽、<div> 標(biāo)簽為塊級元素，設(shè)置其 CSS 屬性，瀏覽器支持；<strong> 標(biāo)簽、<em> 標(biāo)簽為行內(nèi)元素，設(shè)置其 CSS 屬性，瀏覽器支持；故無論行內(nèi)元素、塊級元素，CSS 行內(nèi)樣式都有效。

總之，行內(nèi)元素雖然編寫簡單，但通過示例可以發(fā)現(xiàn)存在以下缺陷：

每一個標(biāo)簽要設(shè)置樣式都需要添加 style 屬性。

  • 與過去網(wǎng)頁制作者將 HTML 的標(biāo)簽和樣式糅雜在一起的效果，不同的是現(xiàn)在是通過 CSS 編寫行內(nèi)樣式，過去釆用的是 HTML 標(biāo)簽屬性實現(xiàn)的樣式效果，雖方式不同但結(jié)果是一致的：后期維護成本高，即當(dāng)修改頁面時需要逐個打開網(wǎng)站每個頁面一一修改，根本看不到 CSS 所起到的作用。

  • 添加如此多的行內(nèi)樣式，頁面體積大，門戶網(wǎng)站若釆用這種方式編寫，那將浪費服務(wù)器帶寬和流量。

網(wǎng)絡(luò)上有些網(wǎng)頁通過查看源文件可以看到這種編寫方式，雖然一個網(wǎng)頁只有一部分是如此做的， 但需要分情況：

  • 若網(wǎng)頁制作者編寫這樣的行內(nèi)樣式，可以快速更改當(dāng)前樣式，不必考慮以前編寫的樣式?jīng)_突問題；

  • 網(wǎng)頁中若存在這種情況則是后臺編輯時，通過編輯器生成的樣式，或后臺未開發(fā)完整，需為編輯人員開發(fā)可選擇樣式的選項而非通過編輯器直接改變顏色、粗細、背景色、傾斜等效果。

關(guān)于如何在html標(biāo)簽中寫css樣式就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手