背景
css文件
body{
background-color:aliceblue;
}
/*body{
background-image: url("图片名");
background-repeat:repeat-x;
background-position:right;
background-position:100px,100px;
backgroud-attanchment:fixed;
}*/
p{
width:150px;
padding:10px;
background-color:aqua;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<p>测试一下背景是否可以继承</p>
<body>
</body>
</html>
文本
css文件
/*body{
color:aqua;
}*/
/*p{
color:red;
text-align: right;
}*/
h1{
text-indent: 2em;
}
html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<p>jikexueyuan</p>
<div>
<h1>静夜思</h1>
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
<body>
</body>
</html>
字体
css文件
p{
font-size:40px;
font-family: "Adobe Caslon Pro";
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<p>Hello</p>
<body>
</body>
</html>
链接
css文件
a:link{
color:#FF0000;
text-decoration: none;
background-color: aqua;
}
a:visited{
color:#00FF00;
}
a:hover{
color:#0000FF;
}
a:active{
color:#0000FF;
}
html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<a href="http://www.jikexueyuan.com">极客学院</a>
<body>
</body>
</html>
列表
css文件
/*ul li{
list-style-type: circle;
}*/
/*ul li{
list-style-image: url("timg9CPA9YOX.jpg") ;
}*/
ul.ul1{
list-style-position: inside;
}
ul.ul2{
list-style-position: outside;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<p>看一下效果</p>
<ul class="ul1">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
<p>看一下效果</p>
<ul class="ul2">
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
<body>
</body>
</html>
表格
css文件
/*#tb,tr,th,td{
border:1px solid blue;
}
#tb{
width:400px;
height:400px;
border-collapse: collapse;
}*/
#tb{
border-collapse: collapse;
width: 500px;
}
#tb td,#tb th{
border:1px solid bisque;
}
#tb th{
text-align:right;
background-color: aqua;
color:#FFFFFF;
}
#tb tr.alt td{
color:black;
background-color: aquamarine;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
</table>
</body>
</html>
轮廓
css文件
p{
outline-width: 20px;
outline-color: aqua;
outline-style: groove;
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
<table>
<p>突出的效果文字</p>
</table>
</body>
</html>
定位
css文件
#position1{
width:100px;
height:100px;
background-color: aqua;
position:relative;
left:20px;
top:20px;
z-index: 2;
}
#position2{
width:100px;
height:100px;
background-color: blue;
position:relative;
left:50px;
top:50px;
z-index:1;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
<div id="position1"></div>
<div id="position2"></div>
<script>
for(var i=0;i<100;i++){
document.write(i+"<br/>");
}
</script>
</body>
</html>
浮动
css文件
#fd{
width:100px;
heoght:100px;
background-color: red;
float:left;
}
#sd{
width:150px;
height:100px;
background-color: blue;
float:left;
}
#td{
width:100px;
height:100px;
background-color: green;
float:left;
}
#container{
width:300px;
height:500px;
background-color: azure;
}
#text{
clear:left;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
<div id="container">
<div id="fd"></div>
<div id="sd"></div>
<div id="td"></div>
<div id="text">helloworld</div>
</div>
</body>
</html>