CSS基礎

CSS的全稱是什么?

層疊樣式表(英語:Cascading Style Sheets,簡寫 CSS),又稱串樣式列表級聯(lián)樣式表串接樣式表層疊樣式表階層式樣式表,一種用來為結(jié)構(gòu)化文檔,如HTML 文檔或XML文檔應用,添加樣式(字體、間距和顏色等)的計算機語言,由** W3C** 定義和維護。

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

CSS的四種引入方式

  1. 內(nèi)聯(lián)樣式
    <h1 style="color: red; font-size: 20px;"></h1>
  2. 內(nèi)部樣式
    <style type="text/css">
    h1 {
    color: red;
    font-size: 20px;
    }
    </style>
    <h1>CSS</h1>
  3. 外部樣式
    <head>
    <link rel="stylesheet" type="text/css" href="index.css">
    </head>
  4. 導入CSS@import
    <style>
    @import url("hello.css");
    @import "world.css";
    </style>

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

  • link標簽不止可以加載CSS,而且還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
  • 加載順序的差別。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再被加載。
  • 兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。
  • 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的。
    因此,從網(wǎng)頁性能的的角度考慮,應該避免用@import,常用<link>標簽。

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

  1. 相對路徑(本地文件的相對路徑)
    當前目錄下的css文件夾中的a.css
    css/a.css
    當前目錄中css文件夾中的a.css文件
    ./css/a.css
    當前目錄下的b.css文件
    b.css
    上級目錄中的imgs 文件夾中的a圖片
    ../imgs/a.png
  2. 絕對路徑(本地文件的絕對地址)
    本地絕對路徑中的a.css文件
    /User/hunger/project/css/a.css
  3. 網(wǎng)站路徑
    網(wǎng)站中也可以使用相對路徑
    css/a.css
    網(wǎng)絡中的路徑
    http://cdn.jirengu.com/kejian1/8-1.png17

如果我想在某個網(wǎng)站上展示一個圖片,需要怎么操作?

  1. 如何網(wǎng)絡中已有圖片,可以直接通過輸入網(wǎng)站路徑展示圖片。
  2. 在本地中直接上傳到服務器中,使頁面展示其上傳圖片。

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

  • 語法不區(qū)分大小寫,但建議統(tǒng)一使用小寫
  • 不使用內(nèi)聯(lián)的style屬性定義樣式
  • id和class使用有意義的單詞,分隔符建議使用
  • 有可能就是用縮寫
  • 屬性值是0的省略單位
  • 塊內(nèi)容縮進
  • 屬性名冒號后面添加一個空格

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

  • Element:元素面板--檢查和調(diào)整頁面,編輯樣式/DOM
  • Sources:源代碼面板--設置端點來調(diào)試js,或通過workspaces鏈接本地文件來使用開發(fā)者工具的實時編輯器。
  • Console:控制臺面板--記錄診斷信息,或者作為shell在頁面上寫js交互
  • Network:網(wǎng)絡面板--了解請求和下載的資源文件并優(yōu)化網(wǎng)頁加載性能
  • Performance:性能面板--使用時間軸面板可以通過記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來提高頁面的運行時性能。
  • Memory:內(nèi)存面板--如果需要比時間軸面板提供的更多信息,可以使用“配置”面板,例如跟蹤內(nèi)存泄漏。
  • Application:應用面板--使用資源面板檢查加載的所有資源,包括IndexedDB與Web SQL數(shù)據(jù)庫,本地和會話存儲,cookie,應用程序緩存,圖像,字體和樣式表。
  • Security:安全面板--使用安全面板調(diào)試混合內(nèi)容問題,證書問題等等。
    1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
6.jpg
7.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

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

  • 一、css是什么? CSS全稱是Cascading Style Sheets,簡寫為CSS,稱作:層疊樣式表,又稱...
    青鳴閱讀 862評論 0 1
  • 1.CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTM...
    billa_8f6b閱讀 462評論 0 1
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 380評論 0 1
  • CSS的全稱 Cascading Style Sheets,層疊樣式表。是一種樣式表語言,用于為HTML文檔定義布...
    饑人谷_哈嚕嚕閱讀 377評論 0 1
  • 今天晚上的晚輔時間,孩子們還是一樣的安靜,我們的老師為了提高孩子們的效率事先對孩子們的教室進行了重新分配,看起來效...
    甜菜的眼淚閱讀 5,276評論 0 0