CSS
在前面我們用基本的html建立了一個網頁，但僅僅是将内容在網頁上顯示出來，但是這些元素如何顯示，涉及許多問題，如元素的位置、距離、顔色、大小等等，于是就有了CSS的出現。
CSS文法
CSS規則由兩個主要的部分構成：選擇器、以及一條或多條的聲明：
選擇器通常是需要改變的HTML元素，每條聲明由一個屬性和一個值組成。
CSS對某個元素的定義是在< head>中進行，在頭部中定義完成之後，在< body>中直接按照html的規則使用就可以了。
話不多說看執行個體：
<style>
h1 {
color: red;
}
</style>
這句代碼是把元素為h1的标題的顔色全部設定顔色屬性為紅色，這樣在body中設定為h1元素的标題，顯示的字型顔色就是紅色；
但是有的時候相同格式的部分我們也隻需要一部分的顯示與其他不同，那麼就不能直接用上面的方法了。
①ID選擇器
< style>
#h{
color:red;
}
< /style>
這樣就相當于把1設定為一個ID了，這樣在後面的使用中，如果需要将某個文字設定為紅色，直接将其元素的ID設定為1，這樣顯示的就是紅色了。
在VS實驗的時候，發現ID好像不能設定為數字！！
在＜head＞中< !-- -->注釋不行，是以在頭部還是使用
ID選擇器的缺點就是ID是唯一的，每一個元素一次隻能有一個ID，如果想在改變顔色的同時又改變字型的大小，就不能定義兩個ID，給同一個元素；
②CLASS選擇器
class選擇器和ID的原理其實差不多，但是class的規則前面是 . ;ID 選擇器為 #
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
這樣顯示出來的就是居中、增大、紅色的字型
注意
如果設定的顯示的是标題，那麼改變大小的規則将沒有作用；居中和顔色的改變可以
CSS生效方式
①外部樣式表
當我們建立了一個HTML檔案之後，如果想要使用CSS，這時我們可以在html檔案的同一個目錄下建立樣式表檔案(字尾為.css)，在這個檔案裡面進行定義。
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
直接将上述代碼複制到.css檔案中，然後在html檔案的頭部中添加一個連結
< link rel="stylesheet" type="text/css" href="mycss.css" target="_blank" rel="external nofollow" >
其中rel和type中的應該是固定的，href中是.css檔案的位置。
這樣在html檔案的頭部就不需要在定義了。在body中就可以直接使用這些。
②内部樣式表
内部樣式就是前面直接在HTML檔案的< head>中定義規則，然後在< body>中直接使用的方法。
在< head>中需要添加< style>标簽
③内聯樣式
直接把樣式規則直接寫到要應用的元素中
這樣就直接把顯示的顯色改變了；
如果想要同時改變多個樣式，直接在顔色後面添加
同時改變大小和顔色
優先級
這就涉及樣式的優先級問題，從高到低分别是：
- 内聯樣式
- 内部樣式表或外部樣式表
- 浏覽器預設樣式
當同時有内部樣式表和外部樣式表的時候，優先級是内部>外部
尺寸、顔色、對齊
在CSS中有大概有兩種的尺寸改變方法
- 在style中使用font-size來改變顯示的文本的大小
- 在style中使用width和height改變元素塊的大小
同樣對于顔色的顯示也是有兩種
- 背景顔色的改變background-color
- 文本顔色的改變color
目前的對齊是針對元素塊中的文本，采用text-align；對于如何将元素塊整體的位置改變後面學習中将會學到。
<p style="font-size: 20px;background-color: teal;text-align:center;">數字</p>
<p style="width: 20ex;height: 20ex;background-color: tan;">數字</p>
HTML 的盒子模型
盒子模型指的是一個HTML元素可以看成是一個盒子，盒子的内容是Content、内邊距是padding、邊框是border、外邊距是margin。
- content盒子的内容，如文本、圖檔等
- padding 填充，即内邊距，即内容與邊框之間的距離
- border 邊框，預設不顯示
- margin 外邊框，邊框以外與其他元素的區域
.box1 {
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 50px;
}
設定的兩種的邊框顯示，其中兩個顯示的内邊距都相同，即下面兩個的紅色邊框和藍色邊框到自己這個盒子的内容content的距離相同；但是紅色的盒子模型外邊距為25、藍色的外邊距為50，這樣紅色的盒子到其他元素的距離就是25、藍色的是50；但是，紅色的邊框到藍色的邊框的距離是50。
之前我們通過width改變顯示的内容的大小，隻是改變了内容content的寬度。
定位
position屬性用于對元素進行定位。
- static 靜态
- relative 相對
- fixed 固定
-
absolute 絕對
設定之後就可以用top、bottom、left、right屬性設定具體的位置。
①靜态static
預設的布局就是靜态的，從上到下、從左到右的順序按排位置
②relative相對位置
把元素設定為position:relative，這将把元素相對于它的靜态位置進行偏移
< div >我偏移了正常顯示的位置。</div>
< div style="position: relative; left: 60px;" >我偏移了正常顯示的位置</div>
很明顯，顯示的位置左邊有60px的位移。
③固定 fixed
這将使得元素的位置固定不動，即使拖動滾動條依然在頁面的固定位置。
④absolute
設定為絕對定位position: absolute;，将使元素相對于其最近設定了定位屬性（非static）的父元素進行偏移。
如果該元素的所有父元素都沒有設定定位屬性，那麼就相對于這個父元素。
浮動
在一個區域容器内，我們可以設定float屬性讓某個元素水準方向上向左向右進行移動，其周圍的元素也會重新排列。
< img src="1.jpg" class="float-right" width="100px" height="110px" alt="">
< img src="貝吉塔.png" class="float-right" width="100px" height="110px"alt="">
< img src="特蘭克斯.png" class="float-right" width="100px" height="110px" alt="">
< img src="卡卡羅特.png" class="float-right" width="100px" height="110px" alt="">
< img src="布瑪.png" class="float-right" width="100px" height="110px" alt="">
這裡将5張圖檔從右邊開始排列在一起，自定義的類型如下。
這樣雖然能夠将圖檔排列在一起，當時當圖檔的大小不一緻時，顯示的位置也會出現變化，是以這裡盡量将圖檔的大小設定為相同的
<style>
.example-float-right {
float: right;
}
一個元素浮動後，其後的元素将盡可能包圍它，或者說出現在這個浮動元素的左或右方。
如果希望浮動元素後面的元素在其下方顯示，可使用clear: both樣式來進行清除。
< p>沒有both的</p>
< p style="clear: both;">有both的</p>
此時文字就會出現在另一行了。
不透明度
我們可以用opacity對任何元素（不過常用于圖檔）設定不透明度。
值在[0.0～1.0]之間，值越低，透明度越高。
<img src="布瑪.png" id="mohu" height="110px" alt="">
<img src="布瑪.png" height="110px" alt="">
類型設定為
#mohu {
opacity: 0.3;
}