文章目錄
概念
html是用於將數據格式化展示的，但是在改變數據的樣式時會很麻煩，不易於維護。
爲了解決html操作樣式不便的問題，誕生了css語言。
css（層疊樣式表）
作用：
- 給網頁進行樣式開發
- 給網頁進行佈局
特點：
- 語言簡單
- 樣式可重複使用
- 依賴於HTML
css聲明
css的聲明有三種：
1.在標籤內聲明：
<hr style="background-color: blue;height: 50px;">
2.用sytle標籤：
style可以在任何地方使用，一般情況下在head標籤內用。
<style type="text/css">
hr{
width: 50%;
height: 20px;
color: red;
background-color: #FFFF00;
}
</style>
3.使用link標籤引入外部聲明好的css文件
link標籤同樣可以在任何地方使用，一般用在head標籤內
normal.css:
hr{
width: 50%;
height: 20px;
color: red;
background-color: #000000;
}
引入：
<link rel="stylesheet" type="text/css" href="normal.css"/>
注：如果對同一標籤的樣式在多個css聲明中修改，樣式最終的效果是按照文件執行順序最後一次修改的結果。文件執行順序：自上至下—>標籤內的style(第一種方式)
css選擇器
css選擇器的作用是修改指定標籤的樣式。
css選擇器有許多種，常用的有以下幾種：
全部選擇器
選擇所有的標籤並設置樣式----所有標籤共有樣式。
格式：*{樣式1；樣式二；……}
*{
}
類選擇器
給選擇器起一個名字，選擇class參數是該選擇器名字的標籤並設置樣式—不同標籤共有樣式。
格式：**.**選擇器名{樣式1；樣式二；……}
.common{
color: #000000;
}
<b class="common">css學習</b>
標籤選擇器
選擇指定標籤並設置樣式—同一標籤相同樣式。
格式：標籤名{樣式1；樣式二；……}
table{
width: 300px;
height: 200px;
/* table框 不包括表單框*/
border: solid 1px;
background-color: aqua;
}
id選擇器
選擇指定id的標籤並設置樣式（id可重複）—某個/某些標籤的樣式。
格式：#標籤id名{樣式1；樣式二；……}
#t1{
background-color: red;
}
<table id="t1">
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</table>
其他選擇器
這些選擇器不常用：
屬性選擇器
選擇具有指定屬性的指定標籤並設置樣式—同一類標籤中某些的樣式。
格式：標籤名[屬性名=值]{樣式1；樣式二；……}
input[type=text]{
color: #FF0000;
}
子標籤選擇器
選擇指定標籤的指定子標籤並設置樣式（可以是id名）—子標籤的樣式。
格式：標籤/id名 子標籤/id名{樣式1；樣式二；……}
ul li a{
color: #FF0000;
}
組合選擇器
選擇指定選擇器並添加樣式—不同選擇器的共有樣式。
格式：選擇器1名，選擇器2名，……{樣式1；樣式二；……}
.common,table{
background-color: #FFFF00;
}
css的使用過程
1.聲明css代碼域
2.使用選擇器選擇要添加樣式的標籤:
- 根據需求來:
- 使用全部選擇器來給整個頁面添加基礎樣式
- 使用類選擇器給不同的標籤添加基礎樣式
- 使用標籤選擇器給某類標籤添加基礎樣式
- 使用id、屬性選擇器、style屬性聲明方式給某個標籤添加個性化樣式
3.書寫樣式單(以下)
css常用樣式
邊框設置
border:solid 1px;
字體設置
font-size:10px;
font-family:"黑體";
font-weight:bold;
字體顏色設置
color:顏色;
背景顏色設置
background-color:顏色;
背景圖片設置
background-img:url;
background-repeate:no-repeate;
background-size:cover;/*平鋪*/
高和寬設置
height:12px;
width:12px;
浮動設置
float:left/right;
行高設置
line-height:10;
簡單樣例1——導航欄
案例新知識/注意點：
- li標籤中：
1.去掉列表前的黑點—list-style-type:none;
2.按行顯示：display:inline;或者float:left（左懸浮），注意：設置爲左懸浮，列表的高默認爲0，要在ul標籤中把高設置好纔可以看到背景。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css樣式使用</title>
<style>
/* 菜單設置 */
ul{
background-color: aqua;
height: 25px; /* 左懸浮默認高爲零*/
}
li{
list-style-type: none; /* 去掉黑點*/
display: inline;/* 一行 */
float: left; /* 左懸浮*/
}
li a{
color: #000000;
text-decoration: none;/* 去除下滑線 */
margin-left: 20px;
}
</style>
</head>
<body>
<h3>css樣式使用</h3>
<hr>
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.taobao.com">淘寶</a></li>
<li><a href="http://www.jd.com">京東</a></li>
<li><a href="http://www.so.com">好搜</a></li>
</ul>
</body>
</html>
簡單樣例2——圖片牆
案例新知識/注意點：
- img標籤中：
設置內邊距：padding:10px;
設置外邊距：margin-left:20px:/與左邊的標籤距離20個像素/
設置傾斜：transform:rotate(-10deg) /整數順時針，負數逆時針/ - 僞類簡單使用：
用來給選擇器加入特殊效果，用法 選擇器名：僞類 {樣式}。
hover僞類表示鼠標經過時。
transform: rotate(0) scale(1.5);—設置旋轉和縮放比例。
z-index: 1;—設置標籤的層級，讓其顯示在其他標籤之上，但是在Chrome中無效。
transition: 1s;—設置樣式變化過去的時間。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片牆</title>
<style type="text/css">
body{
text-align: center;
background-color: gray;
}
img{
width: 12%;
padding: 10px;/* 設置內邊距 */
background-color: white;
/* 設置傾斜 */
transform: rotate(-10deg);/* 正數順時針，負數逆時針 */
margin-left: 20px;/* 設置外邊距 */
}
/* 使用僞類給標籤添加樣式 */
img:hover{
/* 設置旋轉和縮放比例 */
transform: rotate(0) scale(1.5);
background-color: #00FFFF;
z-index: 1;/* 設置層級，在Chrome無效 */
transition: 1s;/* 設置時間 */
}
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<img src="img/Aida.png" />
<img src="img/head.jpg" />
<img src="img/109951163723944814.gif" />
</body>
</html>
