1、css分類樣式分為3類：内聯、内嵌、外部
（1）内聯：寫在标簽裡面，樣式為style=" "
舉例說明：
<div style="
100px;
height: 110px;
background-color: red;">
<p>
我是第一行h
</p>
運作樣圖：
style="寬度為100像素，高度為110像素，背景是綠色"。給這一個div标簽定css樣式。
（2）内嵌：在<head> </head>裡面<style type="text/css"> </style>内嵌在head内部body外部*/
即
<head>
<style type="text/css">
<style type="text/css"> </style>
</head>
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">/*内嵌在head内部body外部*/
p{
color: red;
}/*p代表選擇全部文字*/
.lianxi
{
color: yellow;
background: red;
height: 100px;
100px;
}
</style>
</head>
<body>
<div class="lianxi">我是洋洋1</div>
<div class="lianxi">我是洋洋2</div>
<div class="lianxi">我是洋洋3</div>
</body>
運作樣圖：
<body></body>内部有一個class=lianxi 點class即賦予所有class等于練習的内容背景紅色，高100像素，寬100像素字型為黃色。
（3）外部，單獨建一個css檔案
<link rel="stylesheet" type="text/css" href="0809liaxi2.css"/>
舉例說明：
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="0809liaxi2.css"/>
</head>
也是在<head> </head>裡面
2、選擇器：class、id、複合選擇、屬性、僞類
（1）class，選擇class屬性時用點.XX,根據class的名來篩選元素，并且用class屬性選擇可以有相同的重複的名字
如：
<div class="lianxi">我是洋洋1</div>
<div class="lianxi">我是洋洋2</div>
<div class="lianxi">我是洋洋3</div>
選擇class等于lianxi時是點lianxi，這樣我是洋洋的内容就被選擇了，然後就可以給我是洋洋的内容添加屬性。
例如<style type="text/css">
.(點)lianxi
{color: yellow;
}
</style>
（2）id根據id名來篩選唯一進制素，不能有相同的名字，用#加要的id名
即<div id="lianxi1">我是洋洋1</div>
<div id="lianxi2">我是洋洋2</div>
<div id="lianxi3">我是洋洋3</div>
例如#lianxi1,這樣賦予屬性時是給我是洋洋1賦予的
（3）複合中逗号表并列，空格代表後代，大于号代表全部div>p即div中所有的p元素。
舉例說明：#yang,#yang2{/*複合 後代*/
border: 2px solid black/*邊框為2，邊框顔色為黑色*/
}
div,p {
border: 2px solid red
}所有的p标簽
（4）a标簽的四個僞類：a:link未通路的标簽、a:visited已通路的标簽、a:active以選中的标簽、a:hover滑鼠劃過時
舉例：
a:link{
color:blue;
}<--未通路時是藍色-->
a:visited{
color:black;
} <--通路過的是黑色-->
a:active{
color:yellow;
}<---選中是黃色->
a:hover{
color:#FF0000;
}<--滑鼠劃過顯示紅色-->
效果圖：
4、樣式：背景、字型、對齊方式、邊界邊框、顯示隐藏、清單（無序、有序）、格式布局
（1）背景background
background-image:url(foot-bg.jpg);背景圖檔
background-color背景顔色
background-reapet圖檔平鋪方式：background-size（背景尺寸）: 100% 100%;完全展開
background-position背景位置
（2）字型
fonf-family字型樣式
font-size字型大小
font-style：italic字型傾斜
font-wight字型粗細
text-decoration:(1)underline下劃線（2）overline上劃線(3)line-through删除線（4）none去掉線
（3）對齊方式
text-align:center水準對齊方式
line-height行高
text-indent縮進機關像素
line-height(調節文本的垂直方式，通過設定行高的大小)與vertical-align（調節行内元素的垂直對齊方式）
（4）邊界邊框margin外邊距與padding内邊距（bored1px solid red代表粗細與顔色）
margin上右下左隻能調節左右margin-left與margin-right
padding加了内邊距元素會變大，
背景、字型、對齊、邊框舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#name{
background-color: red;/*背景為紅色*/
height: 90px;
width: 200px;
margin-left: 60px;/*w外邊距距邊框60px*/
padding-top: 90px;/*内邊距距上邊90px*/
font-size: 20px;/*字型大小*/
font-style: initial;/*傾斜*/
/*text-decoration: underline;下劃線*/
text-decoration: overline;/*上劃線*/
color: yellow;/*字型顔色*/
border:10px solid:blue;
float:left
}
.class{
background-color: green;/*背景為紅色*/
height: 150px;
width: 400px;
/*vertical-align: bottom;*調節input、span、img的行内元素垂直對齊方式/
*
*/
line-height: 140px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="name">
無限歌謠季
</div>
<div class="class">我想和你唱</div>
</body>
</html>