css

boowen

于 2013-11-17 21:12:21 发布

阅读量633

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/boowen/article/details/16557369

版权

PHP 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p{
background-color:gray;

padding:20px;

background-image:url(/i/eg-bg.gif);

/*对背景图像进行平铺*/
/*repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。*/
background-repeat:repeat-y;

/*如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失*/
/*可视区是固定的（fixed）*/
/*默认值是 scroll*/
background-attachment:fixed;
/*缩进文本*/
text-indent:5em;

/*水平对齐*/
text-align:center;
/*字符间隔*/
word-spacing:30px;
word-spacing:-1em;

/*字母间隔*/

}
h1{
/*小型大写字母*/
font-variant:small-caps;
/*字母间隔*/
letter-spacing:10px;

/*字符转换*/
/*text-transform:uppercase; */ /*转换大写*/
/* text-transform:lowercase; 转换小写*/
text-transform:capitalize; /*首字母大写*/
}
h5 {
/*字体风格 normal - 文本正常显示*/
font-style:normal;/*文本斜体显示*/
font-family: Georgia;/*字体系列*/
text-decoration:underline overline;/* 定义文本上的一条线同时设置两个属性*/
}
h2 {
font-style:italic;
font-family:Sans-serif;
text-decoration: line-through;/* 定义穿过文本下的一条线 */
}
h3 {
font-style:oblique;/*文本倾斜显示/*
font-family:Monospace;

text-decoration: underline;/*定义文本下的一条线。 */
}
h4 {
font-family:Cursive;
text-decoration: blink;/* 定义闪烁的文本 IE、Chrome 或 Safari 不支持 "blink" 属性值 */
}
a {
font-family:Fantasy;
text-decoration: none;/*默认。定义标准的文本*/
}
#p1{
white-space:pre;/*原格式*/
/*
值空白符换行符自动换行
pre-line 合并保留允许
normal 合并忽略允许
nowrap 合并忽略不允许
pre 保留保留不允许
pre-wrap 保留保留允许

*/
background-color:yellow;/*背景色*/
color:red;/*文本字符色*/

}
#a{
outline:#00ff00 dotted thick;/*在元素周围画线*/
outline-style:ridge;
outline-width:15px;
font-weight:normal;
font-size:20px;/*字体大小*/
}
#b{
font-weight:bold;/*粗体*/
}
#c{
font-weight:900;/*关键字 100 ~ 900 为字体指定了 9 级加粗度 400 等价于 normal，而 700 等价于 bold*/
}
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
ul.disc {list-style-type: disc}/*设置列表项标志的类型*/
ul.circle {list-style-type: circle;
list-style-position: inside}
ul.square {list-style-type: square;
list-style-position: outside}
ul.none {list-style-image: url('/i/eg_arrow.gif')}/*将图象设置为列表项标志*/
#t{
border-collapse:collapse;/*border-collapse 属性设置是否将表格边框折叠为单一边框*/
padding:15px;/*如需控制表格中内容与边框的距离*/
border:3px solid blue;
text-align:right;/*text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中*/
vertical-align:bottom;/*vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐*/
}
</style>
</head>
<body>
<h1>tyowow</h1>
<p>f枯燥无味</p>
<h5>这是标题 1</h5>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
<div id="p1">
堆焊
博采众长
真伪莫辨
零工
</div>
<p id="a"> ewofowf</p>
<p id="b"> fewfoweof</p>
<p id="c">ifrteuwpq</p>

<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
<ul class="disc">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="circle">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="square">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

<ul class="none">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<table id="t">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注释：</b>如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>