HTML&CSS实验(3)

【实验目的】

掌握CSS选择器的使用方法。

【实验工具】

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

【参考课件】

02A、CSS(上).pdf 02B、CSS(下).pdf

【提示事项】

* 利用浏览器的缩放功能可以一次截到整个内容
* 样式例子： color:green; 字体颜色
font-style:italic; 斜体显示
font-style:normal; 正常显示（非斜体）
font-size:larger; 字号变大
font-weight:bold; 粗体显示
font-weight:bolder; 粗体显示(更粗)
text-decoration:underline; 文本加下划线
* 颜色(color)取值: black|red|green|blue|brown

【实验内容】

本次实验不使用nth-child选择器和nth-of-type选择器。
1、为网页song1.html加上选择器后尽量得到如下效果(文字)：

完成后进行保存(song1.html)并截屏浏览器(ctrl+alt+PrintScreen)：

运行后截屏浏览器如下：

样式表如下：

<style type="text/css">
   p span{color:green;}
   p em{color:blue;}
   p.b{font-style:italic;}
   em{font-style:normal;}
   em{font-size:larger;}
   #c{text-decoration:underline;}  
</style>

2、为网页song2.html加上选择器后尽量得到如下效果：

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

运行后截屏浏览器如下：

样式表如下：

<style type="text/css">
       div>ul>ul>li,div>ul>ul>ul>li{font-size:150%;}
       #last,#first li+li+li{font-weight:bold;}
       div>ul>ul>li{color:green}
       #last,.boat{font-style:italic}
       #first li+li+li+li{color:blue}
</style>

3、为网页song3.html加上选择器后尽量得到如下效果：

完成后进行保存(song3.html)并截屏浏览器(ctrl+alt+PrintScreen)：

运行后截屏浏览器如下：

样式表如下：

<style type="text/css">
  em{font-weight:bolder;}
　em{color:blue;}
  b+span{color:brown;}
  em+span{color:red;}
  span+span{color:green;}
  b~b~b{text-decoration:underline;}
</style>

4、为网页song4.html加上伪类(:link)选择器和属性选择器（title属性值“小”、“爸”、“听”）后尽量得到如下效果：

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

运行后截屏浏览器如下：

样式表如下：

<style type="text/css">
   a[title^="小"]:link{color:red;}
   a[title*="爸"]:link{color:green;}
   a[title*="听"]:link{font-style:italic;color:blue;}
</style>

【完成情况】

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

【实验体会】

①　在做第四个实验的时候，有一种无从下手的感觉，一开始看ppt以为属性alt是固定的，在写完代码运行以后没有任何变化，在多次尝试以后，把alt改成了title才得以实现。
②　在song4.html含有“小”的属性中，一开始用了语句a[title*=”小”]:link{color:red;}导致其他含有小但不需要改变的也发生了改变，后来经过同学提醒，将此语句改为a[title^=”小”]:link{color:red;}就正确了。两者的区别在于：前者表示选择属性值包含“小”的所有的元素；后者表示选择属性值以“小”开头的所有元素。
③　在song4.html含有“爸”的属性中，刚开始使用语句a[title*=”爸”]:link{color:green;}，导致所有含有属性值“爸”的元素都发生了变化，但有一个根据题目要求是无需改变的，后来发现该元素含有属性值“听”，因此，在原有语句 a[title*=”听”]:link{font-style:italic;}的基础上又加上了一个选择条件，即color为blue，即变为 a[title*=”听”]:link{font-style:italic;color:blue;}，且该语句要放在语句 a[title*=”爸”]:link{color:green;}之后。