CSS第一講

1.CSS的全稱是什么?
CSS的全稱是Cascading Style Sheet,漢語意思是“層疊樣式表”,通常又稱為“風(fēng)格樣式表(Style Sheet)”,它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的.

2.CSS有幾種引入方式蝌箍?link和@import有什么區(qū)別市栗?
CSS有四種引入方式口叙,分別是:
(1)行內(nèi)式
行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式权旷。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢(shì)江锨,不推薦使用贞言。
(2)內(nèi)嵌式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對(duì)的<style></style>標(biāo)簽對(duì)中斜棚。格式如下:

<head>
<style type="text/css">

...此處寫CSS樣式

</style>
</head>

缺點(diǎn)是對(duì)于一個(gè)包含很多網(wǎng)頁的網(wǎng)站,在每個(gè)網(wǎng)頁中使用嵌入式该窗,進(jìn)行修改樣式時(shí)非常麻煩弟蚀。單一網(wǎng)頁可以考慮使用嵌入式。
(3)導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中酗失,導(dǎo)入式使用CSS規(guī)則引入外部CSS文件义钉,<style>標(biāo)記也是寫在<head>標(biāo)記中,使用的語法如下:

<style type="text/css">

@import"mystyle.css"; 此處要注意.css文件的路徑

</style>

導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件规肴,因此這就導(dǎo)致了一個(gè)問題捶闸,如果網(wǎng)頁比較大則會(huì)兒出現(xiàn)先顯示無樣式的頁面,閃爍一下之后奏纪,再出現(xiàn)網(wǎng)頁的樣式鉴嗤。這是導(dǎo)入式固有的一個(gè)缺陷。
(4)鏈接式
也是將一個(gè).css文件引入到HTML文件中序调,但它與導(dǎo)入式不同的是鏈接式使用HTML規(guī)則引入外部CSS文件醉锅,它在網(wǎng)頁的<head></head>標(biāo)簽對(duì)中使用<link>標(biāo)記來引入外部樣式表文件,使用語法如下:

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

使用鏈接式時(shí)與導(dǎo)入式不同的是它會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件发绢,因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的硬耍,它不會(huì)象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁,然后再顯示有樣式的網(wǎng)頁边酒,這是鏈接式的優(yōu)點(diǎn)经柴。

總結(jié):一般來說,做網(wǎng)站時(shí)把樣式多寫在多個(gè)樣式表文件中墩朦,因此我們先用鏈接式引入一個(gè)總的CSS文件坯认,然后在這個(gè)CSS文件中在使用導(dǎo)入式來引入其他的CSS文件。但如果通過JavaScrip來動(dòng)態(tài)引入CSS文件則只能使用鏈接式。

link和@import的區(qū)別:
(1)link屬于XHTML標(biāo)簽牛哺,而@import是CSS提供的;
(2)頁面被加載的時(shí)陋气,link會(huì)同時(shí)被加載,而@import引用的CSS會(huì)等到頁面被加載完再加載;
(3)import只在IE5以上才能識(shí)別引润,而link是XHTML標(biāo)簽巩趁,無兼容問題;
(4)link方式的樣式的權(quán)重 高于@import的權(quán)重.

3.文件路徑:
相對(duì)路徑:以文件(HTML頁面)所在路徑為基準(zhǔn)來查找相關(guān)文件css/a.css:在當(dāng)前路徑(HTML文件所在路徑)下存在css文件夾,選擇該文件夾下的a.css文件
./css/a.css:和第一個(gè)意義相同淳附,其中./表示當(dāng)前目錄议慰,選擇當(dāng)前目錄下css文件夾中的a.css文件
b.css:選擇當(dāng)前目錄中的b.css文件
../imgs/a.png:其中../表示上一級(jí)目錄,即選擇上一級(jí)目錄中的imgs文件夾下的a.png文件

絕對(duì)路徑:文件或目錄在硬盤上真正路徑/Users/hunger/project/css/a.css:在本地計(jì)算機(jī)上可以通過該路徑找到a.css文件

網(wǎng)路路徑:例如當(dāng)前頁面的地址為http://localhost:8080/code/index.html, 在該HTML文件中存在以下路徑:/static/css/a.css:以絕對(duì)路徑的方式在服務(wù)器中尋找a.css文件奴曙,即在服務(wù)器上直接通過該路徑尋找相關(guān)文件
css/a.css:以相對(duì)路徑的方式在服務(wù)器中尋找a.css文件别凹,即在index.html文件所在路徑(目錄)中尋找css文件夾下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png4: 通過該地址可以找到網(wǎng)絡(luò)上的8-1.png文件

4.在js.jirengu.com上展示一個(gè)圖片,需要怎么操作?
1缆毁、我們?cè)诰帉慼tml時(shí)番川,使用img標(biāo)簽的src屬性時(shí)到涂,它的值就是你要展示圖片的路徑脊框,如果這個(gè)圖片和html文件在同一個(gè)目錄下,直接就是圖片名践啄;如果不在同一個(gè)目錄下浇雹,就使用相對(duì)路徑找到圖片位置。一般不使用絕對(duì)路徑添加圖片屿讽。
2昭灵、當(dāng)圖片不在本地而是在網(wǎng)絡(luò)上,我們可以直接復(fù)制圖片的網(wǎng)址到src中伐谈。

5.HTML

1.文檔類型聲明及編碼: 統(tǒng)一為html5聲明類型<!DOCTYPE html>; 編碼統(tǒng)一為<meta charset=”gbk” />, 書寫時(shí)利用IDE實(shí)現(xiàn)層次分明的縮進(jìn);
2.非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;
3.引入樣式文件或JavaScript文件時(shí), 須略去默認(rèn)類型聲明,
4.引入JS庫文件, 文件名須包含庫名稱及版本號(hào)及是否為壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式為庫名稱+插件名稱, 比如jQuery.cookie.js;
5.所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成, 且所有標(biāo)簽必須閉合, 包括 br (
), hr(<hr />)等; 屬性值必須用雙引號(hào)包括;
CSS

1.使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)烂完,不允許使用 2 個(gè)空格 或 tab 字符。
2.選擇器 與 { 之間必須包
3.屬性名 與之后的 : 之間不允許包含空格诵棵, : 與 屬性值 之間必須包含空格抠蚣。
4.列表型屬性值 書寫在單行時(shí),, 后必須跟一個(gè)空格履澳。font-family: Arial, sans-serif;
5.每行不得超過 120 個(gè)字符嘶窄,除非單行不可分割。

6.截圖介紹 chrome 開發(fā)者工具的功能區(qū)

Paste_Image.png

Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋距贷。
Console:記錄開發(fā)者開發(fā)過程中的日志信息柄冲,且可以作為與JS進(jìn)行交互的命令行Shell。
Sources:斷點(diǎn)調(diào)試JS忠蝗。
Network:從發(fā)起網(wǎng)頁頁面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息(包括狀態(tài)现横、資源類型、大小、所用時(shí)間等)戒祠,可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化晦攒。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件,以此可以提高網(wǎng)頁的運(yùn)行時(shí)間的性能得哆。
Profiles:如果你需要Timeline所能提供的更多信息時(shí)脯颜,可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗贩据、記錄內(nèi)存的分配細(xì)節(jié)栋操。
Application:?記錄網(wǎng)站加載的所有資源信息,包括存儲(chǔ)數(shù)據(jù)(Local Storage饱亮、Session Storage矾芙、IndexedDB、Web SQL近上、Cookies)剔宪、緩存數(shù)據(jù)、字體壹无、圖片葱绒、腳本、樣式表等斗锭。
Security:判斷當(dāng)前網(wǎng)頁是否安全地淀。
Audits:對(duì)當(dāng)前網(wǎng)頁進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁性能方面的診斷岖是,并給出一些優(yōu)化建議帮毁。比如列出所有沒有用到的CSS文件等。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末豺撑,一起剝皮案震驚了整個(gè)濱河市烈疚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌聪轿,老刑警劉巖爷肝,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異屹电,居然都是意外死亡阶剑,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門危号,熙熙樓的掌柜王于貴愁眉苦臉地迎上來牧愁,“玉大人,你說我怎么就攤上這事外莲≈戆耄” “怎么了兔朦?”我有些...
    開封第一講書人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)磨确。 經(jīng)常有香客問我沽甥,道長(zhǎng),這世上最難降的妖魔是什么乏奥? 我笑而不...
    開封第一講書人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任摆舟,我火速辦了婚禮,結(jié)果婚禮上邓了,老公的妹妹穿的比我還像新娘恨诱。我一直安慰自己,他們只是感情好骗炉,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開白布照宝。 她就那樣靜靜地躺著,像睡著了一般句葵。 火紅的嫁衣襯著肌膚如雪厕鹃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,624評(píng)論 1 305
  • 那天乍丈,我揣著相機(jī)與錄音剂碴,去河邊找鬼。 笑死诗赌,一個(gè)胖子當(dāng)著我的面吹牛汗茄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播铭若,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼递览!你這毒婦竟也來了叼屠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤绞铃,失蹤者是張志新(化名)和其女友劉穎镜雨,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體儿捧,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡荚坞,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菲盾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颓影。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖懒鉴,靈堂內(nèi)的尸體忽然破棺而出诡挂,到底是詐尸還是另有隱情碎浇,我是刑警寧澤,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布璃俗,位于F島的核電站奴璃,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏城豁。R本人自食惡果不足惜苟穆,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望唱星。 院中可真熱鬧鞭缭,春花似錦、人聲如沸魏颓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽甸饱。三九已至沦童,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叹话,已是汗流浹背偷遗。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留驼壶,地道東北人氏豌。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像热凹,于是被迫代替她去往敵國(guó)和親泵喘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案般妙? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理纪铺,服務(wù)發(fā)現(xiàn),斷路器碟渺,智...
    卡卡羅2017閱讀 134,659評(píng)論 18 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,162評(píng)論 25 707
  • 為何引入this 為了讓函數(shù)和對(duì)象的屬性有一個(gè)紐帶鲜锚,并且能自動(dòng)傳第一個(gè)參數(shù)。具體理解見下圖: 什么是this th...
    馬建陽閱讀 303評(píng)論 0 0
  • 現(xiàn)在發(fā)個(gè)紅包哪里還像傳統(tǒng)那樣骏令,不是只有逢年過節(jié)才會(huì)發(fā),不是只有喜事連連才會(huì)發(fā)集峦。睡不著能發(fā)伏社,說句話能發(fā)抠刺,就連那些普普...
    筆尖躍動(dòng)心儀閱讀 789評(píng)論 2 2