前端學習第55天 css三種引用、‘引用的優先順序’、基本選擇器、屬性、display
一、css三種引用
1、什麼是css
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文件進行格式化（渲染）。
2、三種引用
（1）行間式
行內式是在標記的style屬性中設定CSS樣式。
```html
<div style="width: 100px; height: 100px">
</div>
<!-- 簡單直接,針對性強 -->
```
（2）內聯式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下
``html
<head>
<style>
選擇器 {
width: 100px;
height: 100px;
}
</style>
</head>
<!-- 解耦合了,可讀性強 -->
```
（3）外聯式
外部樣式就是將css寫在一個單獨的檔案中，然後在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
mystyle.css是相對路徑中的檔案
/* 適合團隊高效率開發, 耦合性低, 複用性強 */
```
3、三種引用方式的優先順序
1.沒有優先順序
2.不同的屬性樣式協同操作,相同的樣式採用覆蓋機制,選擇邏輯最下方的 （style標籤裡的）
3.行間式一定是邏輯最下方的樣式
三、基本選擇器
1、元素（標籤）選擇器
標籤: 一般用於最內層樣式修飾
p {color: "red";}
2、ID選擇器
id:唯一標識的佈局,不能重複
#i1 {
background-color: red;
}
#是指ID名
3、類選擇器
類:使用範圍最廣,佈局的主力軍
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
注意：點是指類名字
樣式類名不要用數字開頭（有的瀏覽器不識別）。標籤中的class屬性如果有多個，要用空格分隔。
4、通用選擇器
* {
color: white;
}
5、4個基礎選擇器優先順序
通配 < 標籤 < 類 < id (優先順序:同一標籤同一屬性)
四、屬性
1、顏色和長度
可以用color來設定顏色，
顏色屬性被用來設定文字的顏色。
顏色是通過CSS最經常的指定：
-
- 十六進位制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的範圍為0.0到1.0之間
px：畫素(pixel)，螢幕上顯示的最小單位，用於網頁設計，直觀方便
* mm：毫米
* cm：釐米
* in：英寸
* pt：點(point)，一個標準的長度單位，1pt＝1/72in，用於印刷業，非常簡單易用；
* em：相當長度，通常1em=16px，應用於流式佈局
2、字型樣式
font-family：字型族科，多值用於備用，以,隔開
```css
font-family: "STSong", "Arial";
```
* font-size：字型大小
* font-style： 字型風格 normal \| italic \| oblique
* font-weight：字型重量 normal \| bold \| lighter \| 100~900
* line-height：行高
* font：字重 風格 大小/行高 字族 （順序不能變）
3、文字樣式
（1） color：文字顏色
（2） text-align：橫向排列
left 居左 | center 居中 | right 居右
（3） vertical-align：縱向排列
baseline：將支援valign特性的物件的內容與基線對齊
sub：垂直對齊文字的下標
super：垂直對齊文字的上標
top：將支援valign特性的物件的內容與物件頂端對齊
text-top：將支援valign特性的物件的文字與物件頂端對齊
middle：將支援valign特性的物件的內容與物件中部對齊
bottom：將支援valign特性的物件的文字與物件底端對齊
text-bottom：將支援valign特性的物件的文字與物件頂端對齊
（4） text-indent：文字縮排
（5）text-decoration：文字劃線
常用的為去掉a標籤預設的自劃線：
a {
text-decoration: none;
}
（6） letter-spacing：字母間距
（7）word-spacing：單詞間距
（8） word-break：自動換行
normal：預設換行規則
break-all：允許在單詞內換行
4、背景樣式
（1）背景顏色
background-color: red;
（2） 背景圖片
background-image: url('1.jpg');
（3） 背景重複
repeat(預設):背景圖片平鋪排滿整個網頁 repeat-x：背景圖片只在水平方向上平鋪 repeat-y：背景圖片只在垂直方向上平鋪 no-repeat：背景圖片不平鋪
5、邊框樣式
#i1 {
border: 2px solid red;
}
除了可以統一設定邊框外還可以單獨為某一個邊框設定樣式，如下所示：
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
五。display
```css
.box {
/*block: 塊級標籤, 獨佔一行, 支援所有css樣式*/
/*display: block;*/
/*inline: 內聯(行級)標籤, 同行顯示, 不支援寬高*/
/*display: inline;*/
/*inline-block: 內聯塊標籤, 同行顯示, 支援所有css樣式*/
display: inline-block;
/*標籤的巢狀規則*/
/*①*/
/*block可以巢狀所有顯示型別標籤, div | h1~h6 | p*/
/*注: hn與p屬於文字型別標籤,所有一般只巢狀inline標籤*/
/*②*/
/*inline標籤只能巢狀inline標籤, span | i | b | sup | sub | ins */
/*③*/
/*inline-block可以巢狀其他型別標籤, 但不建議巢狀任意型別標籤 img | input*/
}
```
display:"none"與visibility:hidden的區別：
visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
display:none: 可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。