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>