CSS基礎

1.css的全稱是什么仁烹?

CSS:層疊樣式表(英文全稱為Cascading Style Sheets)君仆。是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網頁,還可以配合各種腳本語言動態(tài)地對網頁各元素進行格式化。

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

(1)CSS引入方式

  • 內聯(lián)樣式引入
    代碼:
    <h1 style="color: red; font-size: 20px;"></h1>
    說明:HTML頁面不純凈埂材,文件體積大,不利于蜘蛛爬行汤求,后期維護不方便。

  • 內部樣式引入:利用style標簽严拒,將樣式放在style標簽中扬绪。下面例子中h1還有中括號部分為樣式
    代碼:

<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>
<h1>hello,world</h1>

說明:頁面使用公共CSS代碼,也是每個頁面都要定義的裤唠,如果一個網站有很多頁面挤牛,每個文件都會變大,后期維護難度也大种蘸,如果文件很少墓赴,CSS代碼也不多,這種樣式還是很不錯的航瞭。

  • 外部樣式:使用鏈接诫硕、引入的方式加載形式,有l(wèi)ink和import兩種

<link>:例子中刊侯,link建議放在head標簽中章办,因為涉及“無樣式內容閃爍”、“白屏”,JS中渲染會講到
代碼:

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

說明:實用藕届,使用頻率高挪蹭,實現(xiàn)了頁面框架代碼與表現(xiàn)CSS代碼的完全分離,使得前期制作和后期維護都十分方便

@import:例子中的兩種方式都可以引入休偶,分號一定要有梁厉,不然會報錯
代碼:

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

說明:可以靈活的引入css文件對xhtml元素進行控制。有時候也用來編寫某些css hack踏兜。但在個別文件或元素的靈活度不足词顾。

**(2)link和@import有什么區(qū)別?參考鏈接

  • 差別1:link屬于XHTML標簽庇麦,而@import完全是CSS提供的一種方式计技。
    link標簽除了可以加載CSS外,還可以做很多其它的事情山橄,比如定義RSS垮媒,定義rel連接屬性等,@import就只能加載CSS了航棱。

  • 差別2:加載順序的差別睡雇。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載饮醇,而@import引用的CSS 會等到頁面全部被下載完再被加載它抱。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候還挺明顯(夢之都加載CSS 的方式就是使用@import朴艰,我一邊下載一邊瀏覽夢之都網頁時观蓄,就會出現(xiàn)上述問題)。

  • 差別3:兼容性的差別祠墅。由于@import是CSS2.1提出的所以老的瀏覽器不支持侮穿,@import只有在IE5以上的才能識別,而link標簽無此問題毁嗦。

  • 差別4:使用dom控制樣式時的差別亲茅。當使用javascript控制dom去改變樣式的時候,只能使用link標簽狗准,因為@import不是dom可以控制的克锣。

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

  • 相對路徑

css/a.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 a.css文件的絕對路徑想鹰,在本地硬盤中真實存在的地址

  • 網絡路徑

/static/css/a.css
最前面有斜線紊婉,表示當前主域名下的路徑去尋找a.css文件,例如辑舷,主域名為localhost:8080喻犁,那么就以licalhost:8080/static/css/a.css的路徑去尋找a.css文件,如果沒有最前面的斜線何缓,就是在相對當前html的同級目錄下以static/css/a.css去尋找a.css

http://cdn.jirengu.com/kejian1/8-1.png 8-1.png被上傳到互聯(lián)網上肢础,這是它在互聯(lián)網中真實準確的地址

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

  • 將整個網站的文件夾上傳到服務器碌廓,通過相對路徑找到這張圖片
  • 將圖片上傳到某個網站保存传轰,通過網絡路徑的方式引入這張圖片

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

  • 語法不區(qū)分大小寫,但建議統(tǒng)一使用小寫
  • 不使用內聯(lián)的style屬性定義樣式
  • id和class使用有意義的單詞谷婆,分隔符建議使用-
  • 有可能就是用縮寫
  • 屬性值是0的省略單位
    ps:例如慨蛙,0px,直接使用0就行
  • 塊內容縮進
    ps:不要完全頂頭
  • 屬性名冒號后面添加一個空格
    ps:不擁擠
    詳細規(guī)范

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




最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末纪挎,一起剝皮案震驚了整個濱河市期贫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌异袄,老刑警劉巖通砍,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異烤蜕,居然都是意外死亡封孙,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門讽营,熙熙樓的掌柜王于貴愁眉苦臉地迎上來敛瓷,“玉大人,你說我怎么就攤上這事斑匪。” “怎么了锋勺?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵蚀瘸,是天一觀的道長。 經常有香客問我庶橱,道長贮勃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任苏章,我火速辦了婚禮寂嘉,結果婚禮上奏瞬,老公的妹妹穿的比我還像新娘。我一直安慰自己泉孩,他們只是感情好硼端,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著寓搬,像睡著了一般珍昨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上句喷,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天镣典,我揣著相機與錄音,去河邊找鬼唾琼。 笑死兄春,一個胖子當著我的面吹牛,可吹牛的內容都是我干的锡溯。 我是一名探鬼主播赶舆,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼趾唱!你這毒婦竟也來了涌乳?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤甜癞,失蹤者是張志新(化名)和其女友劉穎夕晓,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體悠咱,經...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡蒸辆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了析既。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片躬贡。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖眼坏,靈堂內的尸體忽然破棺而出拂玻,到底是詐尸還是另有隱情,我是刑警寧澤宰译,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布檐蚜,位于F島的核電站,受9級特大地震影響沿侈,放射性物質發(fā)生泄漏闯第。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一缀拭、第九天 我趴在偏房一處隱蔽的房頂上張望咳短。 院中可真熱鬧填帽,春花似錦、人聲如沸咙好。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽敷扫。三九已至哀蘑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間葵第,已是汗流浹背绘迁。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卒密,地道東北人缀台。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像哮奇,于是被迫代替她去往敵國和親膛腐。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內容

  • 一鼎俘、css是什么哲身? CSS全稱是Cascading Style Sheets,簡寫為CSS贸伐,稱作:層疊樣式表勘天,又稱...
    青鳴閱讀 830評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,748評論 1 92
  • CSS的全稱是什么? CSS全程是Cascading Style Sheets層疊樣式表 CSS有幾種引入方式? ...
    Taaaaaaaurus閱讀 372評論 0 1
  • 今天在簡書上看了一篇文章《喜歡我19年的那個男孩結婚了》捉邢,看完特別有感觸脯丝,突然就想到了你和我。 我和他從小一起長大...
    素絲閱讀 284評論 0 0
  • 九月傾城花未央 堯山路遙莫牽強 青絲繞指長 十月風嘯夢荒唐 前世續(xù)緣戀人唐 白發(fā)青絲藏 孤生帝王夢未求 但思留她幾...
    墨畫孤笙閱讀 213評論 0 0