CSS基礎(chǔ)

1.CSS的全稱是什么?

層疊樣式表(英文全稱:Cascading Style Sheets)

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

1.

  • <big> 鏈入外部樣式表 </big>,例如:
    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
  • <big>內(nèi)部樣式表</big>,例如 :
    <div style="color: #333"><div>
  • <big>內(nèi)嵌樣式</big>,例如:
    <head>

<style type="text/css">

...此處寫(xiě)CSS樣式

</style>

</head>

  • <big>導(dǎo)入外部樣式表</big>,例如:
    <style type="text/css">

@import"mystyle.css"; 此處要注意.css文件的路徑

</style>

2.

區(qū)別1:link是XHTML標(biāo)簽,除了加載CSS外,還可以定義RSS等其他事務(wù);@import屬于CSS范疇,只能加載CSS。

區(qū)別2:link引用CSS時(shí),在頁(yè)面載入時(shí)同時(shí)加載;@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。

區(qū)別3:link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。

區(qū)別4:link支持使用Javascript控制DOM去改變樣式;而@import不支持。

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

3.1.相對(duì)路徑

路徑名 含義
css/a.css 當(dāng)前目錄下的css文件夾中的a.css
./css/a.css 當(dāng)前目錄中css文件夾中的a.css文件
b.css 當(dāng)前目錄下的b.css文件
../imgs/a.png 上級(jí)目錄中的imgs 文件夾中的a圖片

3.2.絕對(duì)路徑(本地文件的絕對(duì)地址)

路徑名 含義
/User/hunger/project/css/a.css 本地絕對(duì)路徑中的a.css文件

3.3.網(wǎng)站路徑

路徑名 含義
/static/css/a.css 網(wǎng)站中也可以使用相對(duì)路徑
http://cdn.jirengu.com/kejian1/8-1.png3 網(wǎng)絡(luò)中的路徑

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

  1. 將本地圖片上傳,通過(guò)瀏覽器加載server中文件夾內(nèi)的圖片
    上傳完成后,當(dāng)圖片所在文件夾與html展示頁(yè)面在同級(jí)目錄中時(shí),我們可以通過(guò)相對(duì)路徑直接調(diào)用展示
    比如:
    < img src=" " alt=" ">
    這里的src是對(duì)應(yīng)的相對(duì)路徑
    比如/images/a.png。

  2. 如果是網(wǎng)絡(luò)資源:
    < img src="http://cdn.jirengu.com/kejian1/8-1.png3" alt="jirengu">可采用網(wǎng)絡(luò)路徑直接引入.。

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

html

  1. 文檔類型聲明及編碼;
  2. 語(yǔ)義化html;
  3. 必須為含有描述性表單元素(input, textarea)添加label標(biāo)簽;
  4. 能以背景形式呈現(xiàn)的圖片, 盡量寫(xiě)入css樣式中;
  5. 給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋, 方便后臺(tái)添加功能;

css

  1. class與id的命名要有條理性;
  2. 書(shū)寫(xiě)代碼前, 考慮并提高樣式重復(fù)使用率;
  3. 充分利用html自身屬性及樣式繼承原理減少代碼量;
  4. 避免兼容性屬性的使用;
  5. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;

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

PH~U`FOGFX}UZD(55QM}L1C.png
  • Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
  • Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息,且可以作為與JS進(jìn)行交互的命令行Shell。
  • Sources:斷點(diǎn)調(diào)試JS。
  • Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息(包括狀態(tài)、資源類型、大小、所用時(shí)間等),可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
  • Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件,以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能。
  • Profiles:如果你需要Timeline所能提供的更多信息時(shí),可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
  • Application:記錄網(wǎng)站加載的所有資源信息,包括存儲(chǔ)數(shù)據(jù)(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
  • Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全。
  • Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷,并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 一、css是什么? CSS全稱是Cascading Style Sheets,簡(jiǎn)寫(xiě)為CSS,稱作:層疊樣式表,又稱...
    青鳴閱讀 889評(píng)論 0 1
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 382評(píng)論 0 1
  • 1、CSS的全稱是什么? 答:CSS全稱是Cascading Style Sheets,層疊樣式表 2、CSS有幾...
    饑人谷_牛牛閱讀 375評(píng)論 0 1
  • 1.CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTM...
    billa_8f6b閱讀 464評(píng)論 0 1
  • 6月18日第三次面試 前一天接到了HR實(shí)習(xí)生的電話,后一天就屁顛屁顛去面試了。在電話中,實(shí)習(xí)生告訴我,我所投的崗位...
    MISsinmist閱讀 286評(píng)論 0 1