JavaWeb學習筆記02--CSS

上一篇：JavaWeb學習筆記01–HTML
下一篇：JavaWeb學習筆記03–JS（1）

CSS：頁面控制

1. CSS概念：

   Cascading Style Sheets 層疊樣式表。（ 層疊：多個樣式可以作用在同一個html的元素上，同時生效。）
   CSS是一種用來表現HTML或XML等文件樣式的計算機語言，不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

2. CSS優點：

   2.1 樣式定義多樣
   CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；允許爲任何元素創建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

   2.2 易於使用和修改
   CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。

   2.3 可以壓縮頁面
   在使用HTML定義頁面效果的網站中，往往需要大量或重複的HTML標籤，使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。

   2.4. 將內容展示和樣式控制分離
   降低耦合度，在工作過程中將內容和樣式分開讓分工協作更容易，進而提高開發效率。

   2.5. 多頁面應用
   CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。

3. CSS的使用：

   3.1 CSS與html結合方式

   1. 內聯樣式
      *.在標籤內使用style屬性指定css代碼
      *.如：
      

      *.優點:可以單獨什麼某個元素樣式，缺點：不利於樣式重用 。

   2. 內部樣式
      *. 在head標籤內，定義style標籤，style標籤的標籤體內容就是css代碼
      *. 如：
      

   3. 外部樣式

      1. 定義css資源文件。
         鏈接式：
      2. 在head標籤內，定義link標籤，引入外部的資源文件
         • a.css文件：
           

   注意：
   * 1,2,3種方式 css作用範圍越來越大
   * 1方式不常用，後期常用2,3
   * 3種格式可以寫爲：
   
   備註:link和@import區別：
   1.link所有瀏覽器都支持，@import某些版本低的IE不支持
   2.@import是等待html加載完成才加載，link解析到這個語句，就加載
   3.@import不支持js動態修改

4. css語法：

 * 格式：
		選擇器 {
	屬性名1:屬性值1;
		屬性名2:屬性值2;
		...
	}
* 選擇器:篩選具有相似特徵的元素
* 注意：
	* 每一對屬性需要使用；隔開，最後一對屬性可以不加；

5. 選擇器：
   5.1 選擇器的作用：篩選具有相似特徵的元素
   5.2 選擇器的分類：

5.2.1:基礎選擇器
	1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
	    * 語法：#id屬性值{}
	2. 元素選擇器：選擇具有相同標籤名稱的元素
	    * 語法： 標籤名稱{}
	    * 注意：id選擇器優先級高於元素選擇器
	3. 類選擇器：選擇具有相同的class屬性值的元素。
	    * 語法：.class屬性值{}
	    * 注意：類選擇器選擇器優先級高於元素選擇器

5.2.2. 擴展選擇器：
	1. 選擇所有元素：
		* 語法： *{}
	2. 並集選擇器：
		* 選擇器1,選擇器2{}
	3. 子選擇器：篩選選擇器1元素下的選擇器2元素
		* 語法：  選擇器1 選擇器2{}
	4. 父選擇器：篩選選擇器2的父元素選擇器1
		* 語法：  選擇器1 > 選擇器2{}
	5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
		* 語法：  元素名稱[屬性名="屬性值"]{}
	6. 僞類選擇器：選擇一些元素具有的狀態
		* 語法： 元素:狀態{}
		* 如： <a>
			* 狀態：
				* link：初始化的狀態
				* visited：被訪問過的狀態
				* active：正在訪問狀態
				* hover：鼠標懸浮狀

6. CSS屬性

• 6.1 字體屬性

.font-size:設置字體大小
.font-family:設置文字的字體,常見的值爲 :黑體，宋體，楷體等
.font-style:規定斜體字,常見的值：
                     normal - 文本正常顯示
                     italic - 文本斜體顯示 字體斜體
                     oblique - 文本傾斜顯示 變形斜體
.font-weight 屬性設置文本的粗細。關鍵字 100 ~ 900 爲字體指定了 9 級加粗度。
                      100 對應最細的字體變形，900 對應最粗的字體變形。
                      數字 400 等價於 normal，而 700 等價於 bold。 
font:italic bold 30px "幼圓","黑體"; /*style  weight  size family  swsf*/

• 6.2 文本屬性

 .color:設置文本顏色
 .text-indent:縮進元素中文本的首行,取值類型如下：
       text-indent:5em;表示此段落第一行縮進5個字符的寬度
       text-indent:20%:表示此段落第一行縮進父容器寬度的百分之二十
 .text-decoration:
      none:會關閉原本應用到一個元素上的所有裝飾
      underline: 添加下劃線
      overline:在文本的頂端畫一個上劃線
      line-through:在文本中間畫一個貫穿線
      blink:讓文本閃爍(無效果)
 .text-align:一個元素中的文本行互相之間的對齊方式,值有left(左對齊)、right(右對齊) 和 center(居中)
 .word-spacing: 字符之間的間隔
 .letter-spacing: 單詞或者字母之間的間隔
 .line-height:設置行高 line-height:25px;

• 6.3 背景屬性：

 .background-color：設置背景顏色，默認透明
 .background-image:url("圖片路徑"):設置背景圖片
 .background-repeat:repeat-y:只在垂直方向都平鋪
          repeat-x:只在水平方向都平鋪
          repeat:在水平垂直方向都平鋪
          no-repeat:任何方向都不平鋪
 .background-position: 改變圖像在背景中的位置。top、bottom、left、right 和 center 

• 6.4 列表屬性：

 .list-style-type:decimal;改變列表的標誌類型
 .list-style-image: url("images/dog.gif");用圖像表示標誌
 .list-style-position: inside;確定標誌出現在列表項內容之外還是內容內部 

 list-style: decimal url(img/001.png) inside;
 去掉樣式:
 list-style:none;
 list-style-type:none;

• 6.5 輪廓屬性：

 .width:設置元素的寬度
 .height:設置元素的高度
 顯示屬性(display)
 .display: none 不顯示
         block:塊級顯示
         inline:行級顯示
         inline-block:行級塊
  輪廓（outline）
  繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
  常用屬性：
  .outline-style:solid(實線)/dotted(虛線)/dashed(虛線，虛線的每段較長)/double(框爲空心);設置輪廓的樣outline-color:red;設置輪廓的顏色
  .outline-width:10px設置輪廓的寬度

• 6.6 浮動屬性：

浮動(float)的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。

• 6.7 clear屬性

 .left      在左側不允許浮動元素。           
 .right     在右側不允許浮動元素。           
 .both      在左右兩側均不允許浮動元素。        
 .none      默認值。允許浮動元素出現在兩側。      
 .inherit   規定應該從父元素繼承 clear 屬性的值。

• 6.8 定位屬性

 .靜態定位（默認定位方式）static
 .相對定位(relative)
  元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留
 .絕對定位(absolute)
  元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框.
 .固定定位(fixed)
  元素框的表現類似於將 position 設置爲 fixed，不過其包含塊是視窗本身。

• 6.9 邊框屬性

 .border-style:邊框樣式，值有以下情況：
        solid:實線
        double:空心線
        dashed:虛線組成的邊框
        dotted:圓點組成的邊框
 .border-color:邊框顏色
 .border-width:邊框寬度
 .border: 1px solid red;

• 6.10 外邊距屬性

.margin:外間距,邊框和邊框外層的元素的距離
.margin:四個方向的距離(top right bottom left)
.margin-top:
.margin-bottom:
.margin-left:
.margin-right:

• 6.11 內邊距屬性

  .padding:內間距,元素內容和邊框之間的距離((top right bottom left)) 
     .padding-left:
     .padding-right:
     .padding-top:
     .padding-bottom:

上一篇：JavaWeb學習筆記01–HTML
下一篇：JavaWeb學習筆記03–JS（1）