1. CSS3背景
//index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <p> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> haha<br/> </p> </body> </html>
//mycss.css body{ background-color: darkgray; } p{ background-image: url("html5.png"); background-size: 100px 100px; background-repeat: no-repeat; background-attachment: fixed; //滚动页面时背景图片固定不滚动 }
2. CSS样式
//iindex.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <p id="p1">this is My web page</p> <p id="p2">this is My web page</p> <p id="p3">this is My web page</p> <p id="p4">阴影测试</p> <p id="p5">换行测试换行测试换行测试换行测试换行测试换行测</p> <h1>位置测试</h1> <h2>头缩进测试</h2> </body> </html>
//mycss.css h1{ color: red; text-align: center; } h2{ text-indent: 2em; } #p1{ text-transform: capitalize; } #p2{ text-transform: lowercase; } #p3{ text-transform: uppercase; } #p4{ text-shadow: 5px 5px 2px red; } #p5{ width: 100px; word-wrap: normal; }
3. CSS链接
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
a:link{ /*普通的、未被访问的链接 , text-decoration去掉下划线*/ color: #FF0000;
text-decoration: none; } a:visited{ /*用户已经访问的链接*/ color: #00FF00; } a:hover{ /*鼠标指针位于链接上方*/ color: #0000FF; } a:active{ /*链接被点击的时刻*/ color: black; }
4.CSS列表
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <ul> <li>苹果</li> <li>梨子</li> <li>香蕉</li> </ul> </body> </html>
ul li{ list-style-type: circle; /* 自定义logo list-style-image: url("");*/ }
5. CSS表格
<!DOCTYPE html> <html> <head lang="en"> <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> <td>小王</td> <td>20</td> <td>男</td> </tr> </table> </body> </html>
#tb{ border: 1px solid blue; width: 400px; height: 400px; text-align: center; border-collapse: collapse; /*使得表格边框是一条线*/ } #tr,th,td{ border: 1px solid blue; text-align: center; }