CSS的全稱是什么?
CSS的全稱是Cascading Style Sheet -- 層疊樣式表。
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。
CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
- 內(nèi)聯(lián)樣式
<span style="color: blue; font-size: 12px; " ></span>
- 內(nèi)部樣式
<style type="text/css">
span {
color: blue;
font-size: 12px;
}
</style>
- 外部樣式
<head>
<link rel="stylesheet" type="text/css" herf="style.css">
</head>
- 導(dǎo)入樣式
導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，在HTML初始化時，會被導(dǎo)入到HTML或者CSS文件中，成為文件的一部分， 類似第二種內(nèi)部樣式。
@import在html中使用，如下：
<style type="text/css">@import url(style.css);</style>
四種CSS引入方式的優(yōu)先級
- 就近原則
- 理論上：行內(nèi)>內(nèi)嵌>鏈接>導(dǎo)入
- 實際上：內(nèi)嵌、鏈接、導(dǎo)入在同一個文件頭部，誰離相應(yīng)的代碼近，誰的優(yōu)先級高
link和@import的區(qū)別
- link屬于html標(biāo)簽，而@import是css的語法。
- 頁面被加載時，link會同時被加載，而@import引用的css會等到頁面加載結(jié)束后加載。
- link是html標(biāo)簽，因此沒有兼容性，而@import只有IE5以上才能識別。
- link方式樣式的權(quán)重高于@import的
以下這幾種文件路徑分別用在什么地方，代表什么意思?
- 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 —— 相對路徑，當(dāng)前頁面父級目錄下的imgs文件夾下的a.png
- /Users/hunger/project/css/a.css —— 絕對路徑，本地 /Users/hunger/project/css/目錄下的a.css
- /static/css/a.css —— 當(dāng)前服務(wù)器根目錄下/static/css/中的a.css
- http://cdn.jirengu.com/kejian1/8-1.png —— 8-1.png在http://cdn.jirengu.com下的地址
如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
方法一： 把圖片上傳到服務(wù)器上直接引用相對路徑。
方法二： 把圖片上傳到網(wǎng)絡(luò)上的其他服務(wù)器，得到圖片url地址，使用這個地址展示圖片。
列出5條以上html和 css 的書寫規(guī)范
HTML常用規(guī)范(強(qiáng)制)
- 使用 4 個空格做為一個縮進(jìn)層級，不允許使用 2 個空格 或 tab 字符。
- class 必須單詞全字母小寫，單詞間以 - 分隔。
- 對于無需自閉合的標(biāo)簽，不允許自閉合,例如input、br、img、hr等
- 對 HTML5 中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽。
- 使用 HTML5 的 doctype 來啟用標(biāo)準(zhǔn)模式，建議使用大寫的 DOCTYPE。
- 頁面必須使用精簡形式，明確指定字符編碼。指定字符編碼的 meta 必須是 head 的第一個直接子元素。
- 引入 CSS 時必須指明 rel="stylesheet"。
- 頁面必須包含 title 標(biāo)簽聲明標(biāo)題。title 必須作為 head 的直接子元素，并緊隨 charset 聲明之后。
- 有文本標(biāo)題的控件必須使用 label 標(biāo)簽將其與其標(biāo)題相關(guān)聯(lián)。<label><input type="checkbox" name="confirm" value="on"> 我已確認(rèn)上述條款</label>
使用 button 元素時必須指明 type 屬性值。
其他建議規(guī)范:HTML編碼規(guī)范
CSS常用規(guī)范(強(qiáng)制)
使用 4 個空格做為一個縮進(jìn)層級，不允許使用 2 個空格 或 tab 字符。
選擇器 與 { 之間必須包含空格。
屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
列表型屬性值 書寫在單行時，, 后必須跟一個空格。font-family: Arial, sans-serif;
每行不得超過 120 個字符，除非單行不可分割。
當(dāng)一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。
/* good */
.post,
.page,
.comment { line-height: 1.5;}
/* bad */
.post, .page, .comment { line-height: 1.5;}
- >、+、~ 選擇器的兩邊各保留一個空格。
- 屬性選擇器中的值必須用雙引號包圍。
- 屬性定義必須另起一行。
- 屬性定義后必須以分號結(jié)尾。
- 文本內(nèi)容必須用雙引號包圍。
- 當(dāng)數(shù)值為 0 - 1 之間的小數(shù)時，省略整數(shù)部分的 0。
- url() 函數(shù)中的路徑不加引號。
- 長度為 0 時須省略單位。
- RGB顏色值必須使用十六進(jìn)制記號形式 #rrggbb。不允許使用 rgb()。
- 顏色值可以縮寫時，必須使用縮寫形式。
- 顏色值不允許使用命名色值。
- 需要在 Windows 平臺顯示的中文內(nèi)容，其字號應(yīng)不小于 12px。
- 其他建議規(guī)范: CSS編碼規(guī)范
截圖介紹 chrome 開發(fā)者工具的功能區(qū)
看下圖
Element 標(biāo)簽頁： 用于查看和編輯當(dāng)前頁面中的 HTML 和 CSS 元素。
Console 標(biāo)簽頁： 用于顯示腳本中所輸出的調(diào)試信息，或運(yùn)行測試腳本等。
Source 標(biāo)簽頁： 用于查看和調(diào)試當(dāng)前頁面所加載的腳本的源文件，可以打斷點進(jìn)行調(diào)試。
Network 標(biāo)簽頁： 用于查看 HTTP 請求的詳細(xì)信息，如請求頭、響應(yīng)頭及返回內(nèi)容等。
**TimeLine 標(biāo)簽頁： ** 用于查看腳本的執(zhí)行時間、頁面元素渲染時間等信息。
**Profiles 標(biāo)簽頁： ** 用于查看 CPU 執(zhí)行時間與內(nèi)存占用等信息。
Application 標(biāo)簽頁： 記錄網(wǎng)站加載的所有資源信息。
Security 標(biāo)簽頁： 判斷網(wǎng)站的安全性。
Audits 標(biāo)簽頁： 用于優(yōu)化前端頁面，加速網(wǎng)頁加載速度等。
