一.CSS的全稱是什么?
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
二.CSS有幾種引入方式? link 和@import 有什么區別?
插入樣式表的方法有三種:
1.外部樣式表
當樣式需要應用于很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在(文檔的)頭部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
2.內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:
<head>
<style type="text/css">
css樣式內容
</style>
</head>
3.內聯樣式
由于要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式,你需要在相關的標簽內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:
<p style="color: red; margin-left: 20px">
This is a paragraph.
</p>
link 和@import 的區別:
區別1:link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。
區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。
區別3:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
區別4:link支持使用JavaScript控制DOM去改變樣式;而@import不支持。
區別5:link方式樣式的權重高于@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
根目錄下User文件夾下的hunger文件夾下的project文件夾下的css文件夾下的a.css文件
網站相對路徑:
/static/css/a.css
當前項目的根目錄下的static文件夾下的css文件夾下的a.css文件
網站絕對路徑:
http://cdn.jirengu.com/kejian1/8-1.png
引用http://cdn.jirengu.com這個CDN服務下的kejian1文件夾下的8-1.png文件
四.如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?
- 把圖片傳到服務器,然后獲取圖片的相對地址。
- 直接復制網絡上圖片鏈接地址。
五.列出5條以上html和css的書寫規范
html規范:
1.頁面的第一行添加標準模式聲明 <!DOCTYPE html>;
2.代碼縮進:tab鍵設置四個空格(通常在軟件右下角設置相應空格大小);
3.html中除了開頭的DOC和 'UTF-8'或者head里特殊情況可以大寫外,其他都為小寫,css類都為小寫;
4.建議為 html 根元素指定 lang 屬性,從而為文檔設置正確的語言 lang="zh-CN";
css規范:
1.CSS書寫順序
位置屬性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
2.使用CSS縮寫屬性:CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
3.長名稱或詞組可以使用中橫線來為選擇器命名。
六.截圖介紹 chrome 開發者工具的功能區
Elements標簽頁
Elements標簽頁的左側就是對頁面HTML結構的查看與編輯,你可以直接在某個元素上雙擊修改元素的屬性。
1.Edit as HTML直接對元素的HTML進行編輯,或者刪除某個元素,所有的修改都會即時在頁面上得到呈現;
2.Copy可以將HTML代碼直接復制下來,在拷貝別人網站上面的HTML代碼的時候非常方便;
3.Break on可以對某個元素進行監聽,在JS對元素的屬性或者HTML進行修改的時候,直接觸發斷點,跳轉到對改元素進行修改的JS代碼處。
1.Style看HTML元素的樣式;
2.Computed可以看元素的盒子模型;
3.Properties看到元素具有的方法與屬性,比查API手冊要方便得多。
Console標簽頁
Javascript控制臺:在這個面板可以查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本,還可以當作Javascript API查看用。
Sources標簽頁
Sources標簽頁可以查看到請求的資源情況,包括CSS、JS、圖片等的內容。也可以設置各種斷點。對存儲的內容進行編輯然后保存也會實時的反應到頁面上。
- Wctch:監測變量
- Breakpoints:JS斷點列表
- Event Listener Breakpoints:事件監聽斷點
Network標簽頁
Network標簽頁對于分析網站請求的網絡情況、查看某一請求的請求頭和響應頭還有響應內容很有用。注意是在你打開Chrome開發者工具后發起的請求,才會在這里顯示。
Application標簽頁
使用Application面板檢查加載的所有資源,包括IndexedDB與Web SQL數據庫,本地和會話存儲,cookie,應用程序緩存,圖像,字體和樣式表。
Security標簽頁
HTTPS 為您的網站和將個人信息委托給您的網站的人提供了重要的安全性和數據完整性。在 Chrome開發者工具中使用 Security 面板調試安全問題,確保您已在自己的網站上恰當地實現 HTTPS。包括以下功能:
(1)使用 Security Overview 可以立即查看當前頁面是否安全。
(2)檢查各個源以查看連接和證書詳情(安全源)或找出具體哪些請求未受保護(非安全源)。
Audits標簽頁
Audits的是用來分析頁面加載的過程,進而提供減少頁面加載時間、提升響應速度的方案。對網絡和頁面性能進行檢測,根據測試的結果進行優化。但是檢測結果只是參考,在實際的項目中肯定有特殊情況存在,并不能為了滿足某項測試結果而忽略特定情況的存在。