CSS 基礎(chǔ)

1. CSS的全稱是什么?

CSS全稱是cascading style sheets,也就是層疊樣式表。是一種樣式表語言，用來描述HTML或XML（包括如SVG、XHTML之類的 HTML分支語言）文檔的呈現(xiàn)。CSS描述了在屏幕、紙質(zhì)、音頻等其它媒體上的元素應(yīng)該如何被渲染的問題。

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

  • CSS的三種引入方式
    • 內(nèi)聯(lián)樣式
      直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS
      <h1 style="color: red; font-size: 20px;"></h1>
    • 內(nèi)部樣式
      在HTML頭部中的<style>標(biāo)簽下書寫CSS代碼 
      <style type="text/css">
     h1 {
         color: red;
         font-size: 20px;
         }
</style>
<h1>饑人谷</h1>
    • 外部樣式
    1. link 使用HTML頭部<head>標(biāo)簽引入外部的CSS文件。 
      <head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    2. @import 使用CSS規(guī)則引入外部CSS文件 
      <style>
  @import url("hello.css");
  @import "world.css";
</style>
  • link 和@import 的比較
    • ink 屬于 HTML，通過link標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；
    • @import是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；
    • 當(dāng) HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；
    • link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
    • link支持使用Javascript控制DOM去改變樣式；而@import不支持。

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

  • 相對路徑
    • css/a.css
      當(dāng)前目錄CSS文件夾下的a.css文件
    • ./css/a.css
      同上，也是當(dāng)前目錄CSS文件夾下的a.css文件，./的意思是當(dāng)前目錄
    • b.css
      當(dāng)前目錄的b.css文件
    • ../imgs/a.png
      當(dāng)前目錄的上一級目錄下的imgs文件夾下的a.png文件
  • 絕對路徑
    • /Users/hunger/project/css/a.css
      從根文件夾指定a.css文件
  • 網(wǎng)站路徑

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

  • 將圖片上傳到服務(wù)器上用相對路徑直接展示
  • 如果是網(wǎng)頁上的圖片，直接通過URL用網(wǎng)站路徑展示

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

  • HTML
    • 標(biāo)準(zhǔn)模式聲明
      HTML頁面第一行，添加標(biāo)準(zhǔn)模式的聲明。eg. <!DOCTYPE html>
      原因：可確保在每個瀏覽器中擁有一致的表現(xiàn)。
    • 字符編碼
      要明確聲明。eg.<meta charset="UTF-8">
      原因：明確聲明字符編碼，可確保瀏覽器快速&容易判斷用哪種方式去渲染頁面內(nèi)容。
    • 定義屬性時，建議用雙引號，不要用單引號。
    • 成對的標(biāo)簽，結(jié)束標(biāo)簽一定要有。
    • HTML屬性應(yīng)當(dāng)按照一定的順序依次排列，來確保代碼的易讀性。
  • CSS
    • 語法不區(qū)分大小寫，但建議統(tǒng)一使用小寫
    • 不使用內(nèi)聯(lián)的style屬性定義樣式
    • id和class使用有意義的單詞，分隔符建議使用-
    • 有可能就是用縮寫
    • 屬性值是0的省略單位
    • 塊內(nèi)容縮進(jìn)
    • 屬性名冒號后面添加一個空格

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

1509632276(1).png

參考：
https://segmentfault.com/a/1190000000683599
https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn

最后編輯于 ：
?著作權(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)容

  • 一、css是什么？ CSS全稱是Cascading Style Sheets，簡寫為CSS，稱作：層疊樣式表，又稱...
    青鳴閱讀 1,130評論 0贊 1
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 445評論 0贊 1
  • 1.CSS簡介 CSS 的全稱是Cascading Style Sheets，層疊樣式表 2.CSS的引入方式 內(nèi)...
    毛毛獨角獸閱讀 396評論 0贊 0
  • 1. CSS的全稱是什么? 層疊樣式表 (Cascading Style Sheets，?？s寫記作 CSS）， 是...
    饑人谷_oathy閱讀 383評論 0贊 0
  • 你第一次開口說話，便是叫我的名字，當(dāng)時我以為我聽錯...
    記憶中的陌生閱讀 1,146評論 7贊 23

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