CSS全程是什么
css全稱:層疊樣式列表(cascading style sheets)
CSS引入方式有幾種? link 和@import 有什么區(qū)別
css引入方式:
- 內聯(lián)樣式
<h1 style="color: red;font-size: 30px">饑人谷</h1>
- 內部樣式
<style type="text/css">
h1{
color: red;
font-size: 30px;
}
</style>
<h1>饑人谷</h1>
- 外部樣式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "word.css"
</style>
- 瀏覽器默認樣式
link和@import的區(qū)別:
- link是html標簽,@import是css(一種CSS語法)
- link是寫在html中的,@import是寫在css文件中的
- 加載的時候link標簽引用的css文件會和html主體部分一起加載,@import用法的需要在加載完html之后才會加載css
- 當使用JavaScript控制DOM去改變樣式的時候,只能使用link標簽,因為@import不是DOM可以控制的
- @import可以在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 | 絕對路徑,表示Users文件目錄下hunger文件目錄下project文件目錄下css目錄下的a.css文件 |
| static/css/a.css | 主域名下static文件目錄下css文件目錄下的a.css文件 |
| http://cdn.jirengu.com/kejian1/8-1.png | 網(wǎng)站路徑,http://cdn.jirengu.com網(wǎng)站的kejian1目錄下的8-1.png文件 |
如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?
- 將圖片文件夾傳至服務器上使用相對路徑
- 使用網(wǎng)站路徑鏈接的方式
書寫規(guī)范
- 語法不區(qū)分大小寫,一般情況下都使用小寫
- 不使用內聯(lián)的style屬性定義樣式
- id和class使用有意義的單詞,分隔符使用-
- 有可能就是用縮寫
- 屬性值是0的省略單位
- 塊內容縮進
- 屬性名冒號后面添加一個空格
截圖介紹 chrome 開發(fā)者工具的功能區(qū)

Instagram Pic
- element:用于查看和編輯當前頁面中的 HTML 和 CSS 元素;編輯html標簽和css樣式;測試標簽的邊界條件
- Network:可以看到頁面向服務器請求了哪些資源、資源的大小以及加載資源花費的時間,當然也能看到哪些資源不能成功加載。此外,還可以查看HTTP的請求頭,返回內容等
- Source:用于查看和調試當前頁面所加載的腳本的源文件;斷點調試
- Resource:用于查看當前頁面所請求的資源文件,如 HTML,CSS 樣式文件等
- console:用于調試JS