样式选择器
-
head中style组织样式 - 超链颜色变换
<!--
* @Author: zhu xianyu
-->
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本，这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架，将html文件括起来-->
<head>
<meta charset="utf-8">
<style>
# 元素选择器 td {
border: 1px solid blue
}
th {
border: 1px solid blue
}
# 统一说明th的样式。这里也能分组，让th和td在一起，共用一个样式
# 前面加上"*"表示，任何东西的imporant是红色的
# 这里important是一个类
*.important {
color: red
}
*[title] { color:red } # 包含title的都为红色(样式)
p em { background-color: green; } # 在p里面的em遵循该样式
div > em {background-color: yellow;} # 紧跟着div的下一个em起作用，不是紧跟着的，不起作用
h1 + p {background-color: gray;} # 相邻着h1的那个p使用该样式
a:visited {color: #FF0000;} # 使用伪类，调整链接的颜色
a:link {color: blue;}
# a:hover
# a:active
</style>
</head>
<body>
<table>
<!--border : 画边框 粗细 样式 颜色-->
<!--border-collapse : collapse调整边框重叠，加上之后两个边框重叠只会显示一个
seperable 两个框线是分开的-->
<tr>
<th>
王勃
</th>
<!--table-layout : auto自动计算列宽 fixed列宽由第一行的列宽决定-->
<!--text-align : 文本的对齐方式 right left center -->
<!--vertical-algin : 垂直方向上文字的对齐方式-->
<!--padding : 文字和框之间的间隔-->
<!--caption-side : 指定caption在表的上面还是下面-->
<th>李白</th>
<th>杜甫</th>
<th>苏轼</th>
</tr>
<tr>
<th>子安</th>
<th>太白</th>
<th>子美</th>
<th>子瞻</th>
</tr>
<caption>成绩</caption>
</table>
<p class="important">
红色段落
<em>检验一下</em>
后面的内容
</p>
<h1>
h1段
</h1>
<p>紧邻着h1的p</p>
<a href="http://news.163.com">网易新闻</a>
</body>
</html>
显示效果：