CSS的全稱是什么?
層疊樣式表(英語:Cascading Style Sheets,簡寫 CSS),又稱串樣式列表、級聯(lián)樣式表、串接樣式表、層疊樣式表、階層式樣式表,一種用來為結(jié)構(gòu)化文檔,如HTML 文檔或XML文檔應用,添加樣式(字體、間距和顏色等)的計算機語言,由** W3C** 定義和維護。
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
CSS的四種引入方式
- 內(nèi)聯(lián)樣式
<h1 style="color: red; font-size: 20px;"></h1> - 內(nèi)部樣式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>CSS</h1> - 外部樣式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head> - 導入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>標簽。
以下這幾種文件路徑分別用在什么地方,代表什么意思?
-
相對路徑(本地文件的相對路徑)
當前目錄下的css文件夾中的a.css
css/a.css
當前目錄中css文件夾中的a.css文件
./css/a.css
當前目錄下的b.css文件
b.css
上級目錄中的imgs 文件夾中的a圖片
../imgs/a.png -
絕對路徑(本地文件的絕對地址)
本地絕對路徑中的a.css文件
/User/hunger/project/css/a.css -
網(wǎng)站路徑
網(wǎng)站中也可以使用相對路徑
css/a.css
網(wǎng)絡中的路徑
http://cdn.jirengu.com/kejian1/8-1.png17
如果我想在某個網(wǎng)站上展示一個圖片,需要怎么操作?
- 如何網(wǎng)絡中已有圖片,可以直接通過輸入網(wǎng)站路徑展示圖片。
- 在本地中直接上傳到服務器中,使頁面展示其上傳圖片。
列出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