1.css引用
三种方法
1）<p style="..."> Jason </p> #body标签内直接使用
2） <head><style> ..... </style></head> #head头添加 style 标签
3）<link rel="stylesheet" href="....css" /> #外部调用css文件
2.字体 字体颜色 背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="common.css" />-->
<style>
/*标签选择器，找到所有的标签应用以下样式*/
div{
color: green;
}
/*id选择器，找到标签id等于i1的标签，应用以下样式*/
#i1{
font-size: 56px;
/* color: green; */
}
/*class选择器，找到class=c1的所有标签，应用一下样式*/
.c1{
background-color: red;
}
/*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/
/*.c2 div p a{*/
/**/
/*}*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/
.c4,.c5,.c6{
background-color: aqua;
}
</style>
</head>
<body>
<div class="c4">1</div>
<div class="c5">1</div>
<div class="c6">1</div>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<a class="c3">uu</a>
</p>
</div>
</div>
<div class="c3">sdfsdf</div>
<span class="c1">1</span>
<div class="c1">2</div>
<a class="c1">3</a>
<a id="i1">baidu</a>
<div>99</div>
<div>99</div>
<div>99</div>
<div>
<div>asdf</div>
</div>
</body>
</html>
显示效果
3.float
CSS中浮动属性的定义是通过float来声明的，它规定了元素是向左靠还是向右靠，有三个值：
left：居左；
right：居右；
none：默认属性，不浮动。
下面举个例子：
<div style="floa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
color: red;
/*background-color: #FF69B4;*/
/*background-color: rgb(25,180,10);*/
/*background-color: red;*/
font-size: 32px;
height: 150px;
width: 500px; /* 按照父亲相对占比*/
}
</style>
</head>
<body>
<div class="c1">sdfdf</div>
<div style="width: 500px;">
<div style="width: 20%;background-color: antiquewhite;float: left">asdf</div>
<div style="width: 80%;background-color: palegoldenrod;float: left">asdf</div>
</div>
</body>
</html>
显示效果
清除属性通过clear来声明，它同样有四个值：
clear:left;清除左侧。
clear:right;清除右侧。
clear:both;清除两侧。
clear:none;不清除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 500px;border: 1px solid red;">
<div style="width: 20%;background-color: aqua;float: left">f</div>
<div style="width: 30%;background-color: beige;float: right">a</div>
<div style="width: 30%;background-color: beige;float: right">a</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
显示效果
4. background-image
background-repeat: no-repeat; #不填满
background-position: 84px -58px; 移动图片开始位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
background-image: url("4.gif");
height: 150px;
width: 400px;
background-repeat: no-repeat;
}
.img2{
background-image: url("2.jpg");
height: 50px;
width: 50px;
background-position: 84px -58px;
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
</body>
</html>
显示效果
5.边框
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第一种：线的粗细为1像素，实线、红色-->
<div style="border:1px solid red;height:10px" ></div>
<!--第二种：线的粗细为1像素，点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>
<!--第三种：线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>
6.Display
代码如下：
display:none 此元素不会被显示
display:block 此元素将显示为块级元素，此元素前后会带有换行符。
display:inline-block 行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="background-color: red;height: 50px;width: 200px;">asdfasdf</span>
<span style="display: inline-block;height: 50px; background-color: red;">asdsfsdf</span>
</body>
</html>
显示效果
7.margin padding
顺序上右下左
margin:2px 4px 3px 4px; #外边距
padding: 0 0 0 0 #内边距
8.position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
<div style="height: 200px;background-color: red;">
<div style="position: absolute;bottom: 0;right: 0;">111</div>
</div>
</div>
</body>
</html>
显示效果
9.img 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="2.jpg" style="height: 500px;width: 200px;">
</body>
</html>
显示效果