首頁 > web前端 > css教學 > 怎麼在標籤中寫css樣式

怎麼在標籤中寫css樣式

青灯夜游
發布: 2020-12-17 10:41:12
原創
8430 人瀏覽過

方法:直接在標籤的style屬性中寫入css樣式即可,style屬性中可以規定元素的行內樣式,語法「> ;」。

怎麼在標籤中寫css樣式

本教學操作環境:windows7系統、css3 html5版,此方法適用於所有品牌電腦。

(推薦教學:html教學CSS影片教學

CSS 樣式程式碼必須儲存在.css類型的文字檔中,或者放在網頁內

行內樣式就是把CSS 樣式直接放在程式碼行內的標籤中,一般都是放入標籤的style屬性中,由於行內樣式直接插入標籤中,故是最直接的一種方式,同時也是修改最不方便的樣式。

【範例1】針對段落、

標籤、 標籤、標籤以及
標籤,分別套用 CSS 行內樣式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
    <p style="background-color: #999900">行内元素,控制段落-1</p>
    <h2 style="background-color: #FF6633">行内元素,h2 标题元素</h2>
    <p style="background-color: #999900">行内元素,控制段落-2</p>
    <strong style="font-size:30px;">行内元素,strong 比 em 效果要强</strong>
    <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素,div 块级元素</div>
    <em style="font-size:2em;">行内元素,em 强调</em>
</body>
</html>
登入後複製

頁面示範效果如下圖:

怎麼在標籤中寫css樣式

在在上面範例中,行內樣式由HTML 元素的style 屬性,即將CSS 程式碼放入style =""引號內即可,多個CSS 屬性值則透過分號間隔,例如範例中

標籤區塊級元素

<div   style="max-width:90%">行内元素,div 块级元素 </div>
登入後複製

的編寫,我們拋棄過去HTML 結構和樣式放在一起的寫法,即

段落

標籤設定背景色為褐色(background-color: #999900),標題

標籤設定背景色為紅色(background-color: #FF6633)。

標籤設定字體為30 像素(font-size:30px;),

標籤設定高度和行高為30 像素以及進行背景色、顏色的設定(background-color :#66CC99; color:#993300; height:30px; line-height:30px;), 標籤設定字體大小為相對單位(font-size: 2em;)。

兩個段落

標籤,雖內容不同,但使用一樣的背景色設置,卻添加兩次 CSS 行內屬性設置背景色 background-color: #999900。

標籤、

標籤、

標籤為區塊級元素,設定其CSS 屬性,瀏覽器支援; 標籤、 標籤為行內元素,設定其CSS 屬性,瀏覽器支援;故無論行內元素、區塊級元素,CSS 行內樣式都有效。

總之,雖然行內元素寫簡單,但透過範例可以發現存在以下缺陷:

每一個標籤要設定樣式都需要新增 style 屬性。

  • 與過去網頁製作者將HTML 的標籤和樣式糅雜在一起的效果,不同的是現在是透過CSS 編寫行內樣式,過去釆用的是HTML 標籤屬性實現的樣式效果,雖方式不同但結果是一致的:後期維護成本高,即當修改頁面時需要逐一打開網站每個頁面一一修改,根本看不到CSS 所起到的作用。

  • 添加如此多的行內樣式,頁面體積大,門戶網站若釆用這種方式編寫,那將浪費伺服器頻寬和流量。

網路上有些網頁透過檢視來源檔案可以看到這種編寫方式,雖然一個網頁只有一部分是如此做的, 但需要分情況:

  • 若網頁製作者編寫這樣的行內樣式,可以快速更改目前樣式,不必考慮先前編寫的樣式衝突問題;

  • 網頁中若有這種情況則是後台編輯時,透過編輯器產生的樣式,或後台未開發完整,需為編輯人員開發可選擇樣式的選項而非透過編輯器直接改變顏色、粗細、背景色、傾斜等效果。

更多程式相關知識,請造訪:程式設計學習! !

以上是怎麼在標籤中寫css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板