CSS第一課
- CSS簡介
CSS和HTML一樣，也是一種標識語言，代碼也很簡單，也需要通過瀏覽器解釋執行，也可以用任何文本編輯器編寫，其文件擴展名爲“.CSS”。
- CSS主要功能
CSS的主要功能是美化頁面，並且使得網頁的內容和樣似進行分離（類似於化妝，整容^^）。
使用方法
內聯樣式、行內樣式
格式：
<標籤名 style="CSS代碼">
第一個代碼!
</標籤名>
例：
<p style="color: blue;">
第一個代碼
</p>
結：
這樣的話，p裏面的文字“第一行代碼”的顏色color就會變成藍色blue。
內部樣式
格式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
CSS代碼
</style>
</head>
例：
<style>
p{
color: blue;
}
</style>
結：
這樣的話，p裏面的文字的顏色color就會變成藍色blue。
外部樣式
創建一個單獨的CSS文件，在html的head標籤中使用link標籤引入，後兩項是可選條件
格式：
<link href="CSS文件的路徑" type="text/CSS" rel="stylesheet">
例：
<link rel="stylesheet" type="text/CSS" href="../CSS/第一課.CSS">
在這裏需要在外面創建一個CSS文件
p{
color: blue;
}
結：
現在對css文件裏面的條件進行添加，p標籤的顏色也變成了藍色。
導入的方式
和link方式一樣，但是有的瀏覽器不能用，所以不常用，瞭解即可
格式
<style>
@import url("導入CSS文件的路徑");
</style>
css文件不變
CSS的基本語法
CSS規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector{declaration1;declaration2…declarationN}
選擇器通常是你需要改變的樣式的html元素。選擇器包括多種形式，所有的html標籤都可以作爲選擇符，如body p table等
每條聲明由一個屬性和一個值組成
property表示要格式化的屬性的名稱，value表示要格式化的屬性的取值，每個屬性有每個值。
selector{property:value;property:value;…}
插入CSS樣式表
格式：
CSS選擇器{
屬性名：屬性值;
屬性名；屬性值;
...
}
例：
p{
color: blue;
}
CSS特性
繼承性
- 層疊性是指同一個HTML文件引用了多個樣式表文件時，瀏覽器會按照樣式定義的先後層次來應用樣式，如果不考慮樣式的優先級，一般都遵守“最近優先原則”。
- CSS樣式對內容控制能力的基礎就在於HTML文檔結構圖中的家族繼承關係。
- 子級元素會繼承父級元素的樣式，並且只繼承本身沒有定義的屬性。
標籤選擇器
標籤選擇器是指用HTML標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：
標籤名{屬性1:屬性值1; 屬性2:屬性值2; …屬性n:屬性值n; }
使用標籤選擇器的優缺點
- 優點：能夠快速爲頁面中同類型的標籤統一樣式。
- 缺點：不能設計差異化樣式，有時候會相互干擾
類選擇器
類選擇器使用“.”（英文點號）進行標識，後面緊跟類名，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; …屬性n:屬性值n; }
該語法中，類名即爲HTML元素的class屬性值，大多數HTML元素都可以定義class屬性。類選擇器最大的優勢是可以爲元素對象定義單獨或相同的樣式
方法
- 第一步：給需要設置樣式的標籤定義類名稱，也就是給標籤設置一個class屬性，並給class屬性賦值。賦的值就是類名稱。
- 第二步：在CSS中使用類名稱查找html文件中的對應標籤。要在類名稱前面添加黑色實點。
例：
<style>
.p1{
color:blue;
}
</style>
<p class="p1">
這是類選擇器的使用
</p>
類名注意
- 類名第一個字符不能使用數字，它無法在Mozilla或Firefox中起作用。
- 類名嚴格區分大小寫，一般採用小寫的英文字符。
- 不建議使用"_"下劃線來命名CSS選擇器。
- 儘量不縮寫，除非一看就明白的單詞。
相同的標籤可以定義相同的類名稱，不同的標籤也可以定義成相同的類名稱。
ID選擇器
ID選擇器使用“#”進行標識，後面緊跟ID名，其基本語法格式如下：
#ID名{屬性1:屬性值1; 屬性2:屬性值2; …屬性n:屬性值n; }
該語法中，ID名即爲HTML元素的ID屬性值，大多數HTML元素都可以定義ID屬性，元素的ID值是唯一的，只能對應於文檔中某一個具體的元素。
方法：
- 第一步：在html文檔中，給某個標籤設置id屬性，然後給該屬性設置屬性值，屬性值就是id名稱。
- 第二步：在CSS文件中使用id名稱作爲選擇器，但是需要在id名稱前面添加#。
例：
#np1{
background-color: cyan;
}
<div class="p1" id="np1">
你好，
<div>
世界！
</div>
</div>
注意：id名稱在整個文檔中是唯一的，不能重名。
* 在CSS是通配符，匹配任意標籤。
例：
*{
margin: 0;/*外邊距*/
padding: 0;/*內邊距*/
}
此爲消除內外邊距，以後會詳細說一下的，此處略過。
編程我也是初學者，難免有寫錯的地方，希望大家看完之後，發現錯誤可以評論出來，謝謝大家