任務(wù)六-課程任務(wù)

CSS的全稱是什么?

  • 全稱cascading style sheets夺刑,層疊樣式表鬓催。

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

  • 有4種引入方式厂榛。分別是:
    • 內(nèi)聯(lián)樣式
      <h1 style=“color: red; font-size: 20px;”>123</h1>
    • 內(nèi)部樣式
    <style type=“text/css”>
    h1{
       color: red;
    }
    </style>
    <h1>123</h1>
    
    • 外部樣式
     <head>
         <link rel=“stylesheet” type=“text/css” href=“index.css”>   
     </head>
    
    • 導(dǎo)入CSS
    <style>
         @import url(“hello.css”);             
         @import “world.css”;
     </style>
    
  • 區(qū)別有以下幾個(gè):
    • 從屬關(guān)系區(qū)別
      @import是 CSS 提供的語(yǔ)法規(guī)則赏僧,只有導(dǎo)入樣式表的作用庭敦;link是HTML提供的標(biāo)簽,不僅可以加載 CSS 文件兰迫,還可以定義 RSS信殊、rel 連接屬性等。

    • 加載順序區(qū)別
      加載頁(yè)面時(shí)汁果,link標(biāo)簽引入的 CSS 被同時(shí)加載涡拘;@import引入的 CSS 將在頁(yè)面加載完畢后被加載。

    • 兼容性區(qū)別
      @import是 CSS2.1 才有的語(yǔ)法据德,故只可在 IE5+ 才能識(shí)別鳄乏;link標(biāo)簽作為 HTML 元素,不存在兼容性問題汞窗。

    • DOM可控性區(qū)別
      可以通過 JS 操作 DOM ,插入link標(biāo)簽來改變樣式赡译;由于 DOM 方法是基于文檔的仲吏,無(wú)法使用@import的方式插入樣式。

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

  • css/a.css
    相對(duì)路徑裹唆,取得css文件夾下面的a.css文件
  • ./css/a.css
    相對(duì)路徑,取得同一文件夾下面的css文件夾下面的a.css文件
  • b.css
    相對(duì)路徑只洒,取得同一文件夾下面的b.css文件
  • ../imgs/a.png
    相對(duì)路徑许帐,取得父文件夾下面的imgs文件夾下面的a.png文件
  • /Users/hunger/project/css/a.css
    絕對(duì)路徑,取得目錄下的Users文件夾下的hunger文件夾下的project文件夾下的css文件夾下的a.css文件
  • /static/css/a.css
    網(wǎng)站路徑毕谴,網(wǎng)站中也可以使用相對(duì)路徑成畦,取得該網(wǎng)站目錄下static文件夾下的css文件夾下的a.css文件
  • http://cdn.jirengu.com/kejian1/8-1.png
    網(wǎng)站路徑,直接通過鏈接的形式取得網(wǎng)上的圖片

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

  • 上傳到服務(wù)器上循帐,再使用相對(duì)路徑取得
  • 直接采用其他網(wǎng)站上的圖片,將圖片鏈接引入HTML

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

  • HTML
    • 非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁(yè)面底部
    • 所有編碼均遵循xhtml標(biāo)準(zhǔn), 標(biāo)簽 & 屬性 & 屬性命名 必須由小寫字母及下劃線數(shù)字組成, 且所有標(biāo)簽必須閉合
    • 語(yǔ)義化html,
    • 盡可能減少div嵌套
    • 頁(yè)面中盡量避免使用style屬性
    • 必須為含有描述性表單元素(input, textarea)添加label
  • css書寫規(guī)范
    • 語(yǔ)法不區(qū)分大小寫舀武,但建議統(tǒng)一使用小寫
    • 不使用內(nèi)聯(lián)的style屬性定義樣式
    • id和class使用有意義的單詞拄养,分隔符建議使用-
    • 有可能就使用縮寫
    • 屬性值是0的省略單位
    • 塊內(nèi)容縮近
    • 屬性名冒號(hào)后面添加一個(gè)空格

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

功能區(qū).png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市银舱,隨后出現(xiàn)的幾起案子瘪匿,更是在濱河造成了極大的恐慌,老刑警劉巖寻馏,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棋弥,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡操软,警方通過查閱死者的電腦和手機(jī)嘁锯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來聂薪,“玉大人家乘,你說我怎么就攤上這事〔匕模” “怎么了仁锯?”我有些...
    開封第一講書人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)翔悠。 經(jīng)常有香客問我业崖,道長(zhǎng)野芒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任双炕,我火速辦了婚禮狞悲,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘妇斤。我一直安慰自己摇锋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開白布站超。 她就那樣靜靜地躺著荸恕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪死相。 梳的紋絲不亂的頭發(fā)上融求,一...
    開封第一講書人閱讀 49,111評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音算撮,去河邊找鬼生宛。 笑死,一個(gè)胖子當(dāng)著我的面吹牛钮惠,可吹牛的內(nèi)容都是我干的茅糜。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼素挽,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼蔑赘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起预明,我...
    開封第一講書人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤缩赛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后撰糠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酥馍,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年阅酪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了旨袒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡术辐,死狀恐怖砚尽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情辉词,我是刑警寧澤必孤,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站瑞躺,受9級(jí)特大地震影響敷搪,放射性物質(zhì)發(fā)生泄漏兴想。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一赡勘、第九天 我趴在偏房一處隱蔽的房頂上張望嫂便。 院中可真熱鬧,春花似錦闸与、人聲如沸顽悼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至冰评,卻和暖如春映胁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甲雅。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工解孙, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人抛人。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓弛姜,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親妖枚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子廷臼,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)绝页,斷路器荠商,智...
    卡卡羅2017閱讀 134,600評(píng)論 18 139
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評(píng)論 1 92
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程续誉,因...
    小菜c閱讀 6,358評(píng)論 0 17
  • 每個(gè)人都希望自己聰明莱没,越聰明越好,越聰明越顯得自己為人處世的高明酷鸦。聰明有大聰明與小聰明之分饰躲,糊涂亦有真糊涂、假糊涂...
    陳慶貴閱讀 250評(píng)論 0 0
  • 你身邊的事情都和你有關(guān)臼隔,當(dāng)別人有需要的時(shí)候都要盡所能及的幫助他們但不是全部代替他做事嘹裂。人脈就是這樣建立起來的,每次...
    小談常梳閱讀 266評(píng)論 0 0