CSS的全稱是什么?
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
@charset "utf-8";
h1 {
color: red;
font-size: 20px;
/*這是注釋*/
}
a:hover{
color: red;
}
作用
- CSS不僅可以修飾靜態網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
- CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
CSS有幾種引入方式? link 和@import 有什么區別?
css的四種引入方式：
1.內聯方式
直接在 HTML 標簽中的 style 屬性中添加 CSS。
<div style="background: red"></div>
這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網頁難以維護。
2.嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。
3.鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。
4.導入方式
導入方式指的是使用 CSS 規則引入外部 CSS 文件。
<style>
@import url(style.css);
</style>
link和@import區別：
1.引用的方式不同
link(外部引用):<link rel="stylesheet" href="xxx.css" type="text/css" / >
@import(導入式):@import url(xxx.css);
2.放置的位置不同
link一般放在head標簽中
@import必須放在<style type="text/css">標簽中
3.加載方式不同
link會和dom結構一同加載渲染
@import只能能dom結構加載完成以后才能渲染頁面
4.link樣式可以被js改變，@import引入的樣式不可以
當使用 Javascript 控制 DOM 去改變樣式的時候，只能使用 link 方式，因為 @import 眼里只有 CSS ，不是 DOM 可以控制的；
5.兼容性不同
link是在xhtml的標簽，兼容IE各個版本
@import是css2.1時提出來的，只能在IE6以上進行解析。
6.加載內容不同
link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；
@import屬于CSS范疇，只能加載CSS
以下這幾種文件路徑分別用在什么地方，代表什么意思?
| 路徑 | 路徑類型 | 含義 |
|---|---|---|
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 |
絕對路徑 |
指定地址文件 |
/static/css/a.css |
網站相對路徑 |
在服務器上通過該路徑尋找相關文件 |
http://cdn.jirengu.com/kejian1/8-1.png |
網站路徑 |
網上地址 |
如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
本地圖片：上傳到圖窗，獲取url
網上圖片：直接引入圖片的url
html和 css 的書寫規范
- 語法不區分大小寫，但建議統一使用小寫
- 不使用內聯的style屬性定義樣式
- id和class使用有意義的單詞，分隔符建議使用-
- 有可能就是用縮寫
- 屬性值是0的省略單位
- 塊內容縮進
- 屬性名冒號后面添加一個空格
chrome 開發者工具的功能區
1、先打開谷歌瀏覽器，然后打開調試界面，打開方式有三種 ：
- 第一：按F12，
- 第二：shift+ctrl+i，
- 第三：鼠標右鍵點審查元素
2、功能區介紹
Element 標簽頁： 用于查看和編輯當前頁面中的 HTML 和 CSS 元素。
Console 標簽頁：用于顯示腳本中所輸出的調試信息，或運行測試腳本等。
Source 標簽頁：用于查看和調試當前頁面所加載的腳本的源文件，可以打斷點進行調試。
Network 標簽頁：用于查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。
**TimeLine 標簽頁： **用于查看腳本的執行時間、頁面元素渲染時間等信息。
Profiles 標簽頁：用于查看 CPU 執行時間與內存占用等信息。
Resource 標簽頁：用于查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件，圖片等。
Audits 標簽頁：用于優化前端頁面，加速網頁加載速度等。
