任務(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ū)別有以下幾個:
    • 從屬關(guān)系區(qū)別
      @import是 CSS 提供的語法規(guī)則,只有導(dǎo)入樣式表的作用;link是HTML提供的標簽,不僅可以加載 CSS 文件,還可以定義 RSS、rel 連接屬性等。

    • 加載順序區(qū)別
      加載頁面時,link標簽引入的 CSS 被同時加載;@import引入的 CSS 將在頁面加載完畢后被加載。

    • 兼容性區(qū)別
      @import是 CSS2.1 才有的語法,故只可在 IE5+ 才能識別;link標簽作為 HTML 元素,不存在兼容性問題。

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

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

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

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

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

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

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

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

功能區(qū).png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容