任務6-css入門

1、CSS的全稱是什么?

CSS是Cascading Style Sheets的簡稱,中文稱為層疊樣式表,用來控制網頁數據的表現,可以使網頁的表現與數據內容分離。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。

2、CSS有幾種引入方式? link 和@import 有什么區別?

1)使用HTML標簽的STYLE屬性
將STYLE屬性直接加在單個的HTML元素標簽上,控制HTML標簽的表現樣式。這種引入CSS的方式是分散靈活方便,但缺乏整體性和規劃性,不利于后期的修改和維護,當需要修改網站的樣式時,一個相同的修改可能涉及多個地方,維護成本高。使用STYLE屬性的樣式效果最強,會覆蓋掉其它幾種引入方式的相同樣式效果。

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

2)將樣式代碼寫在頁面<STYLE>...</STYLE>標簽之中
<STYLE>...</STYLE>結構可以位于頁面<HTML>標簽中的任何位置,也可以多次出現。通常是將整個<STYLE>...</STYLE>結構寫在頁面的<HEAD>...</HEAD>部分中。這種引入CSS方式的特點是每個頁面的CSS代碼可能具有統一性和規劃性,一個頁面內部便于復用和維護,但多個頁面之間的CSS代碼復用仍然不夠。

<style>
  bdoy{
    font-size:14px;
  }  
</style>

3)使用 LINK標簽,引入外部CSS文件
先將css代碼寫在一個單獨的文件中,用link標簽直接引入該文件到頁面中。一個頁面可以多次使用LINK標簽引入多個外部css文件,注意這些CSS代碼的相互影響,通常是后引入的CSS文件會覆蓋前面引入的CSS文件的相同效果。這種引入CSS的方式是目前最為流行的,可以在站個網站范圍內進行CSS代碼的規劃,方便復用和維護,但這樣將代碼高度集中,代碼量可能過大,維護不當的話又容易出現混亂。

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

4)使用@import引入CSS文件
使用@import引入CSS文件,可以放在頁面中的<style>...</style> 中,用法如下:

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

@import與Link都是外部引用CSS的方式,但是存在一定的區別:
  區別1:link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。
  區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。
  區別3:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
  區別4:link支持使用Javascript控制DOM去改變樣式;而@import不支持。

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

相對路徑
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
網絡路徑
/static/css/a.css 當前站點根目錄下的static目錄下的css目錄下的a.css文件
http: //cdn.jirengu.com/kejian1/8-1.png cdn.jirengu.com服務器上的一張png圖片URL。

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

1)可以將這張圖片上傳到jirengu.com服務器上,指向存放的目錄。
2)將這張圖片上傳到網絡上其它可提供完整url路徑的服務器上,再指向此url。

5、列出5條以上html和 css 的書寫規范

1)語法不區分大小寫,但是建議統一寫小寫
2)不使用關聯的style屬性定義樣式
3)id和class使用有意義的單詞,分隔號建議使用-
4)有可能就是用縮寫
5)屬性值是0的省略單位
6)塊內容縮進
7)屬性名冒號后面添加一個空格

6、介紹 chrome 開發者工具

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,983評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,772評論 3 422
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,947評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,201評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,960評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,350評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,406評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,549評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,104評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,914評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,089評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,647評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,340評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,753評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,007評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,834評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,106評論 2 375

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,777評論 1 92
  • 學會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,330評論 2 66
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,584評論 32 459
  • swift中的宏定義條件編譯 swift2.0 常用標注 //MARK-: 替換 #pragma mark - #...
    4164fccdcf1c閱讀 113評論 0 0
  • 張九臺渡口/前行者 蒹葭萋萋 在河之洲 成片蘆葦蕩漾 河道狹窄彎轉 綠水長流 我佇立河邊 遠處 一葉扁舟搖曳 我要...
    前行者1一常德一自由人閱讀 624評論 0 0