CSS
1. 三種結合方式
結合方式1: html標籤上加上style屬性. 屬性的值填寫Css代碼.所有標籤都有style屬性.
<html>
<head>
<title>結合方式1.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p style="color:red;">This is my HTML page. </p><br>
</body>
</html>
結合方式2:使用head標籤中的style標籤.設置頁面樣式.style中填寫css代碼
<html>
<head>
<title>結合方式2.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p ">This is my HTML page. </p><br>
</body>
</html>
結合方式3：新建一個css文件，填寫css代碼，在html文件中添加鏈接
p.css文件
p{
color:red;
}
html文件
<html>
<head>
<title>結合方式3.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="p.css">
</head>
<body>
<p>This is my HTML page. </p><br>
</body>
</html>
2.選擇器
1.標籤選擇器:
標籤名稱{
}
2.id選擇器:
#標籤id{
}
注意: 使用id時.要保證id的值在頁面中是唯一的
3.class選擇器:
.class名稱{
}
4.僞類選擇器:
選擇標籤的某個狀態.需要配合其他選擇器來使用
l link 未訪問過
v visited 訪問過
h hover 懸浮
a active 激活,點擊
a:link{
color:green;
}
3.屬性
字體屬性 font
font:oblique small-caps 900 25px 黑體;
背景屬性 backgtound
background: url("mn.jpg") no-repeat fixed center;
4.盒子模型
盒子模型的屬性
一. 邊框系類屬性
二. 尺寸屬性
三. 邊距
*內邊距
*外邊距
border-color:邊框顏色
border-width:邊框寬度
border-style:邊框樣式
border-color: red;
border-width: 1px;
border-style: solid;
margin-left:100px;左外邊距
margin-top:100px;
padding-left:100px; 左內邊距
padding-top:100px; 上內邊距
注意:內邊距會延長所在盒子的長或寬
示例代碼：
12-塊&行標籤.html
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div{
border: 1px solid red;
}
#one{
height: 300px;
width: 300px;
}
#two{
height: 100px;
width: 100px;
margin-left:100px;
margin-top:100px;
}
</style>
</head>
<body>
<div id="one" >
<div id="two"></div>
</div>
</body>
</html>