1. 引入css樣式表（css書寫位置）：

內部樣式表：

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

行內式（內聯樣式）：

通過標籤的style屬性來設置元素的樣式，其基本語法格式如下：

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起作用。

外部樣式表（外鏈式）：

將所有的樣式放在一個或多個以.CSS爲擴展名的外部樣式表文件中，通過link標籤將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

<head>
  <link href="CSS文件的路徑"  rel="stylesheet" />
</head>

注意： link 是個單標籤哦!!!

該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所鏈接文檔的類型，在這裏需要指定爲“text/CSS”，表示鏈接的外部文件爲CSS樣式表。
rel：定義當前文檔與被鏈接文檔之間的關係，在這裏需要指定爲“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結（位置）：

樣式表	優點	缺點	使用情況	控制範圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標籤（少）
內部樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現結構和樣式相分離	需要引入	最多，強烈推薦	控制整個站點（多）

CSS樣式規則

在上面的樣式規則中:

1.選擇器用於指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區分。
可以用段落和表格的對齊的演示。

選擇器（重點）

標籤選擇器（元素選擇器）

標籤選擇器是指用HTML標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優點是能快速爲頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式。

標籤選擇器可以把某一類標籤全部選擇出來 div span

類選擇器

類選擇器使用“.”（英文點號）進行標識，後面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤調用的時候用 class=“類名”  即可。

類選擇器最大的優勢是可以爲元素對象定義單獨或相同的樣式。可以選擇一個或者多個標籤

小技巧：

1.長名稱或詞組可以使用中橫線來爲選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。

多類名選擇器

注意：

1. 樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

id選擇器：

id選擇器使用“#”進行標識，後面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即爲HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

類選擇器（class）好比人的名字，是可以多次重複使用的，比如張偉王偉李偉李娜

id選擇器好比人的身份證號碼，全中國是唯一的，不得重複。只能使用一次。

id選擇器和類選擇器最大的不同在於使用次數上。

通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

舉例：清除所有HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

注意：

這個通配符選擇器，就像我們的電影明星中的夢中情人，想想它就好了，但是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

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. 儘量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

font-weight:字體粗細

字體加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

數字 400 等價於 normal，而 700 等價於 bold。但是我們更喜歡用數字來表示。

font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

CSS外觀屬性

color屬性用於定義文本的顏色，其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值爲0時也不能省略百分號，必須寫爲0%。

line-height:行間距

ine-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱爲行高。line-height常用的屬性值單位有三種，分別爲像素px，相對值em和百分比%，實際工作中使用最多的是像素px

一般情況下，行距比字號大7.8像素左右就可以了。

text-align:水平對齊方式

text-align屬性用於設置文本內容的水平對齊，相當於html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

是讓盒子裏面的內容水平居中，而不是讓盒子居中對齊

text-indent:首行縮進

text-indent屬性用於設置首行文本的縮進，其屬性值可爲不同單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作爲設置單位。

1em 就是一個字的寬度如果是漢字的段落， 1em 就是一個漢字的寬度

text-decoration 文本的裝飾

text-decoration 通常我們用於給鏈接修改裝飾效果

值	描述
none	默認。定義標準的文本。
underline	定義文本下的一條線。下劃線也是我們鏈接自帶的
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是爲了可以選擇更準確更精細的目標元素標籤。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器是並且的意思。即...又...的意思

比如：   p.one   選擇的是： 類名爲 .one  的 段落標籤

用的相對來說比較少，不太建議使用。

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作爲並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器爲它們定義相同的CSS樣式。

記憶技巧：

並集選擇器和的意思，就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色爲紅色。  通常用於集體聲明。

後代選擇器

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就成爲外層標籤的後代。

子孫後代都可以這麼選擇。或者說，它能選擇任何包含在內的標籤。

子元素選擇器

子元素選擇器只能選擇作爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個進行連接，注意，符號左右兩側各保留一個空格。

白話：這裏的子指的是親兒子不包含孫子重孫子之類。

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含着h3。

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個，第n個元素。

類 .one

僞類 :link

爲了和我們剛纔學的類選擇器相區別，  類選擇器是一個點 比如 .demo {}   而我們的僞類 用 2個點 就是 冒號  比如  :link{}

鏈接僞類選擇器

:link /* 未訪問的鏈接 */
:visited /* 已訪問的鏈接 */
:hover /* 鼠標移動到鏈接上 */
:active /* 選定的鏈接 */

注意寫的時候，他們的順序儘量不要顛倒按照 lvha 的順序。 love hate 愛上了討厭記憶法或者 lv 包包非常 hao

a {   /* a是標籤選擇器  所有的鏈接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是鏈接僞類選擇器 鼠標經過 */
			color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

CSS註釋

CSS規則是使用     /*  需要註釋的內容  */  進行註釋的，即在需要註釋的內容前使用 “/*” 標記開始註釋，在內容的結尾使用 “*/”結束。

例如：

p {
  font-size: 14px;                 /* 所有的字體是14像素大小*/
}

sublime快捷方式

sublime可以快速提高我們代碼的書寫方式

生成標籤直接輸入標籤名按tab鍵即可比如 div 然後tab 鍵，就可以生成 <div></div>
如果想要生成多個相同標籤加上 * 就可以了比如 div*3 就可以快速生成3個div
如果有父子級關係的標籤，可以用 > 比如 ul > li就可以了
如果有兄弟關係的標籤，用 + 就可以了比如 div+p
如果生成帶有類名或者id名字的，直接寫 .demo 或者 #two tab 鍵就可以了
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）行內元素只能容納文本或則其他行內元素。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換爲行內塊： display: inline-block;

2019.3.7

前端學習之html+css（一）