css初識(shí)

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.

開發(fā)者工具截圖88.png

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市吮螺,隨后出現(xiàn)的幾起案子饶囚,更是在濱河造成了極大的恐慌帕翻,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萝风,死亡現(xiàn)場(chǎng)離奇詭異嘀掸,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)规惰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門睬塌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人歇万,你說我怎么就攤上這事揩晴。” “怎么了贪磺?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵硫兰,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我寒锚,道長(zhǎng)劫映,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任刹前,我火速辦了婚禮泳赋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘喇喉。我一直安慰自己祖今,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布拣技。 她就那樣靜靜地躺著千诬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪膏斤。 梳的紋絲不亂的頭發(fā)上大渤,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音掸绞,去河邊找鬼。 笑死耕捞,一個(gè)胖子當(dāng)著我的面吹牛衔掸,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播俺抽,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼敞映,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了磷斧?” 一聲冷哼從身側(cè)響起振愿,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤捷犹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后冕末,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萍歉,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年档桃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了枪孩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡藻肄,死狀恐怖蔑舞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嘹屯,我是刑警寧澤攻询,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站州弟,受9級(jí)特大地震影響钧栖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜呆馁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一桐经、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧浙滤,春花似錦阴挣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至揖膜,卻和暖如春誓沸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背壹粟。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工拜隧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人趁仙。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓洪添,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親雀费。 傳聞我的和親對(duì)象是個(gè)殘疾皇子干奢,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)盏袄,斷路器忿峻,智...
    卡卡羅2017閱讀 134,651評(píng)論 18 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案薄啥? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評(píng)論 25 707
  • 我遠(yuǎn)遠(yuǎn)沒有以為的那樣了解自己。 往日逛尚,尤其當(dāng)遇事時(shí)自己的各種情緒垄惧、反應(yīng)、言辭黑低、行為赘艳,像電影回放一樣歷歷在目,現(xiàn)在的...
    銥漩娜閱讀 237評(píng)論 0 0
  • 夏天來了掰曾,想大口吃西瓜又怕肚子著涼拉稀,怎么辦停团?用什么水果替代旷坦?當(dāng)然有辦法!我們推薦大家:吃黃瓜佑稠。 推薦原因秒梅,不僅...
    家庭涮烤驛站閱讀 262評(píng)論 0 0