Web4之CSS选择器实验

来源：互联网发布：战地1优化真的好编辑：程序博客网时间：2024/05/21 14:47

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

样式属性提示：

text-decoration: none;

text-decoration:underline;

color:red

样式表：

a:link{text-decoration:none;color:black;}

li:nth-child(even) a:link{text-decoration:none;color:green;}

a:visited{text-decoration:none;color:black;}

li:nth-child(even) a:visited{text-decoration:none;color:green;}

a:hover{text-decoration:underline;color:blue;}

li:nth-child(even) a:hover{text-decoration:underline;color:blue;}

a:active{text-decoration:underline;color:red;}

li:nth-child(even) a:active{text-decoration:none;color:green;}

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

采用的样式属性名提示：background-color，color。本题可以用+span。

样式表：

input:focus,textarea:focus{background-color:yellow;}

button:disabled,input:disabled{color:#CCC;}

input:checked+span{color:red;}

textarea::selection{color:white;background-color:blue;}

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

样式表：

a{color:blue;text-decoration:underline;}

li:nth-child(even) a{color:green;}

li:nth-child(n+3):nth-child(-n+9):nth-child(odd) a{color:red;}

4、为网页ZhuZiQing.html加上选择器，使得:

(1) 链接和访问过的链接显示为蓝色字体并且没有下划线

(2) 按下链接显示为棕色字体且没有下划线

(3) 每个段落左对齐并且首行缩进两个字

(4) 每个段落首字母为1个半字大小

(5) 每个段落第一行用斜体字

(6) 鼠标移动到段落上方时，段落文字显示为绿色字

(7) 偶数段落显示为粗体字

(8) 引用文献采用上标 {vertical-align:super;font-size:10px}

样式表：

a:link,a:visited{color:blue;text-decoration:none;}

a:active{color:#532301;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)编写样式，使得其平时显示如下：

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

不显示元素采用属性：{display:none}

显示元素采用属性：{display:inline} (行内元素)或 {display:block} (块级元素)

样式表：

p:nth-child(n+3){text-indent:2em;}

p+:first-letter{color:blue;font-size:1.5em;}

span{display:none;}

span:first-child{display:inline;}

p:hover span{display:inline;}

p:nth-child(n+3){text-align:left;}

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

样式表：

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:nth-child(n+4):nth-child(-n+7):after,

tr:nth-of-type(3) td:nth-child(-n+4):after{content:"*";}

7、用网页(chess.html)设计一个国际象棋棋盘和棋子：

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

*其中的白色棋子不显眼

html文件的主要内容：

<body>

<h1>Chess</h1>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

（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）相比，新增的样式表：

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.在刚开始打开sohu.html时，发现所有链接都是有下划线的，但是在html代码中并没有发现有表示下划线的地方，苦苦思索原因，才发现超链接是默认带下划线的。

2.对伪类选择器的概念不熟悉

3.不知道如何选中偶数行的链接，查看课件，有nth-child(even)的方法，但是写了代码：li:nth-child(even)后并没有效果。原因是，这样的写法我们选中li的内容，但是li的内容是为空的，这里我们应该选择的是li的子女a标签，因此应该写成li:nth-child(even) a。

4.不知道如何选中文本中的首字母和首行，百度找到答案：CSS利用伪元素:first-letter和:first-line，提供了一种可以只对段落中的某一部分设置样式的方法。

5.CSS如何选择P元素的所有子女span元素：只需要p span就是选择p包含的所有span元素。

6.不知道如何解决格子线会动的问题，请教舍友才知道是因为hover时加了个边框，导致图片的每个方向增大了1个px，因此可以在hover的时候让它再次居中，设置margin:0px或者margin：auto即可。并且自己对margin的属性也不熟悉：margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。分别是上，右，下，左。

0 0