id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page title</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>学生成绩表</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
#kaohao{
background-color: aqua;
width:150px;
font-size:20px;
text-align: center;
}
#class{
background-color:wheat;
width:150px;
font-size: 20px;
text-align: center;
}
#name{
background-color: rgb(0, 140, 255);
width:150px;
font-size: 20px;
text-align: center;
}
#chinese{
background-color:snow;
width:150px;
font-size: 20px;
text-align: center;
}
#math{
background-color:darkturquoise;
width:150px;
font-size: 20px;
text-align: center;
}
#english{
background-color:rgb(0, 209, 139);
width:150px;
font-size: 20px;
text-align: center;
}
#theory{
background-color:rgb(7, 209, 0);
width:150px;
font-size: 20px;
text-align: center;
}
#practice{
background-color:rgb(171, 209, 0);
width:150px;
font-size: 20px;
text-align: center;
}
#total{
background-color:rgb(209, 0, 192);
width:150px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "header" style="background-color: coral;clear: both;text-align: center">
<font size ="10">
<b>学生成绩表</b>
</font>
</div>
<div id = "content" style = "background-color: coral">
<table>
<thead>
<tr>
<th>
<div id = "kaohao">
<b>考号</b>
</div>
</th>
<th>
<div id = "class">
<b>班级</b>
</div>
</th>
<th>
<div id = "name">
<b>姓名</b>
</div>
</th>
<th>
<div id = "chinese">
<b>语文</b>
</div>
</th>
<th>
<div id ="math">
<b>数学</b>
</div>
</th>
<th>
<div id = "english">
<b>英语</b>
</div>
</th>
<th>
<div id = "theory">
<b>理论</b>
</div>
</th>
<th>
<div id = "practice">
<b>实践</b>
</div>
</th>
<th>
<div id = "total">
<b>总分</b>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
<tr>
<th>
<div id = "kaohao">
<b>9800500</b>
</div>
</th>
<th>
<div id = "class">
<b>软件2班</b>
</div>
</th>
<th>
<div id = "name">
<b>王钧</b>
</div>
</th>
<th>
<div id = "chinese">
<b>62</b>
</div>
</th>
<th>
<div id ="math">
<b>72</b>
</div>
</th>
<th>
<div id = "english">
<b>91</b>
</div>
</th>
<th>
<div id = "theory">
<b>131</b>
</div>
</th>
<th>
<div id = "practice">
<b>133</b>
</div>
</th>
<th>
<div id = "total">
<b>489</b>
</div>
</th>
</tr>
</tbody>
</table>
</div>
<div id = "footer" style="background-color: coral;clear: both;text-align:center;">
版权 ©️corpright </div>
</div>
</body>
</html>
1992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
