CSS學習筆記01
1.《html頁面引入CSS》
------------------------------
外部引入:
<link rel="stylesheet" type="text/css" href="css.css" />
註釋：（text/css ->文字/css,即css文字）。。REL屬性用於定義連線的檔案和HTML文件之間的關係，只有 rel 屬性的 "stylesheet" 值得到了所有瀏覽器的支援。其他值只得到了部分地支援。前面的兩個一般是固定的。 href="css名.css"
內部嵌入:
在<head>標籤內使用<style type="text/css"> css程式碼 </style>
行內嵌入:
在標籤行內使用 style="css程式碼;css程式碼;"
2.《給html標籤編寫樣式》
------------------------------
直接給html標籤寫樣式.：標籤選擇器 eg：p{ }
四個基本樣式:
width:寬度，控制html標籤寬度
height:高度，控制html標籤高度
color:文字顏色
background:背景顏色
單位:px 和 百分比
3.《id選擇器與class選擇器》
------------------------------
id選擇器: <p id="info">段落</p> #info{}
class選擇器:<p class="item">段落</p> .item{}
區別：注意：①類名的第一個字元不能使用數字。
②id選擇器只能應用一個物件，而類選擇器是可以應用到多個樣式中的 ③當頁面中用JavaScript或者要動態呼叫物件的時候，要用到id，所以要根據自己的情況運用
後代選擇器：
父代選擇器1 子父代選擇器2 子父代選擇器3 ….子代選擇器 {
}
選擇器之間用空格間隔，以後用比較的多選擇器優先順序
注意：id選擇器優先順序最高，標籤選擇器優先順序最低，如下所示：id選擇器 > 類選擇器 > 標籤選擇器
注意：選擇器優先順序不考慮選擇器的先後順序
4.《CSS控制文字顯示》
------------------------------
font-size:文字大小 值:px
font-weight:文字加粗 值:normal（不加粗）,bold（加粗）
font-style:文字樣式(傾斜) 值:italic（傾斜）,normal（不傾斜）
color:文字顏色 值:顏色
line-height:文字行高 值:px
5.《CSS控制超連結顯示》
-------------------------------
a{} :預設樣式
a:link {} ：普通的、未被訪問的連結
a:visited {} ：使用者已訪問的連結
a:hover {} ：滑鼠指標位於連結的上方
a:active {} ：連結被點選的時刻
注意：
a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後 （l v h a）
text-decoration: 下劃線 值:none（無下劃線）,underline（有下劃線）
6.《CSS控制列表顯示》
-------------------------------
list-style-type:none; 列表去掉小圓點
7 CSS控制（背景）圖片顯示
background-image:url(“”); 背景圖片
background-color:
background-repeat: no-repeat(背景不迴圈),repeat-x,repeat-y
背景位置：left，center，right 在x軸
Top，center ，bottom 在y軸 （先x後y）
合併寫法：eg：
background： orange url(“xxx.jpg”) no-repeat left center
背景 顏色 圖片 重複 先x 後y
8CSS盒子模型[margin padding border]
外邊距：margin-top (right,left,bottom) （區域與區域之間的空隙）
margin:
內邊距：padding：（控制 標籤 與 內部資料 之間的空隙） （上 右 下 左）
邊框：border: 1px solid (dashed虛線) blue;
邊框： 寬度 型別 （實線，虛線） 顏色；
border-bottom(right,left,top):
- CSS進行頁面佈局[float] [浮動佈局和清理]
float：left（right，both）
一個部落格上https://www.cnblogs.com/ForEvErNoME/p/3383539.html
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。