CSS基礎

1. CSS的全稱是什么?

全稱Cascading Style Sheets,意思為層疊樣式表。

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

1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢,不推薦使用。
2.內嵌式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下:
<head><style type="text/css"></style></head>
缺點是對于一個包含很多網頁的網站,在每個網頁中使用嵌入式,進行修改樣式時非常麻煩。單一網頁可以考慮使用嵌入式。
3.導入式
將一個獨立的.css文件引入HTML文件中,導入式使用CSS規則引入外部CSS文件,<style>標記也是寫在<head>標記中,使用的語法如下:
<style type="text/css"> @import"mystyle.css"; 此處要注意.css文件的路徑 </style>
導入式會在整個網頁裝載完后再裝載CSS文件,因此這就導致了一個問題,如果網頁比較大則會兒出現先顯示無樣式的頁面,閃爍一下之后,再出現網頁的樣式。這是導入式固有的一個缺陷。
4.鏈接式
也是將一個.css文件引入到HTML文件中,但它與導入式不同的是鏈接式使用HTML規則引入外部CSS文件,它在網頁的<head></head>標簽對中使用<link>標記來引入外部樣式表文件,使用語法如下:
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件,因此顯示出來的網頁從一開始就是帶樣式的效果的,它不會象導入式那樣先顯示無樣式的網頁,然后再顯示有樣式的網頁,這是鏈接式的優點。

  • link 和@import 有什么區別?
     區別1:link是XHTML標簽,除了加載CSS外,還可以定義RSS等其他事務;@import屬于CSS范疇,只能加載CSS。
     區別2:link引用CSS時,在頁面載入時同時加載;@import需要頁面網頁完全載入以后加載。
     區別3:link是XHTML標簽,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
     區別4:ink支持使用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
http://cdn.jirengu.com/kejian1/8-1.png 表示外部網站的一張圖片地址

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

先往服務器上傳圖片,并記錄路徑,之后在html文件中<body>標簽中添加img元素,指定其scr屬性和alt屬性。
例:![](/i/eg_tulip.jpg)
img標簽并不會在網頁中插入圖像,而是從網頁上鏈接圖像。img標簽創建的是被引用圖像的占位空間。
img標簽有兩個必需的屬性:src 屬性和 alt 屬性。src 屬性規定圖像的替代文本,alt 屬性規定顯示圖像的 URL。

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

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

6. 截圖介紹 chrome 開發者工具的功能區

以百度首頁為例

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

推薦閱讀更多精彩內容

  • 一、css是什么? CSS全稱是Cascading Style Sheets,簡寫為CSS,稱作:層疊樣式表,又稱...
    青鳴閱讀 862評論 0 1
  • CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(...
    饑人谷_二釉閱讀 235評論 0 1
  • CSS基礎 1. CSS簡述 CSS(Cascading Style Sheets) 中文全稱為層疊樣式表 。他是...
    熊蛋子17閱讀 538評論 0 1
  • 1.CSS的全稱是什么? 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTM...
    billa_8f6b閱讀 462評論 0 1
  • 一. 原生App和WebApp的比較 二. 使用eclipse創建安卓應用并安裝到手機 三. 把HTML5應用打包...
    掙脫吧小白閱讀 236評論 0 0