<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>CSS层叠样式表</title>
<!--外部样式表
<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
hr{color:red;}
p{margin-left:20px;}
body{background-color:blue;}
--> <!--内部样式表
<head>
<style>
hr{color:red;}
p{margin-left:20px;}
body{background-color:blue;}
</style>
</head>
--> <!--内联样式表
<p style="hr{color:red;margin-left:20px;"></p>
--> <style type="text/css">
/*id选择器*/
#para1
{
text-alignLcenter;
color:red;
}
/*class(类)选择器*/
.center{text-align:center;}
/*指定特定的元素使用class*/
p.center{text-align:center;} /*文本对齐方式*/
h1{text=align:center;}
/*文本修饰*/
a{text-decoration:none;}
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
/*文本转换*/
p.uppercase{text-transform:uppercase;}
p.lowercase{text-transform:lowercase;}
p.capitalize{text-transform:capitalize;}
/*文本缩进*/
p{text-indent:50px;} /*字体样式 正常 斜体 倾斜的文字*/
p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;} /*用em来设置字体大小*/
p{font-size:2.5em;}/*40px/16=2.5em*/ /*CSS链接样式*/
a:link{color:red;}/*正常,未被访问过的链接*/
a:visited{color:red;}/*用户已经访问过的链接*/
a:hover{color:red;}/*当用户鼠标放在链接上时*/
a:active{color:red;}/*链接呗点击的那一刻*/ /*列表-缩写属性*/
ul
{
list-style:spuare url("spaurple.gif");
} /*表格 折叠边框*/
table
{
border-collapse:collapse;
}
bable,th,td
{
border:1px solid black;
}
/*表格属性*/
td
{
text-align:center;
height:100px;
width:100px;
vertical-align:bottom;
padding:10px;
border:1px solid blue;
background-color:green;
color:black;
} /*CSS边框属性*/
border-style:none;/*默认无边框*/
border-style:dotted;/*点线框*/
border-style:dashed;/*虚线框 */
border-style:solid;/*实线边界*/
border-style:double;/*定义两个边界 值等于border-width*/
border-style:groove;/*3D沟槽边界*/
border-style:ridge;/*3D脊边界*/
border-style:inset;/*3D的嵌入边框*/
border-style:outset;/*3D的突出边框*/ /*CSS Display(显示) Visibility(可见性)*/
a.hidden{visibility:hidden;}/*任然占空间*/
a.hidden{visibility:none;}/*不占空间*/ /*改变元素显示*/
li{display:inline;}/*把列表项显示为行内元素*/
span{display:block}/*把span元素显示为块元素*/ /*CSS 定位*/
/*相对定位relative 原本锁占空间不变*/
h2.pos_top
{
position:relative;
top:-50px;
}
/*绝对定位Absolute 不占据空间*/
h2
{
position:absolute;
left:100px;
top:150px;
}
/*Fixed 定位 位置固定 即使窗口滚动 也不移动*/
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
} /*CSS 水平对齐 Horizontal align*/
/*中心对齐 使用margin属性*/
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:red;
}
/*使用position属性设置左右对齐*/
.right
{
position:absolute;
right:0px;
width:300px;
background-color:blue;
}
/*使用float属性设置左右对齐*/
.right
{
float:right;
width:300px;
background-color:red;
} /*CSS组合选择符*/
/*后代选取器*/
div p
{
font-size:12px;
} /*子元素选取器*/
div>p
{
font-size:12px;
}
/*相邻兄弟选取器*/
div+p
{
font-size:12px;
}
/*普通相邻兄弟选取器*/
div~p
{
font-size:12px;
}
ul
{
list-style:none;
margin:0;
padding:0;
}
/*垂直导航栏*/
/*a
{
display:block;
width:60px;
}*/
/*水平导航栏*/
li
{
display:inline;
} /*图片栏*/
div.img
{
margin:2px;
border:1px solid red;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid blue;
}
div.img a:hover img
{
border:1px solid pink;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
<script type="text/javascript">
document.write("CSS详细样式");
</script>
</head>
<body>
<div>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div> </body>
</html>