码迷,mamicode.com
首页 > Web开发 > 详细

css-2

时间:2017-11-23 08:07:10      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:att   字符   cas   :link   back   gre   设置   www   列表   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css样式表</title>
<style type="text/css">
/*1.css背景
  2.css文本
  3.css字体
  4.css链接
  5.css列表
  6.css表格
  7.css轮廓

 
 */
#p1 {
 background-color: pink;
 margin: auto;
 padding: 20px;
}
#p2 {
 background-image: url(2.jpg);/*所有的背景属性都不能继承 */
 padding: 200px;
 /*background-repeat: repeat-x;*/
  /*background-repeat: repeat-y;*/
 background-repeat: no-repeat;
 /*background-position: left;*/
 background-position: 0% 0%;/*水平 垂直*//*background-attachment: fixed;*//*默认为scroll,当文档过长时,超过背景图片,图片消失.可设置为fixed*/
}
 #p3{
  text-align: center;/*text-align余<CENTER></CENTER>标签的区别:text-align只影响文本*/
  text-indent:-4em;
  padding-left: 5em;
 }
 p.p4{/*word-spacing:单词间隔  letter-spacing:字母间隔*/
 
  word-spcing:30px;
  text-transform: uppercase;/*字符转化(还可以首字母大写)*/
  text-decoration: line-through;/*文字装饰*/
  white-space:normal;/*处理空白符若设为pre空白符这不会被忽略*/
 }
 a:link{/*链接还未点击时*/
  text-decoration:none;/*去掉链接下划线*/
  background-color: red;/*改变链接背景颜色*/
  }
 a:visited{/*链接已被点击后*/
  text-decoration:none;
  background-color: yellow;
 }
 a:hover{/*鼠标移到链接上*/
  text-decoration:none;
  background-color: black;
 }
 a:active{/*链接正在被访问*/
  text-decoration:none;
  background-color:green;
 }
 ul{
  /*list-style:url(2.jpg) circle inside;*/
  list-style: circle inside;/*list-style:图片 图标 标志位置*/
  
 }
 table{
  border-collapse: collapse;/*是否折叠为单一表单框*/
 }
 table,tr,td,th{
  border:3px solid red;/*设置表单框*/
 }
 th{
  background-color:deepskyblue;/*设置表头背景颜色*/
  color: chocolate;/*设置文字颜色*/
 }
 .p5{
  outline:#25D517 dotted ;/*设置轮廓*/
 }
</style>
</head>
<body>
<p id="p1">这条语句的背景为粉色</p>
<p id="p2">这条语句的背景为图片</p>
<p id="p3">文本的缩进</p>
<p class="p4">the word spacing had changed</p>
<a href="http://www.baidu.com" target="_blank">点击这里链接到百度</a><br/>
国家:<br/>
<ul>
 <li>中国</li>
 <li>美国</li>
 <li>日本</li>
</ul><br/>
<table>
<tr>
 <th>学号</th>
 <th>姓名</th>
 <th>班级</th>
</tr>
<tr>
 <td>161003530106</td>
 <td>万涛</td>
 <td>德泰1613</td>
</tr>
</table>
<p class="p5">设置轮廓</p>
</body>
</html>

css-2

标签:att   字符   cas   :link   back   gre   设置   www   列表   

原文地址:http://www.cnblogs.com/wantao/p/7881148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!