css基礎

1. CSS的全稱是什么?

層疊樣式表 (Cascading Style Sheets,常縮寫記作 CSS), 是一種 樣式表 語言,用來描述 HTMLXML(包括如 SVGXHTML 之類的 XML 分支語言)文檔的呈現。CSS 描述了在屏幕、紙質、音頻等其它媒體上的元素應該如何被渲染的問題。

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

一、內聯引用CSS

將STYLE屬性直接加在個別的元件標簽里,<元件(標簽) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}
例如:

<td style="color:#c00; font-size:15px; line-height:18px;>
模板無憂 - www.mb5u.com
</td>
  • 優點:可靈巧應用樣式於各標簽中。方便于編寫代碼時的使用。
  • 缺點:沒有整篇文件的“統一性”,在需要修改某樣式的時候也變的比較困難。
二、內部引用CSS

將樣式規則寫在<STYLE>...</STYLE>標簽之中。

<STYLE TYPE="text/CSS">
<!--
樣式規則表
--> 
</STYLE>

通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。

  • 優點:整篇文章有了統一性,只要是有聲明的的元件即會套用該樣式規則。
  • 缺點:個別元件的靈活度不足,整站的功能性較弱。
三、外部引用 link 標簽引用CSS

將樣式規則寫在.css的樣式文件中,再以<link>標簽引入。
假設我們把樣式規則存成一個example.css的檔案,我們只要在網頁中加入:

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

這樣引入該css樣式表文件以后,就可以直接套用該樣式檔案中所制定的樣式了。 通常是將link標簽寫在網頁的<head></head>部份之中。

  • 優點:可以把要套用相同樣式規則的數篇文件都指定到同一個樣式文件中,可以進行統一的修改,也便于整站的設置有統一的風格。
    一般css網頁布局都使用此種方法。
  • 缺點:在個別文件或元素的靈活度不足。
四、外部引用 @import 引用CSS

跟link方法很像,但必須放在<STYLE>...</STYLE> 中:

<STYLE TYPE="text/css">
<!--
@import url(引入的樣式表的位址、路徑與檔名);
-->
</STYLE>

例如:

<STYLE TYPE="text/css">
<!--
@import url(css/example.css);
-->
</STYLE>

要注重的是,行末的分號是必須的!千萬不能漏寫!

  • 優點:可以靈活的引入css文件對xhtml元素進行控制。有時候也用來編寫某些css hack。
  • 缺點:在個別文件或元素的靈活度不足。

link 和@import 有什么區別?

  • 差別1:老祖宗的差別。link屬于XHTML標簽,而@import完全是CSS提供的一種方式。
    link標簽除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
  • 差別2:加載順序的差別。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加 載,而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢 的時候還挺明顯(夢之都加載CSS的方式就是使用@import,我一邊下載一邊瀏覽夢之都網頁時,就會出現上述問題)。
  • 差別3:兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。
  • 差別4:使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的。

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

1. css/a.css

同級目錄下,css文件夾中的a.css文件

2. ./css/a.css

同上,標準寫法

3. b.css

當前目錄下的b.css文件

4. ../imgs/a.png

上級目錄下,imgs文件夾中的a.png文件

5. /Users/hunger/project/css/a.css

以絕對路徑的方式在本地計算機上找到a.css文件

6. /static/css/a.css

以絕對路徑的方式在服務器上找到a.css文件

7. http://cdn.jirengu.com/kejian1/8-1.png

通過網址找到8-1.png文件

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

  • 穩定的做法:上傳到服務器內部并用相對路徑讀取。減小服務器壓力的做法
  • 在img標簽的src屬性中填寫圖片的網絡路徑,即可展示圖片
![](圖片網址)

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

HTML書寫規范:

  • 為每個HTML頁面的第一行添加標準模式(standard mode)的聲明
  • HTML屬性應當按照一定的順序依次排列,來確保代碼的易讀性
  • 標簽、屬性、屬性命名由小寫英文、數字和_組成,且所有標簽必須閉合,屬性值必須用雙引號""
  • 避免使用中文拼音盡量簡易并要求語義化
  • 多用無兼容性問題的HTML內置標簽

CSS書寫規范:

  • 語法不區分大小寫,但建議統一使用小寫
  • 不使用內聯的style屬性定義樣式
  • id和class使用有意義的單詞,分隔符建議使用-
  • 屬性值是0的省略單位
  • 塊內容縮進
  • 屬性的冒號后一個空格

6. chrome開發者工具介紹:

  • 移動開發


  • 頁面與樣式


  • javascript相關



  • 資源相關




最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、css是什么? CSS全稱是Cascading Style Sheets,簡寫為CSS,稱作:層疊樣式表,又稱...
    青鳴閱讀 889評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,809評論 1 92
  • CSS全稱層疊樣式表(Cascading Style Sheets) CSS的幾種引入方式 行間樣式(寫在html...
    尾巴尾巴尾巴閱讀 229評論 0 1
  • 1.CSS的全稱是什么? CSS全稱是 Cascading Style Sheets, 層疊樣式表。CSS不僅可以...
    FLYSASA閱讀 334評論 0 1
  • 1.CSS簡介 CSS 的全稱是Cascading Style Sheets,層疊樣式表 2.CSS的引入方式 內...
    毛毛獨角獸閱讀 335評論 0 0