css基礎知識一

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。

  1. 外部樣式
      外部樣式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件盗迟。
    示例:
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式脂新。使用這種方式,所有的 CSS 代碼只存在于單獨的 CSS 文件中谒府,所以具有良好的可維護性拼坎。并且所有的 CSS 代碼只存在于 CSS 文件中浮毯,CSS 文件會在第一次加載時引入,以后切換頁面時只需加載 HTML 文件即可泰鸡。

  1. 導入樣式
      導入樣式指的是使用 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上展示一個圖片叽讳,需要怎么操作?

  1. 把本地圖片上傳至某網站(圖床)追他,生成一個線上地址,然后在js.jirengu.com中加載
  2. 在本地打開服務器岛蚤,通過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ū)

chrome開發(fā)者工具
  1. Elements:查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋面殖。
  2. Console:記錄開發(fā)者開發(fā)過程中的日志信息袁勺,且可以作為與JS進行交互的命令行Shell。
  3. Sources:斷點調試JS畜普。
  4. Network:從發(fā)起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息(包括狀態(tài)、資源類型群叶、大小吃挑、所用時間等),可以根據(jù)這個進行網絡性能優(yōu)化街立。
  5. Timeline:記錄并分析在網站的生命周期內所發(fā)生的各類事件舶衬,以此可以提高網頁的運行時間的性能。
  6. Profiles:如果你需要Timeline所能提供的更多信息時赎离,可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)逛犹、顯示JS對象和相關的DOM節(jié)點的內存消耗、記錄內存的分配細節(jié)梁剔。
  7. Application:記錄網站加載的所有資源信息虽画,包括存儲數(shù)據(jù)(Local Storage、Session Storage荣病、IndexedDB码撰、Web SQL、Cookies)个盆、緩存數(shù)據(jù)脖岛、字體、圖片颊亮、腳本柴梆、樣式表等。
  8. Security:判斷當前網頁是否安全终惑。
  9. Audits:對當前網頁進行網絡利用情況绍在、網頁性能方面的診斷,并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等揣苏。

web開發(fā)調試用的最多的就是Elements悯嗓、Console、Sources卸察、Network

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末脯厨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子坑质,更是在濱河造成了極大的恐慌合武,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涡扼,死亡現(xiàn)場離奇詭異稼跳,居然都是意外死亡,警方通過查閱死者的電腦和手機吃沪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門汤善,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人票彪,你說我怎么就攤上這事红淡。” “怎么了降铸?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵在旱,是天一觀的道長。 經常有香客問我推掸,道長桶蝎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任谅畅,我火速辦了婚禮登渣,結果婚禮上,老公的妹妹穿的比我還像新娘毡泻。我一直安慰自己绍豁,他們只是感情好,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布牙捉。 她就那樣靜靜地躺著竹揍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪邪铲。 梳的紋絲不亂的頭發(fā)上芬位,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天,我揣著相機與錄音带到,去河邊找鬼昧碉。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的被饿。 我是一名探鬼主播四康,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼狭握!你這毒婦竟也來了闪金?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤论颅,失蹤者是張志新(化名)和其女友劉穎哎垦,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恃疯,經...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡漏设,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了今妄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片郑口。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖盾鳞,靈堂內的尸體忽然破棺而出犬性,到底是詐尸還是另有隱情,我是刑警寧澤雁仲,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站琐脏,受9級特大地震影響攒砖,放射性物質發(fā)生泄漏。R本人自食惡果不足惜日裙,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一吹艇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧昂拂,春花似錦受神、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至联四,卻和暖如春撑碴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背朝墩。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工醉拓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓亿卤,卻偏偏與公主長得像愤兵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子排吴,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案秆乳? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 知識點導航 一、CSS初步認識<p> CSS整體感知 css 是 cascading style sheet 層疊...
    lanvy閱讀 400評論 0 2
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,518評論 32 459
  • 記得我第一次講王小波的《一只特立獨行的豬》,備課的時候心潮澎湃憋槐,心想如何讓這篇文章打破學生一潭死水的生活双藕。講...
    關念閱讀 30,050評論 27 77
  • 到部室工作快一個月了,還沒開始工作就去學習了阳仔,回來還沒理清工作內容就要背題準備競賽忧陪,把工作一再向后壓縮,很焦...
    朱明君閱讀 180評論 0 0