HTML&CSS实验(4)---学习CSS选择器的使用方法

时间 2019-11-09

标签 html&css html css 实验学习选择器使用方法栏目 CSS 繁體版

原文原文链接

【实验题目】HTML&CSS实验(4)css

【实验目的】学习CSS选择器的使用方法。html

----------------------我的做业，若是有后辈的做业习题一致，能够参考学习，一块儿交流，请勿直接copychrome

【调试工具】浏览器和编辑器。三种可选编辑方式：编程

(1) 本地调试：记事本浏览器

(2) 在线调试：http://172.18.187.11:8080/lab/html4/index.jspjsp

* 在线图像存放地点：http://172.18.187.11:8080/lab/html4/images编辑器

【实验要求】工具

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

不能用!important。字体

【实验内容】

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

参考效果：

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

样式表：

可行√ 不可行:最后一句的伪类属性没法做用

l a没法适应于nth-child，选择odd时全选，选择even时不执行；

l li可以使用nth-child但必须结合a的伪类选择器使用（不结合a则无显示，由于li没有直接的文字内容）；

l 单纯在a的标签下修改颜色，使用伪类选择器可执行（优先级问题，伪类选择器优先于元素选择器）；可是若是利用nth-child伪类选择器选择以后，同时使用伪类选择器，那么伪类选择器的内容不会被执行（前者的优先级高，会覆盖伪类选择器），须要从新编写一遍偶数的伪类连接效果。

l 综上考虑到这个缘由，能够经过利用nth-child伪类选择器全选，来提升其连接伪类语句的优先级，以下：可正常执行。

可行√

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

参考效果：

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

样式表：

//从新阅读了老师的表单样例，对表单的实现有了新的理解，也发现了以前没有找到的能够实现边框带文字的<legend>标签（仅用于表单<form>）

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

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

样式表：

l 第三个选择器的even不会覆盖第二个选择器的3~9之间的样式，因此第二个选择器要加上not的内容（一样是优先权的缘由）

l 并列的内容中不能够有空格，若是“:not”以前有空格，则浏览器不会执行这一选择器的内容

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

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

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

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

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

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

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

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

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

参考效果：

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

样式表：

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

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

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

样式表：

//一样的style格式，在不一样的浏览器下，会有不一样的表现形式，好比在如上截图的chrome中，hover的选择器选中以后，first-letter中的内容会一块儿做用，显示为蓝色大1.5倍；可是在edge中，则不会同时做用，并且hover离开后，做用效果会消失，变成普通字体，以下：

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

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

样式表：

//若是最后一条语句不加“：after”，则这条语句不会做用-----:after 选择器在被选元素的内容后面插入内容，须要使用 content 属性来指定要插入的内容。（也就是说，若是使用content来插入内容，就必须使用：after选择器）

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

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

*其中的白色棋子不显眼

完成后截图：

//修改了h1的font-size为4倍，table和td的属性为-------border:solid 2px gray;

html文件的主要内容：

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

问题：为了实现步骤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;

}

//一样的，在这个例子中，使用一样的style，在不一样的浏览器下会有不一样的结果：在edge浏览器中，即便不加margin：auto；使其自动适应居中，也不会有table格线偏移的问题；可是在IE浏览器和chrome浏览器中若是不加，则会出现hover移动指向后出现格线偏移的后果，添加后正常。

【完成状况】

是否完成了这些步骤？(√完成 ×未作或未完成)

1 [√ ] 2 [√] 3 [√] 4 [√] 5 [√] 6 [√ ] 7(1)[ √] 7(2) [√ ]

【实验体会】

写出实验过程当中遇到的问题，解决方法和本身的思考;并简述实验体会（若是有的话）。

在实验中遇到的问题在此前的分小节的实验样例中已经提到了问题和解决方法，在这里不详细描述，只列出总结要点：

l a没法适应于nth-child，选择odd时全选，选择even时不执行

l li可以使用nth-child但必须结合a的伪类选择器使用（不结合a则无显示，由于li没有直接的文字内容）

l 单纯在a的标签下修改颜色，使用伪类选择器可执行（优先级问题，伪类选择器优先于元素选择器）；可是若是利用nth-child伪类选择器选择以后，同时使用伪类选择器，那么伪类选择器的内容不会被执行（前者的优先级高，会覆盖伪类选择器），须要从新编写一遍偶数的伪类连接效果

l 综上考虑到这个缘由，能够经过利用nth-child伪类选择器全选，来提升其连接伪类语句的优先级便可正常执行

l 从新阅读了老师的表单样例，对表单的实现有了新的理解，也发现了以前没有找到的能够实现边框带文字的<legend>标签（仅用于表单<form>）

l 并列的内容中不能够有空格，若是“:not”以前有空格，则浏览器不会执行这一选择器的内容

l 相同优先权选择器的even不会覆盖第二个选择器的3~9之间的样式，因此第二个选择器要加上not的内容（一样是优先权的缘由

l 一样的style格式，在不一样的浏览器下，会有不一样的表现形式，好比在chrome中，hover的选择器选中以后，first-letter中的内容会一块儿做用，显示为蓝色大1.5倍；可是在edge中，则不会同时做用，并且hover离开后，做用效果会消失，变成普通字体；在edge浏览器中，即便不加margin：auto；使其自动适应居中，也不会有table格线偏移的问题；可是在IE浏览器和chrome浏览器中若是不加，则会出现hover移动指向后出现格线偏移的后果，添加后正常。

l :after 选择器在被选元素的内容后面插入内容，须要使用 content 属性来指定要插入的内容。（也就是说，若是使用content来插入内容，就必须使用：after选择器）

若是说以前的Web设计编程只是把内容编写出来，应用一些css的style属性，那么这一部分就有些设计的成分在里面了。只是简单的style添加，就能体现出一些简单实用看上去舒服的设计感，虽然只是按照老师所给的模板来完成，可是仍旧让我感到新奇和激动，对从此的实验也愈来愈期待了。