常用Css样式

来源:互联网 发布:oracle9.2启动数据库 编辑:程序博客网 时间:2024/05/20 18:20

/*标题元素*/

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

/*父元素继承*/

body {
     font-family: Verdana, sans-serif;
     }

/*id 选择器*/

#red {color:red;}

/*id 选择器和派生选择器*/

#red p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

/*类选择器*/

.center {text-align: center}

/*属性*/

/*背景*/
background-color: gray;

background-image:url(../image/topmiddle.jpg);

background-repeat:no-repeat;

/*文字*/

text-align:left;

font-size:11px;

font-family:黑体;

line-height:25px;*行间距*/

text-indent:16px;/*文字缩近*/

letter-spacing ;/*文字之间的间隔*/

word-spacing ;/*单词之间的间隔*/

/*外边距*/

margin-top:5px;
/*内边距*/

padding-bottom:30px;

/*边框*/

border-color:#e1e0e0;
  border-style:solid;
  border-width:0px 1px 1px 1px;

/*浮动*/

float: left;

/*绝对定位*/

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

/*相对定位*/

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

 

 

 

简洁型css圆角矩形

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简洁型css圆角矩形</title>
<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
</style>
</head>

<body>
<div>
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="b d1">
2222
2222
2222
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

</div>
</body>
</html>

 

原创粉丝点击