html和css學習筆記（三）
CSS
1css書寫位置
1.1內部樣式表
內嵌式是將CSS程式碼集中寫在HTML文件的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：
```html
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
```
注：語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文件的任何地方。
type="text/CSS" 在html5中可以省略， 寫上也比較符合規範， 所以這個地方可以寫也可以省略。
1.2行內樣式
<head>
<style type="text/CSS">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
type="text/CSS" 在html5中可以省略， 寫上也比較符合規範， 所以這個地方可以寫也可以省略。
1.3外部樣式表
<head>
<link href="CSS檔案的路徑" rel="stylesheet" />
</head>
注意： link 是個單標籤哦!!!
該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：
```
href：定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所連結文件的型別，在這裡需要指定為“text/CSS”，表示連結的外部檔案為CSS樣式表。
rel：定義當前文件與被連結文件之間的關係，在這裡需要指定為“stylesheet”，表示被連結
2css選擇器
- 標籤選擇器
- 類選擇器
類選擇器使用“.”（英文點號）進行標識，後面緊跟類名，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤呼叫的時候用 class=“類名” 即可。
注：1.長名稱或片語可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。
- 多類名選擇器
給標籤指定多個類名，從而達到更多的選擇目的。
例：<div class="pink fontWeight font20">亞瑟</div>
- id選擇器
id選擇器使用“#”進行標識，後面緊跟id名，其基本語法格式如下：
```
#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
id選擇器和類選擇器區別
W3C標準規定，在同一個頁面內，不允許有相同名字的id物件出現，但是允許相同名字的class。
- 萬用字元選擇器
萬用字元選擇器用“*”號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
-
後代選擇器和子代選擇器
後代選擇器：.demo h3 （class相當於給標籤命名，因此選擇器使用標籤和使用class等價）
子代選擇器：.demo > h3
後代選擇器選擇所有後代，子代選擇器只選擇兒子後代。
- 並集和交集選擇器
並集選擇器：標籤之間用逗號隔開
交集選擇器：交集選擇器由兩個選擇器構成，標籤連寫，兩個選擇器之間不能有空格，如h3.special。用的較少
- 偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果。比如給連結新增特殊效果
接偽類選擇器
- :link /* 未訪問的連結 */
- :visited /* 已訪問的連結 */
- :hover /* 滑鼠移動到連結上 */
- :active /* 選定的連結 */
注意寫的時候，他們的順序儘量不要顛倒 按照 lvha 的順序。
例：
/* a是標籤選擇器 所有的連結 */
a:hover { /* :hover 是連結偽類選擇器 滑鼠經過 */
color: red; /* 滑鼠經過的時候，由原來的 灰色 變成了紅色 */
}
3css樣式屬性
3.1字型相關樣式
（{font: font-style font-weight font-size/line-height font-family;}）
- font-size字號大小
屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下：
- font-family:字型
font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文字的字型設定為微軟雅黑，可以使用如下CSS樣式程式碼：
p{ font-family:"微軟雅黑";}
可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型。
*常用技巧
1. 現在網頁中普遍使用14px+。
2. 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
3. 各種字型之間必須使用英文狀態下的逗號隔開。
4. 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
5.如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
6. 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。
7.在 CSS 中設定字型名稱，直接寫中文是可以的。但是在檔案編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支援 類似微軟雅黑的中文。
方案一： 你可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。
方案二： 在 CSS 直接使用 Unicode 編碼來寫字型名稱可以避免這些錯誤。使用 Unicode 寫中文字型名稱，瀏覽器是可以正確的解析的。字型為“微軟雅黑”。font-family: "\5FAE\8F6F\96C5\9ED1"，
常用：
8.為了照顧不同電腦的字型安裝問題，我們儘量只使用宋體和微軟雅黑中文字型
- font-weight:字型粗細
字型加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。
font-weight屬性用於定義字型的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。
*小技巧：
數字 400 等價於 normal，而 700 等價於 bold。 但是我們更喜歡用數字來表示。 （數字沒有單位）
- font-style:字型風格
字型傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。
font-style屬性用於定義字型風格，如設定斜體、傾斜或正常字型，其可用屬性值如下：
normal：預設值，瀏覽器會顯示標準的字型樣式。
italic：瀏覽器會顯示斜體的字型樣式。
oblique：瀏覽器會顯示傾斜的字型樣式。
*小技巧
平時我們很少給文字加斜體，反而喜歡給斜體標籤（em，i）改為普通模式。
- font:綜合設定字型樣式 (重點)
font屬性用於對字型樣式進行綜合設定，其基本語法格式如下：
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
注意：其中不需要設定的屬性可以省略（取預設值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。
4.CSS外觀屬性
4.1color:文字顏色
1.預定義的顏色值，如red，green，blue等。
2.十六進位制，如#FF0000，#FF6600，#29D794（紅綠藍各兩位）等。實際工作中，十六進位制是最常用的定義顏色的方式。
3.RGB程式碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB程式碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。
4.2line-height:行間距
屬性用於設定行間距，就是行與行之間的距離，即字元的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為畫素px，相對值em和百分比%，實際工作中使用最多的是畫素px
一般情況下，行距比字號大7.8畫素左右就可以了。
4.3text-align:水平對齊方式
text-align屬性用於設定文字內容的水平對齊（讓標籤（盒子）中的內容水平居中，而不是讓盒子居中對齊），相當於html中的align對齊屬性。其可用屬性值如下：
left：左對齊（預設值）
right：右對齊
center：居中對齊
4.4text-indent:首行縮排
text-indent屬性用於設定首行文字的縮排，其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%，允許使用負值, 建議使用em作為設定單位。
1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度
4.5text-decoration 文字的裝飾
text-decoration 通常我們用於給標籤（連結，刪除線等）修改裝飾效果
none 預設。定義標準的文字。
underline 定義文字下的一條線。下劃線 也是我們連結自帶的
overline 定義文字上的一條線。
line-through 定義穿過文字下的一條線。
4.6小結
em和i傾斜標籤，取消傾斜：font-style:normal；新增傾斜：font-style:italic
strong和b加粗，取消加粗：font-weight:400；新增加粗：font-weight:700
u和ins刪除下劃線：text-decoration:none;新增下劃線text-decoration:underline;
s和del刪除刪除線：text-decoration:none;新增刪除線text-decoration:line-through
5註釋
/* 需要註釋的內容 */
6標籤顯示模式display
6.1標籤的型別
HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。具體如下：
- 塊級元素(block-level)
每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
- 行內元素(inline-level)
行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影象尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。（a特殊）
注意：
1. 只有 文字才 能組成段落 因此 p 裡面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。
2. 連結裡面不能再放連結。
- 塊級元素和行內元素區別
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。
- 行內塊元素
在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）預設寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
6.2標籤顯示模式display
塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;