CSS的全稱是什么?
英文全稱:Cascading Style Sheets
中文全稱:層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
有 4 種方式可以在 HTML 中引入 CSS。
1.行內樣式
行內樣式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。
示例:<div style="background: red"></div>
這通常是個很糟糕的書寫方式循集,它只能改變當前標簽的樣式扫尺,如果想要多個 <div> 擁有相同的樣式,你不得不重復地為每個 <div> 添加相同的樣式零远,如果想要修改一種樣式苗分,又不得不修改所有的 style 中的代碼。很顯然牵辣,行內樣式引入 CSS 代碼會導致 HTML 代碼變得冗長摔癣,且使得網頁難以維護∥诚颍
2.內部方式
內部方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼择浊。
示例:
<head>
<style>
div{
background: red;
}
</style>
</head>
內部方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中逾条,所以會使得代碼比較集中琢岩,當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式师脂。因為內部的 CSS 只對當前頁面有效担孔,所以當多個頁面需要引入相同的 CSS 代碼時,這樣寫會導致代碼冗余危彩,也不利于維護龙屉,一般用于個人自己寫demo。
- 外部樣式
外部樣式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件盗迟。
示例:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見的也是最推薦的引入 CSS 的方式脂新。使用這種方式,所有的 CSS 代碼只存在于單獨的 CSS 文件中谒府,所以具有良好的可維護性拼坎。并且所有的 CSS 代碼只存在于 CSS 文件中浮毯,CSS 文件會在第一次加載時引入,以后切換頁面時只需加載 HTML 文件即可泰鸡。
- 導入樣式
導入樣式指的是使用 CSS 規(guī)則引入外部 CSS 文件债蓝。
示例:
<style>
@import url(style.css);
</style>
方法3、4兩者都是外部引用CSS的方式盛龄,但是存在一定的區(qū)別:
區(qū)別1:link是XHTML標簽饰迹,除了加載CSS外,還可以定義RSS等其他事務余舶;@import屬于CSS范疇啊鸭,只能加載CSS。
區(qū)別2:link引用CSS時匿值,在頁面載入時同時加載赠制;@import需要頁面網頁完全載入以后加載。
區(qū)別3:link是XHTML標簽挟憔,無兼容問題钟些;@import是在CSS2.1提出的,低版本的瀏覽器不支持绊谭。
區(qū)別4:link支持使用Javascript控制DOM去改變樣式政恍;而@import不支持。
綜上所述达传,link的好處遠遠大于@import
以下這幾種文件路徑分別用在什么地方抚垃,代表什么意思?
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為絕對路徑逊朽,代表本地文件夾下a.css文件地址
/static/css/a.css為網站路徑罕伯,當前服務器根目錄下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png為網站路徑,http://cdn.jirengu.com/kejian1/8-1.png網絡路徑下的文件
如果我想在js.jirengu.com上展示一個圖片叽讳,需要怎么操作?
- 把本地圖片上傳至某網站(圖床)追他,生成一個線上地址,然后在js.jirengu.com中加載
- 在本地打開服務器岛蚤,通過localhost加載這個圖片邑狸。再將圖片放在js.jirengu.com(自己測試時可這樣使用)
列出5條以上html和 css 的書寫規(guī)范:
html
- 一定要閉合HTML標簽
- 聲明正確的文檔類型(DocType)
- 不要使用內聯(lián)樣式
- 使用小寫的標簽名
- 同一頁面,應避免使用相同的 name 與 id重名
- 標簽使用必須符合標簽嵌套規(guī)則
css
- 使用 4 個空格做為一個縮進層級涤妒,不允許使用 2 個空格 或 tab 字-
符单雾。 - 選擇器 與 { 之間必須包含空格
- 屬性名 與之后的 : 之間不允許包含空格, : 與 屬性值 之間必須包含空格
- 列表型屬性值 書寫在單行時,, 后必須跟一個空格
- 每行不得超過 120 個字符硅堆,除非單行不可分割
- 對于超長的樣式屿储,在樣式值的 空格 處或 , 后換行,建議按邏輯分組
- 當一個 rule 包含多個 selector 時渐逃,每個選擇器聲明必須獨占一行 >够掠、+、~ 選擇器的兩邊各保留一個空格
- 屬性選擇器中的值必須用雙引號包圍
- 屬性定義必須另起一行
- 屬性定義后必須以分號結尾
- 如無必要茄菊,不得為 id疯潭、class 選擇器添加類型選擇器進行限定
還有一個更健全的css規(guī)范,可自行查閱
截圖介紹 chrome 開發(fā)者工具的功能區(qū)
- Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋面殖。
- Console:記錄開發(fā)者開發(fā)過程中的日志信息袁勺,且可以作為與JS進行交互的命令行Shell。
- Sources:斷點調試JS畜普。
- Network:從發(fā)起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息(包括狀態(tài)、資源類型群叶、大小吃挑、所用時間等),可以根據(jù)這個進行網絡性能優(yōu)化街立。
- Timeline:記錄并分析在網站的生命周期內所發(fā)生的各類事件舶衬,以此可以提高網頁的運行時間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時赎离,可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)逛犹、顯示JS對象和相關的DOM節(jié)點的內存消耗、記錄內存的分配細節(jié)梁剔。
- Application:記錄網站加載的所有資源信息虽画,包括存儲數(shù)據(jù)(Local Storage、Session Storage荣病、IndexedDB码撰、Web SQL、Cookies)个盆、緩存數(shù)據(jù)脖岛、字體、圖片颊亮、腳本柴梆、樣式表等。
- Security:判斷當前網頁是否安全终惑。
- Audits:對當前網頁進行網絡利用情況绍在、網頁性能方面的診斷,并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等揣苏。
web開發(fā)調試用的最多的就是Elements悯嗓、Console、Sources卸察、Network