CSS基礎以及屬性
一、CSS
偷個懶，啥是CSS我就不介紹啦
二、CSS語法
CSS語法：選擇符{屬性：屬性值；屬性：屬性值；}
選擇符表示要定義樣式的物件，可以是元素本身，也可以是一類元素或者制定名稱的元素.
屬性：屬性是指定選擇符所具有的屬性，它是css的核心，css2共有150多個屬性
屬性值：屬性值包括法定屬性值及常見的數值加單位，如25px，或顏色值等。
說明：
1）每個CSS樣式由兩部分組成，即選擇符和宣告，宣告又分為屬性和屬性值；
2）屬性必須放在花括號中，屬性與屬性值用冒號連線。
3）每條宣告用分號結束。
4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分先後順序。
5）在書寫樣式過程中，空格、換行等操作不影響屬性顯示。
css中的註釋：
/* 我是css的註釋 */
三、樣式的建立(內部樣式 外部樣式 內聯樣式)、兩種引入外部樣式表的區別
A、內部樣式
語法：
<style type="text/css">
/*css語句*/
</style>注：使用style標記建立樣式時，最好將該標記寫在<head></head>;
B、外部樣式
*方法一：外部樣式表的建立：
<link rel="stylesheet" type="text/css" href="目標檔案的路徑及檔名全稱" />
說明：
使用link元素匯入外部樣式表時，需將該元素寫在文件頭部，即<head>與</head>之間。
rel（relation）：用於定義文件關聯，表示關聯樣式表；
type：定義文件型別；
*方法二：外部樣式表的匯入
<style type="text/css">
@import url(目標檔案的路徑及檔名全稱);
</style>
注：@和import之間沒有空格 url和小括號之間也沒有空格；必須結尾以分號結束；
C、內聯樣式 （行間樣式，行內樣式，嵌入式樣式）
語法：<標籤 style="屬性：屬性值;屬性:屬性值;"></標籤>
四、CSS選擇符（選擇器）
常用的選擇符有十種左右
型別選擇符，id選擇符，class選擇符，萬用字元，群組選擇符、包含選擇符，偽類選擇符
1） 元素選擇符/型別選擇符（element選擇器 )
語法：元素名稱{屬性：屬性值；}
說明：
a)元素選擇符就是以文件語言物件型別作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。
b)所有的頁面元素都可以作為選擇符;
用法：
1)如果想改變某個元素得預設樣式時，可以使用型別選擇符；
（如：改變一個div、p、h1樣式）2) 當統一文件某個元素的顯示效果時，可以使用型別選擇符
（如：改變文件所有p段落樣式）
2) id選擇器
語法：#id名{屬性：屬性值;}
說明：
A）當我們使用id選擇符時，應該為每個元素定義一個id屬性
如：<div id="div1"></div>
B）id選擇符的語法格式是“#”加上自定義的id名
如：#box{width:300px; height:300px;}C) 起名時要取英文名，不能用關鍵字：(所有的標記和屬性都是關鍵字)
如：head標記
D）一個id名稱只能對應文件中一個具體的元素物件，因為id只能定義頁面中某一個唯一的元素物件。
E) 最大的用處：建立網頁的外圍結構。
3）class選擇器
語法：.class名{屬性：屬性值;}
說明：
A）當我們使用class選擇符時，應先為每個元素定義一個類名稱
B）class選擇符的語法格式是："如：<div class="top"></div>"
用法：class選擇符更適合定義一類樣式；
4)*萬用字元
語法：*{屬性：屬性值；}5）群組選擇器
說明：通配選擇符的寫法是“*”，其含義就是所有元素。
用法：常用來重置樣式。
語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}
說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合併為一組。
6） 包含選擇器
語法：選擇符1 選擇符2{屬性：屬性值;}7） 偽類選擇器(偽類選擇符)
說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2;
用法：當我的元素存在父級元素的時候，我要改變自己本身的樣式，可以不另加選擇符，直接用包含選擇器的方式解決。
語法 ：
a:link{屬性：屬性值;}超連結的初始狀態;
a:visited{屬性：屬性值;}超連結被訪問後的狀態;
a:hover{屬性：屬性值;}滑鼠懸停，即滑鼠劃過超連結時的狀態;
a:active{屬性：屬性值;}超連結被啟用時的狀態，即滑鼠按下時超連結的狀態;
要讓他們遵守一個愛恨原則LoVe/HAte,也就是Link--visited--hover--active。
說明：
A）當這4個超連結偽類選擇符聯合使用時，應注意他們的順序，正常順序為：
a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連結的樣式失效；
B）為了簡化程式碼，可以把偽類選擇符中相同的宣告提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;} 表示超連結的三種狀態都相同，只有滑鼠劃過變顏色。
五、CSS屬性
1 字型屬性（font） 字型屬性的功能是設定頁面字型的顯示樣式
font-family 設定使用的字型
常用字型："Courier New", Courier, monospace, "Times New Roman",Times, serif, Arial, Helvetica, sans-serif, Verdana
font-style 設定字型的樣式，是否斜體
oblique;(偏斜體) italic;(斜體) normal;(正常)
font-variant 設定字型的大小寫
small-caps;(小型大寫字母) normal;(正常)
font-weight 設定字型的粗細
100-900（數值100、200類推到900分為9個程度，呈遞增趨勢；100最細 900最粗） bold（粗） bolder（超粗） lighter（細） normal;(正常)
font-size 設定字型的大小
x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD；
letter-spacing 設定字間距
數值 inherit normal；
word-spacing 設定單詞間距
數值 inherit normal；
2 文字屬性（text） 文字屬性的功能是設定頁面的顯示效果
text-align 設定文字的水平對齊方式
left right center（居中對其） justify（分散對其）
text-indent 設定文字的首行縮排
數值 inherit
line-height 設定文字的行高
數值 inherit normal;
text-decoration 設定文字修飾
inherit none underline（下劃線） overline（上劃線） line-through（刪除線） blink（閃爍線）
vertical-align 設定文字的垂直對齊方式
inherit top bottom text-top text-bottom baseline middle sub super
3 背景樣式
background-color 背景顏色
數值 rgb(255,255,255)
background-image 背景圖片
url(URL) none
background-repeat 背景重複
inherit no-repeat repeat repeat-x repeat-y
background-attachment 背景固定
fixed scroll
background-position 背景定位
數值 top bottom left right center
背影複合寫法 background: 顏色 背景圖象 背景重複 背景附件 背景位置；
4 邊框樣式
border-width 邊框寬度 （包括各個方向 border-top-width border-right-width border-bottom-width border-left-width）
thin medium thick 數值
border-color 邊框顏色
數值 數值 數值 數值 數值：分別代表top、right、bottom、left顏色值
border-style 邊框風格
none hidden inherit dashed（點線） solid（實線） double（雙線） inset（凹線） outset（） ridge（脊線） groove（槽線）
邊框複合屬性寫法 border:border-width border-style color；
5 列表符號
list-style-type 列表型別
disc（圓點） circle（圓圈） square（方塊） decimal（數字） lower-roman（小寫羅馬數字）
upper-roman（大寫羅馬數字） lower-alpha（小寫字母） upper-alpha（大寫字母） none
list-style-image 圖形列表
URL
list-style-position 位置列表
inside outside