css内联样式指的是什么
這篇文章主要介紹“css內(nèi)聯(lián)樣式指的是什么”,在日常操作中,相信很多人在css內(nèi)聯(lián)樣式指的是什么問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”css內(nèi)聯(lián)樣式指的是什么”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
在css中,內(nèi)聯(lián)樣式,又稱行內(nèi)樣式,就是在HTML標(biāo)簽內(nèi)部通過style屬性來直接設(shè)置元素的CSS樣式,語法“<標(biāo)記 style="樣式的屬性名1:樣式的屬性值1;屬性名2:屬性值2;......"></標(biāo)記>”。內(nèi)聯(lián)樣式會覆蓋掉其他引入方式的相同樣式效果;多個元素難以共享樣式,不利于代碼復(fù)用;HTML和CSS代碼混雜,不利于程序員和搜索引擎閱讀。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
內(nèi)聯(lián)樣式,又稱行內(nèi)樣式,就是把CSS樣式直接放在代碼行內(nèi)的標(biāo)簽中,一般都是放入標(biāo)簽的style屬性中;即在HTML標(biāo)簽內(nèi)部通過style屬性來直接設(shè)置元素的CSS樣式。由于內(nèi)聯(lián)樣式直接插入標(biāo)簽中,故是最直接的一種方式,同時也是修改最不方便的樣式。
語法:
<標(biāo)記style="樣式的屬性名1:樣式的屬性值1;屬性名2:屬性值2;......"></標(biāo)記>
例如:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>第一個網(wǎng)頁</title> </head> <body> <h2>我是h2標(biāo)題</h2> <h3>我是h3標(biāo)題</h3> <pstyle="color:red;font-size:30px;">我是一個段落</p> </body> </html>
在上面示例中,行內(nèi)樣式由 HTML 元素的 style 屬性,即將 CSS 代碼放入style=""引號內(nèi)即可,多個 CSS 屬性值則通過分號間隔
<pstyle="color:red;font-size:30px;">我是一個段落</p>
內(nèi)聯(lián)樣式的優(yōu)點(diǎn):
-
沒有了樣式表文件,在某些時候可以提升效率;
-
使用 style 屬性的樣式效果會最強(qiáng),會覆蓋掉其他引入方式的相同樣式效果。
內(nèi)聯(lián)樣式的缺點(diǎn):
-
多個元素難以共享樣式,不利于代碼復(fù)用;
-
HTML 和 CSS 代碼混雜,不利于程序員和搜索引擎閱讀。
總之,內(nèi)聯(lián)樣式雖然編寫簡單,但通過示例可以發(fā)現(xiàn)存在以下缺陷:
-
每一個標(biāo)簽要設(shè)置樣式都需要添加 style 屬性。
-
與過去網(wǎng)頁制作者將 HTML 的標(biāo)簽和樣式糅雜在一起的效果,不同的是現(xiàn)在是通過 CSS 編寫行內(nèi)樣式,過去釆用的是 HTML 標(biāo)簽屬性實(shí)現(xiàn)的樣式效果,雖方式不同但結(jié)果是一致的:后期維護(hù)成本高,即當(dāng)修改頁面時需要逐個打開網(wǎng)站每個頁面一一修改,根本看不到 CSS 所起到的作用。
-
添加如此多的行內(nèi)樣式,頁面體積大,門戶網(wǎng)站若釆用這種方式編寫,那將浪費(fèi)服務(wù)器帶寬和流量。
網(wǎng)絡(luò)上有些網(wǎng)頁通過查看源文件可以看到這種編寫方式,雖然一個網(wǎng)頁只有一部分是如此做的, 但需要分情況:
-
若網(wǎng)頁制作者編寫這樣的行內(nèi)樣式,可以快速更改當(dāng)前樣式,不必考慮以前編寫的樣式?jīng)_突問題;
-
網(wǎng)頁中若存在這種情況則是后臺編輯時,通過編輯器生成的樣式,或后臺未開發(fā)完整,需為編輯人員開發(fā)可選擇樣式的選項而非通過編輯器直接改變顏色、粗細(xì)、背景色、傾斜等效果。
總結(jié)
以上是生活随笔為你收集整理的css内联样式指的是什么的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 从SAP Hybris下单,同步到S/4
- 下一篇: 营转非保险怎么买