1.CSS的全稱是什么?
層疊樣式表(英文全稱:Cascading Style Sheets)
是一種用來表現(xiàn)HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言雌桑。CSS不僅可以靜態(tài)地修飾網(wǎng)頁垃瞧,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式莫辨,擁有對網(wǎng)頁對象和模型樣式編輯的能力。
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
引入方式:
在HTML中引入CSS的方法主要有四種路呜,它們分別是行內(nèi)式刽射、內(nèi)嵌式、鏈接式和導入式补鼻。
1.行內(nèi)式(內(nèi)聯(lián)式)
行內(nèi)式是在標記的style屬性中設定CSS樣式哄啄。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢,不推薦使用风范。如下:
<div style="color:red">123</div>
2.內(nèi)嵌式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標簽對的<style></style>標簽對中咨跌。
缺點是對于一個包含很多網(wǎng)頁的網(wǎng)站,在每個網(wǎng)頁中使用嵌入式硼婿,進行修改樣式時非常麻煩锌半。單一網(wǎng)頁可以考慮使用嵌入式。
如下:
<head>
<style type="text/css">
...CSS樣式
</style>
</head>
3.鏈接式
也是將一個.css文件引入到HTML文件中加酵,但它與導入式不同的是鏈接式使用HTML規(guī)則引入外部CSS文件拳喻,它在網(wǎng)頁的<head></head>標簽對中使用<link>標記來引入外部樣式表文件,如下:
<link href="style.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中猪腕,導入式使用CSS規(guī)則引入外部CSS文件冗澈,<style>標記也是寫在<head>標記中,如下:
<style>
@import url("style.css");
@import "css.css"
</style>
link 和@import的區(qū)別:
- 語法結(jié)構差別 link屬于HTML標簽陋葡,只能放入html源代碼中使用亚亲,而@import是CSS提供的一種方式,只能加載CSS了腐缤。
- 加載順序的差別 link引用的CSS會在一個頁面被加載的時候(就是被瀏覽者瀏覽的時候)同時被加載捌归,而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍)岭粤。
- 兼容性的差別 由于@import是CSS2.1提出的所以老的瀏覽器不支持惜索,@import只有在IE5以上的才能識別,而link標簽無此問題剃浇。
- 使用dom控制樣式時的差別 當使用javascript控制dom去改變樣式的時候巾兆,只能使用link標簽,因為@import不是dom可以控制的虎囚。
3.以下這幾種文件路徑分別用在什么地方角塑,代表什么意思?
- css/a.css(當前目錄下css文件夾內(nèi)a.css文件)
- ./css/a.css(當前目錄下css文件夾內(nèi)a.css文件)
- b.css(當前目錄下b.css文件)
- ../imgs/a.png(上一層目錄下imgs目錄中a.png文件)
- /Users/hunger/project/css/a.css(本地絕對路徑中的a.css文件)
- /static/css/a.css(本地絕對路徑中的a.css文件)
- (http://cdn.jirengu.com/kejian1/8-1.png) (網(wǎng)站的圖片地址)
4. 如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?
方法:
- 把圖片上傳到網(wǎng)站服務器淘讥,在頁面中使用相對路徑引用圃伶,如:../imgs/a.png
- 在頁面中使用絕對路徑,引用其他網(wǎng)站中的圖片,如:http://cdn.jirengu.com/kejian1/8-1.png
5. 列出5條以上html和 css 的書寫規(guī)范
HTML書寫規(guī)范
- id元素必須保證頁面唯一窒朋。
- 同一頁面搀罢,應避免使用相同的 name 與 id。
- 標簽使用必須符合標簽嵌套規(guī)則炼邀。
- 屬性值必須用雙引號包圍魄揉。
- 引入 CSS 時必須指明 rel="stylesheet"。
- title 必須作為 head 的直接子元素拭宁,并緊隨 charset 聲明之后洛退。
CSS書寫規(guī)范
- 語法不區(qū)分大小寫,但建議統(tǒng)一使用小寫
- 當一個 rule 包含多個 selector 時杰标,每個選擇器聲明必須獨占一行兵怯。
- 屬性定義后必須以分號結(jié)尾。
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞腔剂,分隔符建議使用-
- 屬性值是0的省略單位
- 塊內(nèi)容縮進
- 屬性名冒號后面添加一個空格
6.截圖介紹 chrome 開發(fā)者工具的功能區(qū)
面板上包含了Elements面板媒区、Console面板、Sources面板掸犬、Network面板袜漩、Timeline面板、Profiles面板湾碎、Application面板宙攻、Security面板、Audits面板這些功能面板介褥。
** 這些面板的功能點如下:**
Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋座掘。
Console:記錄開發(fā)者開發(fā)過程中的日志信息,且可以作為與JS進行交互的命令行Shell柔滔。
Sources:查看網(wǎng)站包含的html溢陪,css,js等文件睛廊,可以在js文件中打斷點調(diào)試
Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息(包括狀態(tài)形真、資源類型、大小超全、所用時間等)咆霜,可以根據(jù)這個進行網(wǎng)絡性能優(yōu)化。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件卵迂,以此可以提高網(wǎng)頁的運行時間的性能裕便。
Profiles:如果你需要Timeline所能提供的更多信息時绒净,可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)见咒、顯示JS對象和相關的DOM節(jié)點的內(nèi)存消耗、記錄內(nèi)存的分配細節(jié)挂疆。
Application:記錄網(wǎng)站加載的所有資源信息改览,包括存儲數(shù)據(jù)(Local Storage下翎、Session Storage、IndexedDB宝当、Web SQL视事、Cookies)、緩存數(shù)據(jù)庆揩、字體俐东、圖片、腳本订晌、樣式表等虏辫。
Security:判斷當前網(wǎng)頁是否安全。
Audits:對當前網(wǎng)頁進行網(wǎng)絡利用情況锈拨、網(wǎng)頁性能方面的診斷砌庄,并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等奕枢。