web開發學習之旅---css第一天

1、css全稱

• Cascade Style Sheet層疊樣式表

2、css引入方式

• 行內樣式：<h2 style="color:#0F0">Hello World</h2>
• 內部樣式：

  <style type="text/css">

   h2{color:#F00;}

  </style>

• 外部樣式：方式1：<link href=「a.css」  type=「text/css」 rel=「stylesheet」/> （推薦）, 方式二：<style type="text/css">@import url("a.css");// @import 「a.css」;</style>
• 優先級：行內樣式  > 內部樣式 > 外部樣式   就近原則
• link和@import的區別：一、@import只能引入31次css文件 二、當頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式，而後忽然樣式會出現，網速慢的時候還挺明顯。三、因爲@import是CSS2.1提出的，@import只有在IE5以上的才能識別，而link標籤無此問題

3、css選擇器

• 標記選擇器，如：h2{color:red;}
• 類選擇器，如：.a{color:red;}
• id選擇器，如：#a{color:red;}
• 優先級：id選擇器>類選擇器>標記選擇器

4、理解 !important

• 默認狀況下,CSS規則按級層覆蓋，例如在.CSS文件中的定義能夠被style標籤的定義覆蓋，反之則不行。然而,對覆蓋平衡而言,加上一個「!important」就優先於正常的CSS規則。例如：box{color:red !important;}
• ie7,ie8,firefox,chrome等高端瀏覽器下，已經能夠識別 !important屬性， 可是IE 6.0仍然不能徹底識別

5、盒子模型

• border
• padding
• margin

6、行內元素/塊元素

• 行內元素：span等
• 塊元素：div、h1~h六、p、ul、ol、table、hr等
• 二者之間轉換:display

7、overflow屬性

• 設置當對象的內容超過其指定高度及寬度時如何管理內容

8、visibility VS display屬性

• visibility 該屬性主要是爲了隱藏和顯示元素,<p style="visibility:hidden">第一段落</p> 隱藏p，佔位置。
• display 該屬性主要是爲了隱藏和顯示元素，<p style=" display:none;">第一段落</p> 隱藏p，不佔位置。

9、css浮動

• 使塊級元素並排，float:left; float:right；
• 清除浮動：clear:both;

10、絕對定位、相對定位

• 絕對定位：position:absolute; 相對於的是窗體的位置。
• 相對定位：position:relative;至關於的是其父元素的位置。

11、z-index

• CSS 中的 z-index 屬性用於設置節點的堆疊順序, 擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面, 這是咱們對z-index 屬性廣泛的認識.

12、濾鏡

• css濾鏡的標識符是「filter」，整體的應用上和其餘的css語句相同
• 網站變灰：

       <style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>

       <style type="text/css">html {filter: gray}img{filter:gray;}</style>

 

十3、background

• background-image
• background- repeat
• background-position

軟謀在線教育，最適合大學生、上班族的在線軟件培訓，主要教授asp.net動態網站製做，yy教育房間遠程實時授課，每節課錄製成高清視頻課後分享，老師白天八小時全職在線輔導，不懂就問。加qq羣：138800420 便可免費試聽。