css簡述

.CSS的全稱是什么?

Cascading style sheets饿悬,層疊樣式表斗遏。通過CSS和HTML的結(jié)合可以實(shí)現(xiàn)表現(xiàn)與結(jié)構(gòu)分離惩琉。從而提升工作效率仍稀,降低維護(hù)難度拳芙。

CSS有幾種引入方式?

在HTML中察藐,引入CSS的方法主要有以下3種:

  • 行內(nèi)樣式、
    即在標(biāo)記的style屬性中設(shè)定CSS樣式舟扎,這種方式本質(zhì)上沒有體現(xiàn)出CSS的優(yōu)勢分飞,因此不推薦使用
    例:<h1 style =”color: red; font-size: 20px;”><h1>;
  • 內(nèi)部樣式睹限、
    則將對頁面中各種元素的設(shè)置集中寫在<head>和</head>之間譬猫,對于單一的網(wǎng)頁,這種方法很方便
<style type="text/css">
 h1{
  background: white;
   font-size:20px;
}
</style>
<h1>戰(zhàn)狼2</h1>
  • 外部樣式:分為導(dǎo)入樣式和鏈接樣式
    但是對于一個(gè)包含很多頁面的網(wǎng)站羡疗,如果每個(gè)頁面都以內(nèi)嵌方式設(shè)置各自的樣式染服,就失去了CSS帶來的
    巨大優(yōu)點(diǎn),因此一個(gè)網(wǎng)站通常都是編寫一個(gè)獨(dú)立的CSS樣式表文件
 A:鏈接樣式
<head>
<link rel="stylesheet" href="css/default.css" type="text/css" />
</head>

B:導(dǎo)入樣式
<style type="text/css">
@import"mystyle.css";
</style>
導(dǎo)入樣式和鏈接樣式的作用是一樣的叨恨,唯一的不同是服務(wù)對象不一樣
  • @import 為CSS服務(wù)柳刮,import 是css的一個(gè)語法
  • link是為當(dāng)前的頁服務(wù),link html 的表簽可以放在任何地方
本質(zhì)上痒钝,這兩種方式都是為了加載CSS文件秉颗,但還是存在著細(xì)微的差別
  • 差別1:link屬于XHTML標(biāo)簽,而@import完全是CSS提供的一種方式送矩。
    link標(biāo)簽除了可以加載CSS外蚕甥,還可以做很多其它的事情,比如定義RSS益愈,定義rel連接屬性等梢灭,@import就只能加載CSS了。
  • 差別2:加載順序的差別蒸其。當(dāng)一個(gè)頁面被加載的時(shí)候(就是被瀏覽者瀏覽的時(shí)候)敏释,link引用的CSS會(huì)同時(shí)被加載,而@import引用的CSS 會(huì)等到頁面全部被下載完再被加載摸袁。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式(就是閃爍)钥顽,網(wǎng)速慢的時(shí)候還挺明顯(夢之都加載CSS 的方式就是使用@import,我一邊下載一邊瀏覽夢之都網(wǎng)頁時(shí)靠汁,就會(huì)出現(xiàn)上述問題)蜂大。
  • 差別3:兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持蝶怔,@import只有在IE5以上的才能識別奶浦,而link標(biāo)簽無此問題。
  • 差別4:使用dom控制樣式時(shí)的差別踢星。當(dāng)使用javascript控制dom去改變樣式的時(shí)候澳叉,只能使用link標(biāo)簽,因?yàn)锧import不是dom可以控制的。
    從上面的分析來看成洗,還是使用link標(biāo)簽比較好五督。

HTML書寫規(guī)范

* 閉合HTML標(biāo)簽
* 聲明正確的文檔類型DOCTYPE
* 不要使用內(nèi)聯(lián)樣式
* 在頁面的head標(biāo)簽中引入所有的樣式表文件。
* 在頁面底部引入JavaScript文件
* 不要使用嵌入式JavaScript
* 代碼排版要有層次瓶殃,使用4個(gè)空格做為一個(gè)縮進(jìn)層級充包。

CSS書寫規(guī)范

* 使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級,不允許使用 2 個(gè)空格 或 tab 字符遥椿。
* 選擇器 與 { 之間必須包含空格基矮。
* 屬性名 與之后的 : 之間不允許包含空格, : 與 屬性值 之間必須包含空格冠场。
* 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)愈捅,每個(gè)選擇器聲明必須獨(dú)占一行。
* 不使用內(nèi)聯(lián)的style屬性定義樣式慈鸠。
* 塊內(nèi)容縮進(jìn)蓝谨。
* 屬性定義后必須以分號結(jié)尾。
* 在可以使用縮寫的情況下青团,盡量使用屬性縮寫譬巫。

如果我想在jsbin.com上展示一個(gè)圖片,需要怎么操作?

1.可以直接將圖片上傳到服務(wù)器督笆,在頁面使用這張圖片芦昔;或者將圖片存在本地服務(wù)器,然后打開本地服務(wù)器娃肿,然后再在JS BIN上引用圖片
2.如果這個(gè)圖片本來就存在網(wǎng)絡(luò)上其他的服務(wù)器上咕缎,可以直接使用圖片的網(wǎng)絡(luò)路徑鏈接的方式在頁面上添加url引用這張圖片

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市料扰,隨后出現(xiàn)的幾起案子凭豪,更是在濱河造成了極大的恐慌,老刑警劉巖晒杈,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嫂伞,死亡現(xiàn)場離奇詭異,居然都是意外死亡拯钻,警方通過查閱死者的電腦和手機(jī)帖努,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來粪般,“玉大人拼余,你說我怎么就攤上這事∧洞酰” “怎么了匙监?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵寡润,是天一觀的道長。 經(jīng)常有香客問我舅柜,道長,這世上最難降的妖魔是什么躲惰? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任致份,我火速辦了婚禮,結(jié)果婚禮上础拨,老公的妹妹穿的比我還像新娘氮块。我一直安慰自己,他們只是感情好诡宗,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布滔蝉。 她就那樣靜靜地躺著,像睡著了一般塔沃。 火紅的嫁衣襯著肌膚如雪蝠引。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天蛀柴,我揣著相機(jī)與錄音螃概,去河邊找鬼。 笑死鸽疾,一個(gè)胖子當(dāng)著我的面吹牛吊洼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播制肮,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼冒窍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了豺鼻?” 一聲冷哼從身側(cè)響起综液,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎儒飒,沒想到半個(gè)月后意乓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡约素,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年届良,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片圣猎。...
    茶點(diǎn)故事閱讀 38,809評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡士葫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出送悔,到底是詐尸還是另有隱情慢显,我是刑警寧澤爪模,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布,位于F島的核電站荚藻,受9級特大地震影響屋灌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜应狱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一共郭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧疾呻,春花似錦除嘹、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至璃岳,卻和暖如春年缎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背铃慷。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工晦款, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人枚冗。 一個(gè)月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓缓溅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親赁温。 傳聞我的和親對象是個(gè)殘疾皇子坛怪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評論 2 351

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,742評論 1 92
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,527評論 32 459
  • 微風(fēng)徐來股囊,水波不興袜匿。 之后才明白他們向往的景色
    會(huì)想多的姑娘閱讀 157評論 0 0
  • 曾經(jīng)以為自己是個(gè)外表安靜內(nèi)心浪蕩的女子,在新的地域待了近五十天了稚疹,卻發(fā)現(xiàn)沒有什么可以打起精神去做的事居灯,沒有想去探...
    斂柔閱讀 237評論 2 1