CSS基礎(chǔ)

1.CSS的全稱是什么?

CSS的全稱是Cascading Style Sheet,漢語(yǔ)意思是「級(jí)聯(lián)樣式表」思瘟,通常又稱為“風(fēng)格樣式表(Style Sheet)

2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?

三種

  • 內(nèi)聯(lián)樣式
<h1 style="color: red; font-size: 20px;"> Hello World </h1>
  • 內(nèi)部樣式
<style>
    h1{
      color: red;
      font-size: 20px;
    }
</style>
<h1>Hello World  </h1>
  • 外部樣式
<head>
        <link rel="style sheet"  type="text/css"  href="css/style.css">
</head>
  <style>
    @import url("hello.css");
    @import "world.css";
  <\style>

link 和@import 區(qū)別如下

  1. 從屬差別
    link是XHTML中的標(biāo)簽环础,除了用來(lái)引用CSS之外旨指,還能加載RSS等其他事物,@import屬于CSS范疇喳整,只能加載CSS
  2. 加載順序差別
    link引用的CSS會(huì)和HTML同時(shí)加載谆构,@import會(huì)在HTML渲染完之后再開(kāi)始加載
  3. 兼容性差別
    link標(biāo)簽可以說(shuō)沒(méi)有瀏覽器不能識(shí)別,@import是CSS 2.1中提出的框都,老瀏覽器不能識(shí)別搬素,IE5以上才能識(shí)別(不過(guò)現(xiàn)在應(yīng)該沒(méi)有人用IE5以下的版本了)
  4. 使用DOM控制樣式時(shí)的區(qū)別
    當(dāng)使用JavaScript控制DOM來(lái)改變樣式的時(shí)候,只能使用link標(biāo)簽魏保,因?yàn)锧impotent不是DOM可控的
  5. @import可以用在CSS中嵌套使用(注意寫在最前面熬尺,否則無(wú)法生效)

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

路徑 含義 分類
css/a.css 當(dāng)前文件位置下的 css 文件夾中的 a.css 文件 相對(duì)路徑
./css/a.css 當(dāng)前文件位置下的 css 文件夾中的 a.css 文件 相對(duì)路徑
b.css 當(dāng)前文件位置下的 b.css 文件 相對(duì)路徑
../imgs/a.png 當(dāng)前文件位置的 上一級(jí)地址位置下的 imgs 文件夾中的 a.png 文件 相對(duì)路徑
/Users/hunger/project/css/a.css 根目錄下的 Users/hunger/project/css 文件夾中的 a.css 文件 絕對(duì)路徑
/static/css/a.css 根目錄下的 static/css 文件夾中的 a.css 文件 網(wǎng)站路徑
http://cdn.jirengu.com/kejian1/8-1.png 相應(yīng)服務(wù)器上網(wǎng)站根目錄下 kejian1 文件夾中的 8-1.png 文件 網(wǎng)站路徑
  • 相對(duì)路徑
    方便網(wǎng)站的本地測(cè)試谓罗,網(wǎng)站整體遷移方便
    相對(duì)路徑的網(wǎng)頁(yè)在被人復(fù)制或轉(zhuǎn)載時(shí)粱哼,不能返回正常的外部鏈接導(dǎo)入

  • 絕對(duì)路徑
    不方便本地測(cè)試,修改麻煩
    在被人復(fù)制或轉(zhuǎn)載時(shí)檩咱,可以給網(wǎng)站帶來(lái)很多外鏈

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

將所需圖片上傳至任意圖床胯舷,獲取到該圖片的url,然后在需要用該圖片的地方引入它的url

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

  • html中除了開(kāi)頭的DOC和 'UTF-8'或者h(yuǎn)ead里特殊情況可以大寫外绊含,其他都為小寫桑嘶,css類都為小寫
  • 不使用內(nèi)聯(lián)的style屬性定義樣式
  • id和class使用有意義的單詞,分隔符建議使用-
  • 屬性值是0的省略單位
  • 塊內(nèi)容縮進(jìn)
  • 屬性名冒號(hào)后面添加一個(gè)空格

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

  • Elements 元素
    查找網(wǎng)頁(yè)源代碼HTML中的任一元素躬充,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋逃顶。
    自由操縱DOM和CSS來(lái)調(diào)整頁(yè)面的布局和設(shè)計(jì)
    左上第一個(gè)按鈕點(diǎn)擊之后,再選擇頁(yè)面中的任何元素充甚,Elements窗口中會(huì)實(shí)施跳轉(zhuǎn)到選中的元素的源碼


    Elements 元素

    左上第二個(gè)按鈕點(diǎn)擊之后以政,可以模擬出各種尺寸的移動(dòng)設(shè)備


    Device
  • Console 控制臺(tái)
    在開(kāi)發(fā)期間,可以使用控制臺(tái)面板記錄診斷信息伴找∮或者使用它作為 shell,在頁(yè)面上與JavaScript交互


    Console 控制臺(tái)
  • Sources 源代碼
    在“源代碼”面板中疆瑰,可以斷點(diǎn)調(diào)試 JavaScript ≌覆危或者通過(guò)Workspaces(工作區(qū))連接本地文件搭伤,使用開(kāi)發(fā)者工具實(shí)時(shí)編輯


    Sources 源代碼
  • Network 網(wǎng)絡(luò)
    從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息(包括狀態(tài)食绿、資源類型、大小耿币、所用時(shí)間等),可以根據(jù)這些信息來(lái)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化

Network 網(wǎng)絡(luò)
  • Performance 性能
    使用時(shí)間軸面板韧拒,可以通過(guò)記錄并分析頁(yè)面內(nèi)的各種事件淹接,由此可以針對(duì)性的進(jìn)行優(yōu)化,提供網(wǎng)頁(yè)運(yùn)行的性能


    erformance 性能
  • Application 資源面板
    記錄網(wǎng)站加載的所有資源信息叛溢,包括存儲(chǔ)數(shù)據(jù)(Local Storage塑悼、Session Storage、IndexedDB楷掉、Web SQL厢蒜、Cookies)、緩存數(shù)據(jù)烹植、字體斑鸦、圖片、腳本草雕、樣式表等

Application 資源面板
  • Security 安全
    判斷當(dāng)前網(wǎng)頁(yè)是否安全
Security 安全
  • Audits 審計(jì)
    對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況巷屿、網(wǎng)頁(yè)性能方面的診斷,并給出一些優(yōu)化建議墩虹。比如列出所有沒(méi)有用到的CSS文件等
Audits 審計(jì)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末嘱巾,一起剝皮案震驚了整個(gè)濱河市憨琳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌浓冒,老刑警劉巖栽渴,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異稳懒,居然都是意外死亡闲擦,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門场梆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)墅冷,“玉大人,你說(shuō)我怎么就攤上這事或油∧蓿” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵顶岸,是天一觀的道長(zhǎng)腔彰。 經(jīng)常有香客問(wèn)我,道長(zhǎng)辖佣,這世上最難降的妖魔是什么霹抛? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮卷谈,結(jié)果婚禮上杯拐,老公的妹妹穿的比我還像新娘。我一直安慰自己世蔗,他們只是感情好端逼,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著污淋,像睡著了一般顶滩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寸爆,一...
    開(kāi)封第一講書(shū)人閱讀 49,842評(píng)論 1 290
  • 那天诲祸,我揣著相機(jī)與錄音,去河邊找鬼而昨。 笑死救氯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的歌憨。 我是一名探鬼主播着憨,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼务嫡!你這毒婦竟也來(lái)了甲抖?” 一聲冷哼從身側(cè)響起漆改,我...
    開(kāi)封第一講書(shū)人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎准谚,沒(méi)想到半個(gè)月后挫剑,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡柱衔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年樊破,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唆铐。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡哲戚,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出艾岂,到底是詐尸還是另有隱情顺少,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布王浴,位于F島的核電站脆炎,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏氓辣。R本人自食惡果不足惜秒裕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望筛婉。 院中可真熱鬧簇爆,春花似錦癞松、人聲如沸爽撒。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)硕勿。三九已至,卻和暖如春枫甲,著一層夾襖步出監(jiān)牢的瞬間源武,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工想幻, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留粱栖,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓脏毯,卻偏偏與公主長(zhǎng)得像闹究,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子食店,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案渣淤? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 368評(píng)論 0 1
  • 1.CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTM...
    billa_8f6b閱讀 453評(píng)論 0 1
  • 1赏寇、CSS的全稱是什么? 答:CSS全稱是Cascading Style Sheets,層疊樣式表 2价认、CSS有幾...
    饑人谷_牛牛閱讀 350評(píng)論 0 1
  • 蘅蕪一笑閱讀 429評(píng)論 0 0