CSS及chrome調(diào)試窗口簡(jiǎn)介

CSS的全稱(chēng)是什么?

層疊樣式表(英文全稱(chēng):Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言衫仑。

CSS有幾種引入方式?

  1. 內(nèi)聯(lián)樣式(不建議使用)
    當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí),就可以使用內(nèi)聯(lián)樣式堕花。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性文狱。樣式屬性可以包含任何 CSS 屬性,
    例如:
<h1 style="color: red; font-size: 20px;"></h1>
  1. 內(nèi)部樣式
    當(dāng)單個(gè)文件需要特別樣式時(shí)缘挽,就可以使用內(nèi)部樣式表瞄崇。你可以在 head 部分通過(guò) <style> 標(biāo)簽定義內(nèi)部樣式表
<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>
<h1>很強(qiáng)</h1>
  1. 外部樣式
    指的是單獨(dú)將CSS樣式寫(xiě)在另一個(gè)文件里,當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候到踏,外部樣式表將是理想的選擇杠袱。使用外部樣式表,你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀
    引入外部樣式一般有兩種方式:
  • **link **
<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
  • @import
<style>
  @import url("hello.css");
  @import "world.css";
</style>
  1. 瀏覽器默認(rèn)樣式
    當(dāng)頁(yè)面沒(méi)有任何樣式時(shí)窝稿,頁(yè)面上的內(nèi)容會(huì)加載瀏覽器自帶的默認(rèn)樣式

不同瀏覽器對(duì)于相同元素的默認(rèn)樣式并不一致,因此根據(jù)需求會(huì)需要重設(shè)默認(rèn)樣式使頁(yè)面在所有瀏覽器上顯示一致:

 * {padding:0;marging:0}凿掂;

link 和@import 有什么區(qū)別?

  • link是HTML的標(biāo)簽伴榔,@import是CSS的語(yǔ)法
  • link是html標(biāo)簽,因此沒(méi)有兼容性庄萎,而@import只有IE5以上才能識(shí)別
  • 權(quán)重:link引入>@import
  • 頁(yè)面加載方式:link引入的CSS會(huì)與頁(yè)面內(nèi)容同時(shí)加載踪少,@import引入的CSS會(huì)等頁(yè)面內(nèi)容加載完成后再加載

以下這幾種文件路徑分別用在什么地方,代表什么意思?

  • css/a.css
    相對(duì)路徑糠涛,代表的是當(dāng)前目錄的css文件夾中a.css文件
  • ./css/a.css
    相對(duì)路徑援奢,代表的是當(dāng)前目錄的css文件夾中a.css文件(與上面的路徑相同)
  • b.css
    相對(duì)路徑,代表的是當(dāng)前文件夾下的b.css文件
  • ../imgs/a.png
    相對(duì)路徑忍捡,代表的是上一級(jí)目錄中的imgs文件夾中的a.png文件
  • /User/hunger/project/css/a.css
    絕對(duì)路徑集漾,代表的是本地路徑中的a.css文件
  • /static/css/a.css
    網(wǎng)站路徑切黔,網(wǎng)站的主目錄下的css文件夾的a.css文件
  • http://cdn.jirengu.com/kejian1/8-1.png
    網(wǎng)站路徑,網(wǎng)站的主目錄下kejian1文件夾
    8-1.png文件

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

  • 方法一:將想要展示的圖片上傳至js.jirengu.com所在的服務(wù)器中纬霞,最好是放置在網(wǎng)站主目錄下,并新建一個(gè)專(zhuān)門(mén)存放圖片文件夾驱显,例如:images文件夾诗芜,然后在html中寫(xiě)入
![](/images/目標(biāo)圖片.jpg)

優(yōu)點(diǎn):圖片便于管理,寫(xiě)HTML時(shí)可讀性高埃疫,安全性高
缺點(diǎn):服務(wù)器需要一定費(fèi)用購(gòu)入內(nèi)存來(lái)存儲(chǔ)圖片伏恐,一旦遇到大量并發(fā)會(huì)對(duì)服務(wù)器產(chǎn)生較大壓力

  • 方法二:將想要展示的圖片上傳至圖床或第三方網(wǎng)站存儲(chǔ)并生成外鏈,然后在自己的網(wǎng)站的html中寫(xiě)入
![](http://www.xxxxxx)

優(yōu)點(diǎn):不占用網(wǎng)站服務(wù)器內(nèi)存栓霜,加載不會(huì)對(duì)網(wǎng)站服務(wù)器造成壓力
缺點(diǎn):有安全風(fēng)險(xiǎn)脐湾,如果選擇的圖床不夠好,有可能會(huì)被刪庫(kù)跑路叙淌,加載速度也因圖床質(zhì)量而定

列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范

  • 每行不得超過(guò) 120 個(gè)字符秤掌,除非單行不可分割(CSS)
  • 屬性名 與之后的 : 之間不允許包含空格, : 與 屬性值 之間必須包含空格(CSS)
  • 使用 border / margin / padding 等縮寫(xiě)時(shí)鹰霍,應(yīng)注意隱含值對(duì)實(shí)際數(shù)值的影響闻鉴,確實(shí)需要設(shè)置多個(gè)方向的值時(shí)才使用縮寫(xiě)(CSS)
  • class 必須單詞全字母小寫(xiě),單詞間以 - 分隔(HTML)
  • 對(duì) HTML5 中規(guī)定允許省略的閉合標(biāo)簽茂洒,不允許省略閉合標(biāo)簽(HTML)
  • 屬性名必須使用小寫(xiě)字母(HTML)
  • 自定義屬性建議以 xxx- 為前綴孟岛,推薦使用 data-(HTML)
  • 使用 HTML5 的 doctype 來(lái)啟用標(biāo)準(zhǔn)模式,建議使用大寫(xiě)的 DOCTYPE(HTML)

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

chrome開(kāi)發(fā)者工具
  • Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋督勺。
  • Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息渠羞,且可以作為與JS進(jìn)行交互的命令行Shell。
  • Sources:斷點(diǎn)調(diào)試JS智哀。
  • Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息(包括狀態(tài)次询、資源類(lèi)型、大小瓷叫、所用時(shí)間等)屯吊,可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
  • Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類(lèi)事件摹菠,以此可以提高網(wǎng)頁(yè)的運(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)頁(yè)是否安全跃须。
  • Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷娃兽,并給出一些優(yōu)化建議菇民。比如列出所有沒(méi)有用到的CSS文件等。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末投储,一起剝皮案震驚了整個(gè)濱河市第练,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌玛荞,老刑警劉巖娇掏,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異勋眯,居然都是意外死亡婴梧,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)客蹋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)塞蹭,“玉大人,你說(shuō)我怎么就攤上這事讶坯》纾” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵闽巩,是天一觀的道長(zhǎng)钧舌。 經(jīng)常有香客問(wèn)我,道長(zhǎng)涎跨,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任崭歧,我火速辦了婚禮隅很,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己叔营,他們只是感情好屋彪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著绒尊,像睡著了一般畜挥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上婴谱,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天蟹但,我揣著相機(jī)與錄音,去河邊找鬼谭羔。 笑死华糖,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的瘟裸。 我是一名探鬼主播客叉,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼话告!你這毒婦竟也來(lái)了兼搏?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤沙郭,失蹤者是張志新(化名)和其女友劉穎佛呻,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體棠绘,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡件相,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了氧苍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片夜矗。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖让虐,靈堂內(nèi)的尸體忽然破棺而出紊撕,到底是詐尸還是另有隱情,我是刑警寧澤赡突,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布对扶,位于F島的核電站,受9級(jí)特大地震影響惭缰,放射性物質(zhì)發(fā)生泄漏浪南。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一漱受、第九天 我趴在偏房一處隱蔽的房頂上張望络凿。 院中可真熱鬧,春花似錦、人聲如沸絮记。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)怨愤。三九已至派敷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間撰洗,已是汗流浹背篮愉。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留了赵,地道東北人潜支。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像柿汛,于是被迫代替她去往敵國(guó)和親冗酿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

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