CSS基礎

1.CSS的全稱是什么?

層疊樣式表(英文全稱:Cascading Style Sheets)
是一種用來表現(xiàn)HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言雌桑。CSS不僅可以靜態(tài)地修飾網(wǎng)頁垃瞧,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式莫辨,擁有對網(wǎng)頁對象和模型樣式編輯的能力。


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

引入方式:
在HTML中引入CSS的方法主要有四種路呜,它們分別是行內(nèi)式刽射、內(nèi)嵌式、鏈接式和導入式补鼻。

1.行內(nèi)式(內(nèi)聯(lián)式)
行內(nèi)式是在標記的style屬性中設定CSS樣式哄啄。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢,不推薦使用风范。如下:

 <div style="color:red">123</div>

2.內(nèi)嵌式
嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標簽對的<style></style>標簽對中咨跌。
缺點是對于一個包含很多網(wǎng)頁的網(wǎng)站,在每個網(wǎng)頁中使用嵌入式硼婿,進行修改樣式時非常麻煩锌半。單一網(wǎng)頁可以考慮使用嵌入式。
如下:

<head>
   <style type="text/css">
    ...CSS樣式
   </style>
</head>

3.鏈接式
也是將一個.css文件引入到HTML文件中加酵,但它與導入式不同的是鏈接式使用HTML規(guī)則引入外部CSS文件拳喻,它在網(wǎng)頁的<head></head>標簽對中使用<link>標記來引入外部樣式表文件,如下:

<link href="style.css" rel="stylesheet" type="text/css"/>

4.導入式
將一個獨立的.css文件引入HTML文件中猪腕,導入式使用CSS規(guī)則引入外部CSS文件冗澈,<style>標記也是寫在<head>標記中,如下:

<style>
   @import url("style.css");
   @import "css.css"
</style>

link 和@import的區(qū)別:

  1. 語法結(jié)構差別 link屬于HTML標簽陋葡,只能放入html源代碼中使用亚亲,而@import是CSS提供的一種方式,只能加載CSS了腐缤。
  1. 加載順序的差別 link引用的CSS會在一個頁面被加載的時候(就是被瀏覽者瀏覽的時候)同時被加載捌归,而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍)岭粤。
  1. 兼容性的差別 由于@import是CSS2.1提出的所以老的瀏覽器不支持惜索,@import只有在IE5以上的才能識別,而link標簽無此問題剃浇。
  1. 使用dom控制樣式時的差別 當使用javascript控制dom去改變樣式的時候巾兆,只能使用link標簽,因為@import不是dom可以控制的虎囚。

3.以下這幾種文件路徑分別用在什么地方角塑,代表什么意思?

  • css/a.css(當前目錄下css文件夾內(nèi)a.css文件)
  • ./css/a.css(當前目錄下css文件夾內(nèi)a.css文件)
  • b.css(當前目錄下b.css文件)
  • ../imgs/a.png(上一層目錄下imgs目錄中a.png文件)
  • /Users/hunger/project/css/a.css(本地絕對路徑中的a.css文件)
  • /static/css/a.css(本地絕對路徑中的a.css文件)
  • (http://cdn.jirengu.com/kejian1/8-1.png) (網(wǎng)站的圖片地址)

4. 如果我想在js.jirengu.com上展示一個圖片,需要怎么操作?

方法:

  1. 把圖片上傳到網(wǎng)站服務器淘讥,在頁面中使用相對路徑引用圃伶,如:../imgs/a.png
  2. 在頁面中使用絕對路徑,引用其他網(wǎng)站中的圖片,如:http://cdn.jirengu.com/kejian1/8-1.png

5. 列出5條以上html和 css 的書寫規(guī)范

HTML書寫規(guī)范

  • id元素必須保證頁面唯一窒朋。
  • 同一頁面搀罢,應避免使用相同的 name 與 id。
  • 標簽使用必須符合標簽嵌套規(guī)則炼邀。
  • 屬性值必須用雙引號包圍魄揉。
  • 引入 CSS 時必須指明 rel="stylesheet"。
  • title 必須作為 head 的直接子元素拭宁,并緊隨 charset 聲明之后洛退。

CSS書寫規(guī)范

  • 語法不區(qū)分大小寫,但建議統(tǒng)一使用小寫
  • 當一個 rule 包含多個 selector 時杰标,每個選擇器聲明必須獨占一行兵怯。
  • 屬性定義后必須以分號結(jié)尾。
  • 不使用內(nèi)聯(lián)的style屬性定義樣式
  • id和class使用有意義的單詞腔剂,分隔符建議使用-
  • 屬性值是0的省略單位
  • 塊內(nèi)容縮進
  • 屬性名冒號后面添加一個空格

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

chrome調(diào)試.png

面板上包含了Elements面板媒区、Console面板、Sources面板掸犬、Network面板袜漩、Timeline面板、Profiles面板湾碎、Application面板宙攻、Security面板、Audits面板這些功能面板介褥。

** 這些面板的功能點如下:**

  1. Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋座掘。

  2. Console:記錄開發(fā)者開發(fā)過程中的日志信息,且可以作為與JS進行交互的命令行Shell柔滔。

  3. Sources:查看網(wǎng)站包含的html溢陪,css,js等文件睛廊,可以在js文件中打斷點調(diào)試

  4. Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息(包括狀態(tài)形真、資源類型、大小超全、所用時間等)咆霜,可以根據(jù)這個進行網(wǎng)絡性能優(yōu)化。

  5. Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件卵迂,以此可以提高網(wǎng)頁的運行時間的性能裕便。

  6. Profiles:如果你需要Timeline所能提供的更多信息時绒净,可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)见咒、顯示JS對象和相關的DOM節(jié)點的內(nèi)存消耗、記錄內(nèi)存的分配細節(jié)挂疆。

  7. Application:記錄網(wǎng)站加載的所有資源信息改览,包括存儲數(shù)據(jù)(Local Storage下翎、Session Storage、IndexedDB宝当、Web SQL视事、Cookies)、緩存數(shù)據(jù)庆揩、字體俐东、圖片、腳本订晌、樣式表等虏辫。

  8. Security:判斷當前網(wǎng)頁是否安全。

  9. Audits:對當前網(wǎng)頁進行網(wǎng)絡利用情況锈拨、網(wǎng)頁性能方面的診斷砌庄,并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等奕枢。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末娄昆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子缝彬,更是在濱河造成了極大的恐慌萌焰,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件跌造,死亡現(xiàn)場離奇詭異杆怕,居然都是意外死亡,警方通過查閱死者的電腦和手機壳贪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門陵珍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人违施,你說我怎么就攤上這事互纯。” “怎么了磕蒲?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵留潦,是天一觀的道長。 經(jīng)常有香客問我辣往,道長兔院,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任站削,我火速辦了婚禮坊萝,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己十偶,他們只是感情好菩鲜,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惦积,像睡著了一般接校。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上狮崩,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天蛛勉,我揣著相機與錄音,去河邊找鬼睦柴。 笑死董习,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的爱只。 我是一名探鬼主播皿淋,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼恬试!你這毒婦竟也來了窝趣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤训柴,失蹤者是張志新(化名)和其女友劉穎哑舒,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體幻馁,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡洗鸵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了仗嗦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膘滨。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖稀拐,靈堂內(nèi)的尸體忽然破棺而出火邓,到底是詐尸還是另有隱情,我是刑警寧澤德撬,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布铲咨,位于F島的核電站,受9級特大地震影響蜓洪,放射性物質(zhì)發(fā)生泄漏纤勒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一隆檀、第九天 我趴在偏房一處隱蔽的房頂上張望摇天。 院中可真熱鬧北滥,春花似錦、人聲如沸闸翅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坚冀。三九已至,卻和暖如春鉴逞,著一層夾襖步出監(jiān)牢的瞬間记某,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工构捡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留液南,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓勾徽,卻偏偏與公主長得像滑凉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子喘帚,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容

  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 368評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案畅姊? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,734評論 1 92
  • 一、css是什么吹由? CSS全稱是Cascading Style Sheets若未,簡寫為CSS,稱作:層疊樣式表倾鲫,又稱...
    青鳴閱讀 816評論 0 1
  • CSS基礎 本文包括CSS基礎知識選擇器(重要4趾稀!N谖簟)繼承隙疚、特殊性、層疊磕道、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,066評論 0 40