HTML&CSS实验(4)

来源：互联网发布：孔明棋算法编辑：程序博客网时间：2024/05/17 23:38

【实验目的】

学习CSS选择器的使用方法。

【实验工具】

浏览器和编辑器。三种可选编辑方式：
（1）本地调试（记事本）
（2）在线调试：http://172.18.187.11:8080/lab/html4/

【实验要求】

除了题目中有说明，本次实验均不使用连接符~和+，也不能自行加id和class，不能修改正文（body的内容），只能按题意增加或修改样式(style的内容)。可以用+span。
不能使用!important。

【实验内容】

1、为网页sohu.html添加样式。首先要求对于链接的访问，平时和访问过的链接都没有下划线并且显示为黑色字，鼠标移动到链接上方时链接文字显示下划线和蓝色字，点击(按下)链接时链接文字显示下划线并且变为红色字；然后，设计样式让每行的偶数链接显示绿色字并且没有下划线(如下图所示)，悬浮和活动链接与原来一样。
参考效果：

完成后保存网页(sohu.html)并截屏浏览器(ctrl+alt+PrintScreen)：

样式表如下：

a{    color:blue;text-decoration:underline;}li:nth-child(even) a{    text-decoration:none;color:green;}a:link{    text-decoration:none;color:black;}a:visited{    text-decoration:none;color:black;}a:hover{    text-decoration:underline;color:blue;}a:active{    text-decoration:underline;color:red;}li:nth-child(even) a:hover{    text-decoration:underline;color:blue;}li:nth-child(even) a:active{    text-decoration:underline;color:red;}

2、为网页register.html添加样式，使得：被聚焦的输入域的背景变为黄色，单选或多选的选中项的文字显示为红色字；disabled的按钮的字体显示为灰色字；textarea中选中的文字颜色变为白色，背景变为蓝色。
参考效果：

完成后进行保存(register.html)并截屏浏览器：

样式表如下：

input:focus,textarea:focus{   background-color:yellow;}input:checked+span{   color:red;}input:disabled,button:disabled{   color:gray;}texarea::selection{   color:white;   background-color:blue; }

3、(sohu1.html)实现下图样式。注意：除了加指定的选择器，不要修改任何代码。参考效果：

完成后保存网页(sohu1.html)并截屏浏览器(ctrl+alt+PrintScreen)：

样式表如下：

a{    color:blue; }li:nth-child(n+3):nth-child(-n+9):not(:nth-child(even)) a{    color:red;}li:nth-child(even) a{    color:green;}

4、为网页ZhuZiQing.html加上选择器，使得:
(1) 链接和访问过的链接显示为蓝色字体并且没有下划线
(2) 按下链接显示为棕色字体且没有下划线
(3) 每个段落左对齐并且首行缩进两个字
(4) 每个段落首字母为1个半字大小
(5) 每个段落第一行用斜体字
(6) 鼠标移动到段落上方时，段落文字显示为绿色字
(7) 偶数段落显示为粗体字
(8) 引用文献采用上标 {vertical-align:super;font-size:10px}
参考效果：

用文件ZhuZiQing.html保存完成后的网页并截屏浏览器(ctrl+alt+PrintScreen)：

样式表如下：

<style type="text/css"> article {max-width:800px;text-align:center;font-size:20px;margin:20px auto;} a:link{    color:blue;    text-decoration:none;} a:visited{    color:blue;    text-decoration:none;} a:active{    color:brown;    text-decoration:none;}p{    text-align:left;    text-indent:2em;}p:first-letter{    font-size:1.5em;}p:first-line{    font-style:italic;}p:hover{    color:green;}p:nth-of-type(even){    font-weight:bold;}.ref{    vertical-align:super;    font-size:10px;}

5、为网页(LotusPond .html)编写样式，使得其平时显示如下：

当把鼠标移动到某个段落(下面为第二段)上方时，显示如下：

用文件LotusPond .html保存完成后的网页并截屏浏览器(ctrl+alt+PrintScreen)：

样式表如下：

<style type="text/css"> article {max-width:800px;text-align:center;margin:20px auto;} p:nth-child(n+3){    text-indent:2em;}p:nth-child(n+3){    text-align:left;}p:nth-child(n+3):first-letter{    color:blue;    font-size:1.5em;}span{    display:none;}span:first-child{    display:inline;}p:hover span{    display:inline;}

6、在网页(calendar.html)中增加选择器（不要改动样式的次序或增加样式）后得到如下网页显示：

用文件calendar.html保存完成后的网页并截屏浏览器(ctrl+alt+PrintScreen)：

样式表如下：

<style>  table {width:494px;height:281px;border-collapse:collapse;text-align:center;margin:20px auto}  table,td {border:solid 1px black;}  h1 {text-align:center}  tr:first-child>td{background-color:#DDD}  td:nth-child(even){background-color:rgb(200,200,255);}  tr:nth-of-type(2) td:nth-child(-n+3){color:grey;}  tr:nth-of-type(2) td:not(:nth-child(-n+3)):after,tr:nth-of-type(3) td:nth-child(-n+3):after{content:"*";} </style>

7、用网页(chess.html)设计一个国际象棋棋盘和棋子：
（1）设计棋盘并摆设棋子(棋子图像文件在images目录中)，只能使用标签h1、table、tr、td、img（已给出了它们的样式），不能使用其他标签，也不能使用类和id属性：

*其中的白色棋子不显眼
运行后截屏浏览器如下：

html文件的主要内容如下：

<body><h1>chess</h1><table><tr><td><img src='images/rook.gif'></td><td><img src='images/knight.gif'></td><td><img src='images/bishop.gif'></td><td><img src='images/Queen.gif'></td><td><img src='images/King.gif'></td><td><img src='images/bishop.gif'></td><td><img src='images/knight.gif'></td><td><img src='images/rook.gif'></td></tr><tr><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td><td><img src='images/pawn.gif'></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><！--此处省略两行--><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td><td><img src='images/pawn2.gif'></td></tr><tr><td><img src='images/rook2.gif'></td><td><img src='images/knight2.gif'></td><td><img src='images/bishop2.gif'></td><td><img src='images/Queen2.gif'></td><td><img src='images/King2.gif'></td><td><img src='images/bishop2.gif'></td><td><img src='images/knight2.gif'></td><td><img src='images/rook2.gif'></td></tr></table></body>

（2）按如下步骤和要求为棋盘加上样式：
A、一般状态下，每个格子(td)具有两种背景色(background-color)之一：rgb(100,100,100), rgb(200,200,200)。

B、鼠标移动到淡色格上方时，淡色格的背景色(background-color)变为rgb(200,200,240):

C、鼠标移动到深色格上方时，深色格的背景色(background-color)变为rgb(100,100,160):

D、当鼠标移到白色棋子(img)上方时，白色棋子边框显示黄色虚线border:dashed 1px yellow。参见步骤B和步骤C的图。
E、当鼠标移到黑色棋子(img)上方时，黑色棋子边框显示红色虚线border:dashed 1px red。参见步骤B和步骤C的图。
F、要求悬浮在棋子上时格子线不动。
用文件chess.html保存完成后的网页，当鼠标移到黑色棋子和白色棋子上分别截一幅图：

与步骤（1）相比，步骤（2）新增的样式表：

tr:nth-of-type(odd)>td:nth-of-type(odd),tr:nth-of-type(even)>td:nth-of-type(even){    background-color:rgb(200,200,200);}  tr:nth-of-type(odd)>td:nth-of-type(even),tr:nth-of-type(even)>td:nth-of-type(odd){    background-color:rgb(100,100,100);}  tr:nth-of-type(odd)>td:nth-of-type(odd):hover,tr:nth-of-type(even)>td:nth-of-type(even):hover{    background-color:rgb(200,200,240);}  tr:nth-of-type(odd)>td:nth-of-type(even):hover,tr:nth-of-type(even)>td:nth-of-type(odd):hover{    background-color:rgb(100,100,160);}tr:nth-child(n+7) td>img:hover{    border:dashed 1px yellow;    margin:auto;}tr:nth-child(-n+2) td>img:hover{    border:dashed 1px red;    margin:auto;}

问题：为了实现步骤E增加的样式是什么？

tr:nth-child(-n+2) td>img:hover{border:dashed 1px red;}

问题：为了实现步骤F增加的样式是什么？

tr:nth-child(n+7) td>img:hover{    border:dashed 1px yellow;    margin:auto;}tr:nth-child(-n+2) td>img:hover{    border:dashed 1px red;    margin:auto;}

【完成情况】

是否完成了这些步骤？(√完成 ×未做或未完成)
1 [√] 2 [√] 3 [√] 4 [√] 5 [√] 6 [√] 7(1)[√] 7(2) [√]

【实验体会】

（1）在sohu.html中，发现a无法适应于nth-child，选择odd时全选，选择even时不执行，需要运用li。需要注意的是，li可使用nth-child但必须结合a的伪类选择器使用（不结合a则无显示，因为li没有直接的文字内容）。
（2）在sohu.html中，因为前面已经利用nth-child伪类选择器进行选择，如果同时使用伪类选择器，那么伪类选择器的内容不会被执行（前者的优先级高，会覆盖伪类选择器），因此需要重新编写一遍偶数的伪类链接效果。如下所示：

（3）在为网页register.html添加样式中，为使单选或多选的选中项的文字显示为红色字，应写成input:checked+span{color:red;}而非…span+checked…，否则无法正常显示。
（4）在为网页register.html添加样式中，使单选或多选的选中项的文字显示为红色字与使其被聚焦的输入域的背景变为黄色无法同时实现，且后者会覆盖前者，即若代码中先实现聚焦在显示红色，则仅显示红色，同理，若代码中先实现红色再聚焦，则最终只能聚焦。
（5）在为网页sohu1.html添加样式中，发现第三个选择器的even不会覆盖第二个选择器的3~9之间的样式，所以第二个选择器要加上not的内容，这与优先级有关；并列的内容中不可以有空格，如果“:not”之前有空格，则浏览器不会执行这一选择器的内容，且需注意的是：not后面的“：”应该加在括号中，否则该语句不执行。
（6）为网页ZhuZiQing.html加上选择器时，为了使偶数段落显示为粗体字，可以用p:nth-of-type(even){font-weight:bold;}表示或者p:nth-child(odd){font-weight:bold;}，这是因为nth-of-type双亲的子女元素中只有p元素参与计数，但是nth-child中，双亲的各种类型的子女元素均参与计数，但只有相应位置为元素p才会被选中。
（7）在网页(calendar.html)中增加选择器时，为了使第一行的灰色不被后面的蓝色覆盖，将其选择器写成tr:first-child>td而不写成tr:first-child以增加其优先级，避免样式重叠。
（8）在网页(calendar.html)中增加选择器时，:after 选择器在被选元素的内容后面插入内容，需要使用 content 属性来指定要插入的内容。即，如果使用content来插入内容，就必须使用：after选择器，否则将无法该语句将无法执行。
（9）同样的style格式，在不同的浏览器下，会有不同的表现形式。我们在实验中应该学会总结，避免掉坑。

阅读全文

1 0