css概述、css樣式表分類、選取器分類、css基礎樣式

標籤：family   image   isp   sheet   strong   enter   通過   垂直置中   網頁   

1 .  樣式表  Cascading Style Sheet     css優勢：

•     內容與表現分離
•     網頁的表現統一，容易修改
•     豐富的樣式，使網頁布局更加靈活
•     減少網頁代碼量，增加網頁的瀏覽速度，節省網路頻寬
•     使用獨立於網頁的CSS，有利於網頁被搜尋引擎收錄
•     嵌入ID>外部ID>嵌入class>外部class>嵌入標籤>外部標籤

    1.1  引入方式           四種

•  style=""  行內樣式表
•  <style>   內部樣式表
•  <link rel="stylesheet"  href="" />  外部樣式表  （使用最多）
•  <style>@import ""</style>  匯入方式，盡量不要使用！！！

    1.2   引入方式優先順序          行內>內部>外部>匯入     1.3   連結式和匯入式的區別：

•   <link/>標籤屬於XHTML，@import屬於CSS2.1；
•   使用<link/>連結的CSS檔案先載入到網頁當中，再進行編譯顯示；
•   使用@import匯入的CSS檔案，用戶端顯示HTML結構，再把CSS檔案載入到網頁中；
•    @import是CSS2.1特有的，對於不相容CSS2.1的瀏覽器來說就是無效的；

 2.   選取器    2.1 哪幾種選取器和它的優先順序         ID選取器  #   一個HTML文檔中只能有一個相同名字的ID         CLASS選取器  .  可以有多個         元素    p            萬用字元  *     2.2 選取器的優先順序         ID > CLASS > 元素 > *  3 .  基本的幾個樣式（常用於文本，圖片，列表）

background背景

    1.background-color  背景色  （16進位數  rgb  rgba  英文名）

    2.background-image 背景圖

    3.background-size 背景大小 （像素、百分比）

    4.background-repeat  （repeat-x  repeat-y  no-repeat）

    5.background-position  (通過方向值來指定，通過百分比指定，通過確切的像素值指定)

    6.background-attachment  是否隨著瀏覽器滾動，使用它圖片會相對瀏覽器固定住（bg-position和bg-attachment不要一起使用）

    7.background複合屬性  可以把之前的屬性定義在這一個裡面，【一般書寫順序：顏色、圖片、是否重複、是否固定、位置】

 

color顏色

1. color  規定文本的顏色
2. opacity  設定元素的透明度  ，1不透明   0完全透明

 

font字型

1. font-style 指定文本的字型樣式（正常、斜體）
2. font-variant 指定文本是否為小型的大寫字母（對英文起作用）
3. font-weight 指定文字的粗細（只有兩種樣式）  bold  粗體
4. font-size 指定文本字型大小 
5. font-family 定義文本使用某個字型

中文字型font-family常用列表http://www.cnblogs.com/jihua/p/cnfont.html

 font 複合屬性

   一般順序：字型樣式、是否為小號大寫字、字型粗細、字型大小、字型

 

 text文字屬性

        color , text-align , line-height ,  letter-spacing , vertical-align ，text-indent ,text-decoration ;

-----【vertical-align----->1. 常用於文字框input ，2. 結合{display：table-cell;}可用於將圖片垂直置中 】

-----【valign----->只適用於table中的儲存格,例如<td valign=‘top‘ height=‘100px‘>this is cell</td> 】

-----【align----->適用於<hr/>,例如：<hr align="right" width="200" size="20" color="pink"/> ；

　　　　　　　　　<table>，例如：<table border="1" width="300" align="center">······</table> ；

　　　　　　　　　<img/>,例如：<img src="ika.jpg" align="top" /> <span>文本相對於圖片頂部顯示 </span> ；

　　　　　　　　　·····等等，不再一一列舉；】

     <------學習筆記，如有錯誤，謝謝指正！-------> 

css概述、css樣式表分類、選取器分類、css基礎樣式