<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>css样式基本示例代码-www.jb200.com</title>
<style type="text/css">
/*CSS类选择器:按钮样式*/
.btn
{
background-color: SkyBlue;
width: 160px;
height: 24px;
font-size: 16px;
border: 1px solid red;
color: White;
}
/*鼠标经过样式*/
.btn:hover
{
background-color: Sienna;
width: 160px;
height: 24px;
font-size: 16px;
border: 1px solid yellow;
color: White;
}
/*父样式*/
.divouter
{
position: absolute;
left: 171px;
top: 179px;
background-color: SeaGreen;
color: Gold;
overflow: scroll;
}
/*继承父项样式, html元素也必须是父子关系*/
.divouter .redbg
{
background-color: Red;
}
/*继承父项样式*/
.divouter .yellowbg
{
background-color: yellow;
}
/*yellowbg下的所有td*/
.divouter .yellowbg td
{
background-color: Gray;
}
/*选择所有td*/
td
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
/*id 选择器:选择id=login_tab的元素*/
#login_tab
{
width: 500px;
text-align: right;
}
/* 派生选择器:通过依据元素在其位置的上下文关系来定义样式
一层一层往下选择,最终选择最后那层的td*/
.divouter table tr td table td
{
width: 500px;
text-align: center;
background-color: Blue;
}
/*选择器的分组:分享相同的声明,所有的标题元素都是绿色的*/
h1, h2, h3, h4, h5, h6
{
color: green;
}
/*派生选择器:
类名为 fancy 的td单元
*/
td.fancy
{
color: #f60;
background-color: #666;
}
/*派生选择器:
类名为 fancy 的th单元
*/
th.fancy
{
color: #666;
background-color: #f60;
}
/*属性选择器:
带有 title 属性的所有元素设置样式
*/
[title]
{
color: red;
background-color: ForestGreen;
}
/*属性选择器:
下面的例子为 title="W3School" 的所有元素设置样式：
*/
[title="W3School"]
{
color: #f60;
background-color: DarkCyan;
border: 5px solid Black;
}
/*属性选择器:
结合派生
*/
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: YellowGreen;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<h1>
h1</h1>
<h2>
h2</h2>
<h3>
h3</h3>
<div class="divouter">
.divouter
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="button" name="name" value=" Test" class="btn" />
</td>
<td>
<div class="redbg">
.divouter .redbg</div>
</td>
<td>
<div class="yellowbg">
.divouter .yellowbg
<table border="1" cellpadding="0" cellspacing="0" id="login_tab">
<tr>
<td>
.divouter .yellowbg td
</td>
</tr>
</table>
</div>
</td>
<td>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
th
</th>
<td>
派生选择器 td
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
TD2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="fancy">
派生选择器 td.fancy
</td>
<th class="fancy">
派生选择器 th.fancy
</th>
<td title="Test title">
属性选择器Test title
</td>
<td title="W3School">
属性选择器W3School
</td>
<td>
<input type="text" name="name" value="属性选择器:结合派生 " /></td>
</tr>
</table>
</div>
</body>
</html>
