CSS+文件路徑+chrome

**關(guān)鍵字: **

  • css
  • 文件路徑
  • html和 css 的書(shū)寫(xiě)規(guī)范
  • chrome 開(kāi)發(fā)者工具

CSS的全稱(chēng)是什么?

CSS全稱(chēng)是 Cascading Style Sheets, 層疊樣式表

CSS有幾種引入方式? link 和@import 有什么區(qū)別?

內(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>xxx</h1>```

外部樣式

<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>```

區(qū)別:

link屬于html標(biāo)簽，而@import是css提供的。
頁(yè)面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的css會(huì)等到頁(yè)面加載結(jié)束后加載。
link是html標(biāo)簽，因此沒(méi)有兼容性，而@import只有IE5以上才能識(shí)別。
link方式樣式的權(quán)重高于@import的。
使用import時(shí)需要注意的地方：該規(guī)則必須在樣式表頭部最先聲明。并且其后的分號(hào)是必需的，如果省略了此分號(hào)，外部樣式表將無(wú)法正確導(dǎo)入，并會(huì)生成錯(cuò)誤信息.

以下這幾種文件路徑分別用在什么地方，代表什么意思?

css/a.css 和 ./css/a.css

以上兩者用在當(dāng)前路徑,且都表示:指向當(dāng)前文目錄的css文件里的a.css文件

b.css :

表示當(dāng)前目錄下的b.css文件

../imgs/a.png

表示上一個(gè)目錄里imgs文件下的a.png圖片

/Users/hunger/project/css/a.css

用在本地,表示文件的絕對(duì)路徑

/static/css/a.css

用這個(gè)絕對(duì)路徑在服務(wù)器里找a.css文件

http://cdn.jirengu.com/kejian1/8-1.png

在瀏覽器里輸入這個(gè)地址找到8-1.png這張圖片

如果我想在js.jirengu.com上展示一個(gè)圖片，需要怎么操作?

Snip20170312_178.png
Paste_Image.png

列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范

html規(guī)范

    1. 縮進(jìn)與換行
      強(qiáng)制使用4個(gè)空格做為一個(gè)縮進(jìn)層級(jí)不允許使用2個(gè)空格或tab字符)[強(qiáng)制] 使用 4個(gè)空格做為一個(gè)縮進(jìn)層級(jí)，不允許使用 2個(gè)空格 或 tab字符。
      示例：
<ul> 
        <li>first</li>
        <li>second</li>
</ul>```

建議每行不得超過(guò)120個(gè)字符
**解釋?zhuān)?*
過(guò)長(zhǎng)的代碼不容易閱讀與維護(hù)。但是考慮到 HTML 的特殊性，不做硬性要求。

- 2.命名
必須單詞全字母小寫(xiě)單詞間以-分隔class
 必須單詞全字母小寫(xiě)，單詞間以 -分隔。
必須代表相應(yīng)模塊或部件的內(nèi)容或功能，不得以樣式信息進(jìn)行命名。
示例：

<div class="sidebar"></div><div class="left"></div>

- 3.
同一個(gè)頁(yè)面中，不同的元素包含相同的 id，不符合 id 的屬性含義。并且使用 document.getElementById 時(shí)可能導(dǎo)致難以追查的問(wèn)題。
 建議單詞全字母小寫(xiě)，單詞間以 -分隔。
同項(xiàng)目必須保持風(fēng)格一致。

- 4.
 標(biāo)簽名必須使用小寫(xiě)字母。
示例：

<p>Hello StyleGuide!</p>
<P>Hello StyleGuide!</P>


- 5 .  
對(duì)于無(wú)需自閉合的標(biāo)簽，不允許自閉合。
解釋?zhuān)?常見(jiàn)無(wú)需自閉合標(biāo)簽有input、br、img、hr等。
示例：

<input type="text" name="title">
<input type="text" name="title" />

- 6.
html5中規(guī)定允許省略的閉合標(biāo)簽不允許省略閉合標(biāo)簽,強(qiáng)制對(duì) HTML5
 中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽。
解釋?zhuān)?對(duì)代碼體積要求非常嚴(yán)苛的場(chǎng)景，可以例外。比如：第三方頁(yè)面使用的投放系統(tǒng)。
示例：

<ul> <li>first</li> <li>second</li></ul>
<ul> <li>first <li>second</ul>

- 7.
標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。
解釋?zhuān)?比如 div 不得置于 p 中，tbody 必須置于 table 中。
詳細(xì)的標(biāo)簽嵌套規(guī)則參見(jiàn)[HTML DTD](http://www.cs.tut.fi/~jkorpela/html5.dtd)中的 Elements
 定義部分。
- 8.
HTML標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語(yǔ)義。
解釋?zhuān)?下面是常見(jiàn)標(biāo)簽語(yǔ)義
p - 段落
h1,h2,h3,h4,h5,h6 - 層級(jí)標(biāo)題
strong,em - 強(qiáng)調(diào)
ins - 插入
del - 刪除
abbr - 縮寫(xiě)
code - 代碼標(biāo)識(shí)
cite - 引述來(lái)源作品的標(biāo)題
q - 引用
blockquote - 一段或長(zhǎng)篇引用
ul - 無(wú)序列表
ol - 有序列表
dl,dt,dd - 定義列表

示例：

<p>Esprima serves as an important
<strong>building block</strong>
for some JavaScript language tools.</p>

<div>Esprima serves as an important
<span class="strong">building block</span>
for some JavaScript language tools.</div>

## css規(guī)范
1. 語(yǔ)法不區(qū)分大小寫(xiě)，但建議統(tǒng)一使用小寫(xiě)
2. 不使用內(nèi)聯(lián)的style屬性定義樣式
3. id和class使用有意義的單詞，分隔符建議使用
4. 有可能就是用縮寫(xiě)
5.  屬性值是0的省略單位
6. 塊內(nèi)容縮進(jìn)
7. 屬性名冒號(hào)后面添加一個(gè)空格

>了解更多:

>[css規(guī)范](https://github.com/fex-team/styleguide/blob/master/css.md)
[HTML規(guī)范](https://github.com/fex-team/styleguide/blob/master/html.md)
[JavaScript規(guī)范](https://github.com/fex-team/styleguide/blob/master/javascript.md)

## 截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)


![](http://upload-images.jianshu.io/upload_images/735918-a868dd0295814141.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**以上紅框內(nèi)由左至右解釋如下:**

** Elements **:
元素面板可以自由的操作DOM和CSS來(lái)迭代布局和設(shè)計(jì)頁(yè)面.實(shí)時(shí)編輯 DOM 節(jié)點(diǎn),在 Styles 窗格中
查看和更改應(yīng)用到任何選定元素的 CSS 規(guī)則。
Console
控制臺(tái)面板: 在開(kāi)發(fā)期間，可以使用控制臺(tái)面板記錄診斷信息，或者使用它作為 shell在頁(yè)面上與
JavaScript交互。
Source:
在源代碼面板中設(shè)置斷點(diǎn)來(lái)調(diào)試 JavaScript ，或者通過(guò)Workspaces（工作區(qū)）連接本地文件
來(lái)使用開(kāi)發(fā)者工具的實(shí)時(shí)編輯器
Network: 使用網(wǎng)絡(luò)面板了解請(qǐng)求和下載的資源文件并優(yōu)化網(wǎng)頁(yè)加載性能
Timeline:也稱(chēng)性能面板工具欄,提供了對(duì)于在裝載你的Web應(yīng)用的過(guò)程中，時(shí)間花費(fèi)情況的概覽
這些應(yīng)用包括處理DOM事件, 頁(yè)面布局渲染或者向屏幕繪制元素。Timeline可以通過(guò)事件，框架,
和實(shí)時(shí)內(nèi)存用量3個(gè)方面的數(shù)據(jù)來(lái)監(jiān)測(cè)網(wǎng)頁(yè)，通過(guò)這些數(shù)據(jù)，我們可以方便的找出頁(yè)面中存在問(wèn)題的地方

Profiles(Memory) :內(nèi)存面板:如果需要比時(shí)間軸面板提供的更多信息，可以使用“配置”面板，
例如跟蹤內(nèi)存泄漏,分析web應(yīng)用或者頁(yè)面的執(zhí)行時(shí)間以及內(nèi)存使用情況；

Application :使用資源面板檢查加載的所有資源，包括IndexedDB與Web SQL數(shù)據(jù)庫(kù)，
本地和會(huì)話(huà)存儲(chǔ)，cookie，應(yīng)用程序緩存，圖像，字體和樣式表

Security :使用安全面板調(diào)試混合內(nèi)容問(wèn)題，證書(shū)問(wèn)題等等。

Audits: 分析頁(yè)面加載的過(guò)程，進(jìn)而提供減少頁(yè)面加載時(shí)間、提升響應(yīng)速度的方案

[以上參考網(wǎng)址](https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn)

---
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,109評(píng)論 1贊 92
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,866評(píng)論 32贊 459
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)？這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,365評(píng)論 0贊 8
  • 你說(shuō)熱情好美，好燙。 初識(shí)時(shí)你便癡迷于文字，我不懂，你說(shuō)書(shū)頁(yè)清香，每一頁(yè)你都留下過(guò)嘆息，我茫然。 模仿著文字為...
    Dohnanyi閱讀 272評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容