CSS基礎學習內容
1.CSS選擇器
標籤選擇器(根據指定的標籤名，在當前介面中找到所有該名稱的標籤，然後設定屬性.)
格式:
標籤名{
屬性：值；
}
div{
font-size:24px;
color:#f00;
}注意點：
1> 標籤選擇器選定的是當前介面中所有該名稱的標籤，而不能單獨選定某一標籤；(div標籤可直接應用上面div標籤選擇器內規定的屬性)
2> 標籤選擇器無論標籤藏得多深都能找到；
3> 只要是HTML中的標籤都可以作為標籤選擇器。
id選擇器:根據指定的id名稱找到對應的標籤，然後設定屬性。(注意事項:一個標籤同時被標籤選擇器和id選擇器同時選中,id選擇器的優先順序要高於標籤選擇器!!!)
格式：
#id{
屬性：值；
}
#div1{
font-size:36px;
color:#0f0;
}
在標籤中設定id=div1;即可應用id選擇器內的屬性;注意點：
1> 每一個HTML標籤都有id屬性，也就是說每個標籤都可以設定id；
2> 在同一個介面中id是不可重複的；id選擇器只會被使用一次,一般用於動態更新內容使用
3> 在編寫id選擇器的時候id前一定要加#；
4> id的名稱是有一定的規範的。
4.1> id的名稱只能有字母、數字、下劃線組成；
4.2> id名不能以數字開頭；
4.3> id名不能是關鍵字；
4.4> 在企業開發中一般如果僅僅是為了設定樣式，我們不會使用id，因為id是為了給js使用的。
類選擇器:根據指定的類名稱找到對應的標籤，然後設定屬性。
格式:
.類名{
屬性：值；
}
.divCls{
font-size:36px;
color:#f00;
}
呼叫時只需要在標籤內設定class="divCls",便可以呼叫;
注意點：
1> 每一個HTML標籤都有class屬性，也就是說每個標籤都可以設定class；
2> 在編寫id選擇器的時候class前一定要加.；
3> 類名的命名規範和id命名規範是一樣的；
4> 類名就是專門給某個特定的標籤設定樣式的；
5> 在HTML中每個標籤都可以同時繫結多個類名,同一個頁面下,多個標籤可以指定同名的class屬性。
格式：
<標籤名稱 class="類名1 類名2 ...">
並集選擇器:給所有選擇器選中的標籤設定屬性。
並集選擇器是用來找出所有的滿足和符合標籤1或標籤2的標籤。如：標籤1，標籤2，標籤3{ 屬性：值；}，最終系統找出所有的 滿足標籤1或標籤2或標籤3的標籤。滿足標籤1的標籤數量+滿足標籤2的標籤數量+滿足標籤3的標籤數量=系統選出的標籤數量。
格式：
選擇器1，選擇器2{
屬性：值；
}
#div1,.divCls{
background-color:#f00;
}交集選擇器 : 格式中標籤與標籤之間沒用任何東西，交集選擇器選擇出符合和滿足各個標籤屬性的標籤：如：標籤1標籤2標籤3{屬性：值；} 最終找到同時滿足標籤1，標籤2，標籤3的標籤。
#div1 span{
font-size: 24px;
color: #0f0;
}
通配選擇器
-
全部選中,給指定選擇器後面所有的選擇器中的標籤設定屬性。
格式：
選擇器1~選擇器2{
屬性：值；
}*.div{ font-size: 24px; color: #0f0; } 給所有class=div的標籤設定屬性;
2.錨偽類選擇器
a:link 沒有訪問過的狀態
a:visited 滑鼠訪問過的狀態,點選了,並且鬆開的狀態
a:hover 滑鼠經過的狀態
a:active 滑鼠啟用狀態,滑鼠點選,但是沒有鬆開的狀態
注意:
錨偽類要迴圈顯示一種效果:四個狀態必須有先後迴圈
提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
提示：在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。3.偽類練習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類練習</title>
<style type="text/css">
tbody tr:hover{
background-color: #00f;
}
</style>
</head>
<body>
<table border="1px" align="center" width="400px" height="300px">
<thead>
<tr>
<th>姓名</th>
<th>班級</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>張三</td>
<td>計算機1班</td>
<td>87</td>
</tr>
<tr align="center">
<td>李四</td>
<td>計算機2班</td>
<td>89</td>
</tr>
<tr align="center">
<td>王五</td>
<td>計算機1班</td>
<td>98</td>
</tr>
</tbody>
</table>
</body></html>
body標籤中thead(頭)、tbody(身體) 以及 tfoot(腳);
4.CSS文字
color：文字顏色屬性；
line-height:行高；
letter-spacing：字元間距；
text-align: 文字的對其方式；
word-spacing:字間距:預設兩個組成的叫單詞，文字中用空格隔開，即可看出和字元間距不同的效果；
text-decoration：文字修飾
常用的屬性值
underline:下劃線
none:沒有下劃線
overline:上劃線
line-through:中劃線
如例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css文字</title>
<style type="text/css">
body{
color: #FFFF00;
line-height: 200px;
letter-spacing: 50px;
text-align: center;
word-spacing: 100px;
text-decoration: line-through;
}
</style>
</head>
<body>
我愛 程式設計<br />
我愛生活
</body>
</html>
5.CSS字型
font-family:字體系列(型別) 系統預設是宋體；
font-size:字型尺寸；
font-style:字型的樣式；
常用的屬性值:
normal:標準的字型樣式；
italic:斜體；
font-wight:設定字型的粗細；
CSS字型的簡寫屬性
font:italic bold 36px "黑體" ;（注意順序）
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css字型</title>
<style type="text/css">
/body{
font-family: "黑體";
font-size: 50px;
font-style: italic;
font-weight: bold;
}/
body{
font: italic bold 50px "黑體";
}
</style>
</head>
<body>
中華萬歲！天佑中華！
</body>
</html>
6.css背景
背景顏色:background-color；
背景圖片:background-image:
屬性:url指定圖片的路徑
background-image: url(img/mm.jpg)；
background-repeat:設定背景圖片是否重複以及如何重複
常用的屬性值:
預設值:repeat:x軸和y軸重複；
repeat-x:背景圖片水平方向重複；
repeat-y:y軸重複；
no-repeat:不重複 ；
background-position 設定背景影象的起始位置。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css背景</title>
<style type="text/css">
/ body{}
background-color: #FF69B4;
background-image: url(img/9a105fb668f52d078c705e9897b7fae4.jpg);
background-repeat: ;
background-position: top ;
}/
body{
background: #FF69B4 url(img/9a105fb668f52d078c705e9897b7fae4.jpg) top center;
}
</style>
</head>
<body>
</body>
</html>
7.css列表
list-style-type:設定列表項前面的型別；
給列表項前面的型別自定義
list-style-image
常用的屬性值:URL 影象的路徑
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>css列表</title>
<style>
body ul{
list-style-type: none;
list-style-image: url(img/9a105fb668f52d078c705e9897b7fae4.jpg);
}
</style>
</head>
<body>
XX學生管理系統:
<ul>
<li>學生管理</li>
<li>選課管理</li>
<li>教師管理</li>
</ul>
</body>
</html>
8.css表格
body table{
將表格的邊框合併為單一的框
屬性值:collapse
border-collapse :collapse;
}
例如：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>CSS表格</title>
<style type="text/css">
body table{
/*將表格的邊框合併為單一的框
屬性值:collapse
- */
border-collapse :collapse;
}
</style>
</head>
<body>
<table border="1px" align="center" width="400px" height="300px">
<thead>
<tr>
<th>姓名</th>
<th>班級</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>張三</td>
<td>計算機1班</td>
<td>87</td>
</tr>
<tr align="center">
<td>李四</td>
<td>計算機2班</td>
<td>89</td>
</tr>
<tr align="center">
<td>王五</td>
<td>計算機1班</td>
<td>98</td>
</tr>
</tbody>
</table>
</body>
</html>
9.css邊框
邊框的顏色
border-color:邊框顏色的簡寫屬性
1)邊框顏色預設的順序:上 右 下 左
2)邊框顏色某一邊如果沒設定,那麼取對邊的顏色
border-color:#f00;
border-left-color:#f00 ;
border-right-color:#00f ;
border-top-color: #0f0;
border-bottom-color: #FF0;邊框的寬度
border-width
邊框寬度的簡寫屬性
border-width: 10px;
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;一塊標籤,要想顯示邊框的效果,必須指定屬性:邊框的樣式:
border-style:邊框樣式的簡寫屬性
border-style: solid;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;
一個div顯示邊框,使用boder的簡寫屬性
border:1px solid #000 ;
width: 50px;
height: 50px; 10.盒子模型
盒子模型:div塊標籤+css進行網頁佈局
一個盒子屬性:
容量:就是給div塊標籤指定的寬度和高度padding-left ：讓盒子內邊距向右移動；
margin-bottom：設定一個下外邊距；
例如：
TYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>