溫馨提示×

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

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

css行內(nèi)樣式是不是內(nèi)部樣式

發(fā)布時(shí)間：2021-07-16 11:46:36 來(lái)源：億速云 閱讀：175 作者：chen 欄目：web開(kāi)發(fā)

這篇文章主要講解了“css行內(nèi)樣式是不是內(nèi)部樣式”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css行內(nèi)樣式是不是內(nèi)部樣式”吧！

css行內(nèi)樣式不是內(nèi)部樣式。行內(nèi)樣式是通過(guò)style屬性把CSS樣式直接放在代碼行內(nèi)的標(biāo)簽中；而內(nèi)部樣式是將CSS樣式寫(xiě)在網(wǎng)頁(yè)源文件的頭部head中，通過(guò)使用HTML標(biāo)簽中的“<style>”標(biāo)簽將其包圍。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

行內(nèi)樣式

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

【示例1】針對(duì)段落、<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 效果要強(qiáng)</strong>
    <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內(nèi)元素，div 塊級(jí)元素</div>
    <em style="font-size:2em;">行內(nèi)元素，em 強(qiáng)調(diào)</em>
</body>
</html>

頁(yè)面演示效果如下圖所示：

css行內(nèi)樣式是不是內(nèi)部樣式

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

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

的編寫(xiě)，我們拋棄過(guò)去 HTML 結(jié)構(gòu)和樣式放在一起的寫(xiě)法，即<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 像素以及進(jìn)行背景色、顏色的設(shè)置（background-color:#66CC99; color:#993300; height:30px; line-height:30px;），<em> 標(biāo)簽設(shè)置字體大小為相對(duì)單位（font-size: 2em;）。

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

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

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

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

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

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

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

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

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

內(nèi)部樣式

內(nèi)部樣式通過(guò)將 CSS 寫(xiě)在網(wǎng)頁(yè)源文件的頭部，即在 <head> 和 <head> 之間，通過(guò)使用 HTML 標(biāo)簽中的 <style> 標(biāo)簽將其包圍，其特點(diǎn)是該樣式只能在此頁(yè)使用，解決行內(nèi)樣式多次書(shū)寫(xiě)的弊端。

【示例2】為段落設(shè)置內(nèi)嵌式樣式書(shū)寫(xiě)方法，減少代碼量。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>內(nèi)部樣式</title>
<style type="text/css">
p{
    text-align: left;  /*文本左對(duì)齊*/
    font-size: 18px;  /*字體大小 18 像素*/
    line-height: 25px;  /*行高 25 像素*/
    text-indent: 2em;  /*首行縮進(jìn)2個(gè)文字大小空間*/
    width: 500px;  /*段落寬度 500 像素*/
    margin: 0 auto;  /*瀏覽器下居中*/
    margin-bottom: 20px;  /*段落下邊距 20 像素*/
}
</style>
</head>
<body>
    <p>測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！</p>
    <p>測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！</p>
    <p>測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！</p>
</body>
</html>

在上面示例中，段落進(jìn)行如下設(shè)置：文本左對(duì)齊、字體為 14 號(hào)、行高 25 像素、寬度 500 像素、下邊距 20 像素、瀏覽器下居中、首行縮進(jìn)兩個(gè)文字大小空間。首行縮進(jìn)使用相對(duì)單位，此設(shè)置的作用是當(dāng)字體大小改變時(shí)，如font-size: 18px;依然能夠?qū)崿F(xiàn)縮進(jìn)兩個(gè)文字大小空間。

行內(nèi)樣式帶來(lái)了樣式修改的不方便，例如上個(gè)示例中兩個(gè)段落都使用同樣的樣式，但需要編寫(xiě)兩遍；而使用內(nèi)嵌式樣式后，就可以將所有的段落樣式放在一起。

style 不僅可定義 CSS 樣式，還可以定義 JavaScript 腳本，故使用 style 時(shí)需要注意。當(dāng) style 的 type 值為text/css時(shí)，內(nèi)部編寫(xiě) CSS 樣式；若 style 的 type 值為text/javascript時(shí)，內(nèi)部編寫(xiě) JavaScript 腳本。

style 標(biāo)簽的 title 屬性

style 中有一個(gè)比較特殊的屬性 title，使用 title 可以為不同的樣式設(shè)置一個(gè)標(biāo)題，瀏覽者就可以根據(jù)標(biāo)題選擇不同的樣式達(dá)到瀏覽器中切換的效果，但 IE 瀏覽器不支持，F(xiàn)irefox 瀏覽器支持此效果。

感謝各位的閱讀，以上就是“css行內(nèi)樣式是不是內(nèi)部樣式”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css行內(nèi)樣式是不是內(nèi)部樣式這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

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

css
AI
助
手