css全稱
層疊樣式表(英文全稱:Cascading Style Sheets)
樣式定義如何顯示Html元素,樣式通常儲(chǔ)存在樣式表奶卓。實(shí)現(xiàn)了內(nèi)容與樣式相分離晴音。
css的3種引入方式
1.行內(nèi)樣式
直接在標(biāo)簽內(nèi)加屬性肘交。
<div style="background: red"></div>
這種方式無法體現(xiàn)內(nèi)容與樣式分離玻孟,一般情況下不建議使用唆缴。
2.內(nèi)部樣式
把樣式寫在<head>標(biāo)簽對(duì)中,然后用<style>標(biāo)簽對(duì)包裹黍翎。
<head> <style> .content { background: red; } </style> </head>
優(yōu)劣:因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁面有效面徽,所以當(dāng)多個(gè)頁面需要引入相同的 CSS 代碼時(shí),這樣寫會(huì)導(dǎo)致代碼冗余匣掸,也不利于維護(hù)趟紊。但是如果寫末班網(wǎng)頁的話就很適合,因?yàn)椴榭茨0宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式旺聚。
3.外部樣式
在HTML 頭部的 <head>標(biāo)簽里使用<link>標(biāo)簽引入外部的 CSS 文件织阳。
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
tips:<link> 標(biāo)簽定義文檔與外部資源的關(guān)系。
rel屬性:規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系砰粹。
href屬性:規(guī)定被鏈接文檔的位置唧躲。
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式碱璃,所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中弄痹,所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中嵌器,CSS 文件會(huì)在第一次加載時(shí)引入肛真,以后切換頁面時(shí)只需加載 HTML 文件即可。
4.導(dǎo)入方式
<style> @import url(style.css); </style>
tips:@import是 CSS2.1 才出現(xiàn)的概念爽航,所以如果瀏覽器版本較低蚓让,無法正確導(dǎo)入外部樣式文件;
當(dāng) HTML 文件被加載時(shí)讥珍,link 引用的文件會(huì)同時(shí)被加載历极,而 @import引用的文件則會(huì)等頁面全部下載完畢再被加載;
總結(jié):一般使用外部樣式衷佃。其他三種不建議使用
5.路徑
相對(duì)路徑:
css/a.css 當(dāng)前目錄下的css文件夾中的a.css
./css/a.css 當(dāng)前目錄中css文件夾中的a.css文件
tips:./代表當(dāng)前一級(jí)目錄趟卸;../代表上一級(jí)目錄
b.css 當(dāng)前目錄下的b.css文件
../imgs/a.png 上級(jí)目錄中的imgs 文件夾中的a圖片
絕對(duì)路徑:(本地文件的絕對(duì)地址)
/User/hunger/project/css/a.css 本地絕對(duì)路徑中的a.css文件
網(wǎng)站路徑:
/static/css/a.css
網(wǎng)絡(luò)中的路徑:
http://cdn.jirengu.com/kejian1/8-1.png
6.如果我想在js.jirengu.com上展示一個(gè)圖片,需要怎么操作?
(1)把圖片上傳到服務(wù)器上氏义,把圖片和html文件放在同一級(jí)或者上一級(jí)的img文件夾中锄列,使用相對(duì)路徑引用。
(2)直接使用網(wǎng)絡(luò)上的地址引用惯悠。
7.
8.五條html和css的書寫規(guī)范
1.語法統(tǒng)一使用小寫
2.不使用內(nèi)聯(lián)樣式的style元素定義樣式邻邮,建議采用外部css
3.id和class使用有區(qū)分度的單詞
4.塊內(nèi)容縮進(jìn)
5.編碼格式使用 "UTF-8"
6.屬性名:后面加一個(gè)space