CSS的全稱是什么?
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言顷蟆。
@charset "utf-8";
h1 {
color: red;
font-size: 20px;
/*這是注釋*/
}
a:hover{
color: red;
}
作用
- CSS不僅可以修飾靜態(tài)網(wǎng)頁航闺，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化旺上。
- CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制菩混，支持幾乎所有的字體字號樣式弱贼，擁有對網(wǎng)頁對象和模型樣式編輯的能力撕攒。
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
css的四種引入方式：
1.內(nèi)聯(lián)方式
直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS陡鹃。
<div style="background: red"></div>
這通常是個很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式抖坪，如果想要多個 <div> 擁有相同的樣式萍鲸，你不得不重復(fù)地為每個 <div> 添加相同的樣式，如果想要修改一種樣式擦俐，又不得不修改所有的 style 中的代碼脊阴。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會導(dǎo)致 HTML 代碼變得冗長蚯瞧，且使得網(wǎng)頁難以維護嘿期。
2.嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對當(dāng)前的網(wǎng)頁有效埋合。因為 CSS 代碼是在 HTML 文件中备徐，所以會使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時這通常比較有利甚颂。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式坦喘。因為嵌入的 CSS 只對當(dāng)前頁面有效盲再，所以當(dāng)多個頁面需要引入相同的 CSS 代碼時，這樣寫會導(dǎo)致代碼冗余瓣铣，也不利于維護答朋。
3.鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見的也是最推薦的引入 CSS 的方式棠笑。使用這種方式梦碗，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性蓖救。并且所有的 CSS 代碼只存在于 CSS 文件中洪规，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可循捺。
4.導(dǎo)入方式
導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件斩例。
<style>
@import url(style.css);
</style>
link和@import區(qū)別：
1.引用的方式不同
link(外部引用):<link rel="stylesheet" href="xxx.css" type="text/css" / >
@import(導(dǎo)入式):@import url(xxx.css);
2.放置的位置不同
link一般放在head標(biāo)簽中
@import必須放在<style type="text/css">標(biāo)簽中
3.加載方式不同
link會和dom結(jié)構(gòu)一同加載渲染
@import只能能dom結(jié)構(gòu)加載完成以后才能渲染頁面
4.link樣式可以被js改變，@import引入的樣式不可以
當(dāng)使用 Javascript 控制 DOM 去改變樣式的時候从橘，只能使用 link 方式念赶，因為 @import 眼里只有 CSS ，不是 DOM 可以控制的恰力；
5.兼容性不同
link是在xhtml的標(biāo)簽叉谜，兼容IE各個版本
@import是css2.1時提出來的，只能在IE6以上進行解析踩萎。
6.加載內(nèi)容不同
link是XHTML標(biāo)簽停局，除了加載CSS外，還可以定義RSS等其他事務(wù)香府；
@import屬于CSS范疇董栽，只能加載CSS
以下這幾種文件路徑分別用在什么地方，代表什么意思?
| 路徑 | 路徑類型 | 含義 |
|---|---|---|
css/a.css |
相對路徑/網(wǎng)站路徑 |
同目錄下的css文件夾內(nèi)的a.css文件 |
./css/a.css |
相對路徑 |
相當(dāng)于css/a.css |
b.css |
相對路徑 |
同目錄下的b.css文件 |
../imgs/a.png |
相對路徑 |
上一級目錄下企孩，imgs文件夾下的a.png文件 |
/Users/hunger/project/css/a.css |
絕對路徑 |
指定地址文件 |
/static/css/a.css |
網(wǎng)站相對路徑 |
在服務(wù)器上通過該路徑尋找相關(guān)文件 |
http://cdn.jirengu.com/kejian1/8-1.png |
網(wǎng)站路徑 |
網(wǎng)上地址 |
如果我想在js.jirengu.com上展示一個圖片锭碳，需要怎么操作?
本地圖片：上傳到圖窗，獲取url
網(wǎng)上圖片：直接引入圖片的url
html和 css 的書寫規(guī)范
- 語法不區(qū)分大小寫柠硕，但建議統(tǒng)一使用小寫
- 不使用內(nèi)聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞，分隔符建議使用-
- 有可能就是用縮寫
- 屬性值是0的省略單位
- 塊內(nèi)容縮進
- 屬性名冒號后面添加一個空格
chrome 開發(fā)者工具的功能區(qū)
1运提、先打開谷歌瀏覽器蝗柔，然后打開調(diào)試界面，打開方式有三種 ：
- 第一：按F12焕毫，
- 第二：shift+ctrl+i简卧，
- 第三：鼠標(biāo)右鍵點審查元素
2续誉、功能區(qū)介紹
Element 標(biāo)簽頁： 用于查看和編輯當(dāng)前頁面中的 HTML 和 CSS 元素。
Console 標(biāo)簽頁：用于顯示腳本中所輸出的調(diào)試信息胁编，或運行測試腳本等厢钧。
Source 標(biāo)簽頁：用于查看和調(diào)試當(dāng)前頁面所加載的腳本的源文件，可以打斷點進行調(diào)試嬉橙。
Network 標(biāo)簽頁：用于查看 HTTP 請求的詳細信息早直，如請求頭、響應(yīng)頭及返回內(nèi)容等市框。
**TimeLine 標(biāo)簽頁： **用于查看腳本的執(zhí)行時間霞扬、頁面元素渲染時間等信息。
Profiles 標(biāo)簽頁：用于查看 CPU 執(zhí)行時間與內(nèi)存占用等信息枫振。
Resource 標(biāo)簽頁：用于查看當(dāng)前頁面所請求的資源文件喻圃，如 HTML，CSS 樣式文件粪滤，圖片等斧拍。
Audits 標(biāo)簽頁：用于優(yōu)化前端頁面，加速網(wǎng)頁加載速度等杖小。
