这是我在css控制字体属性所犯的一个错误,可以说是疏忽大意。
题目要求如图:
虽说这题很简单,但是我个人还是做错了,我个人。我先把我之前错误的html代码和正确的css打一遍
错误的1.html
font 梁山英雄排行榜
宋江
卢员外
吴用
豹子头
大刀关胜
正确的one.css
.s1{ color:gold; font-size:30px;}.s2{ color:red; background-color:silver; font-style:italic;}.s3{ background-color:silver; }.s4{ background-color:silver; /*silver为银灰色*/ font-decoration:underline; /*decoration为修饰,underline为下划线*/ font-style:italic; /*字体样式为斜体*/}
结果与实际大相近庭如图:
我的非常不好的想法:首先我本来注意到
的,但是我先把它放在一边,先写完css再说,当写完css我便忘记了更改html中的 标签了。后果:我们看到段落之间差距很大,都出现了下划线,我粗略看了下代码还是没发现
琢磨是不是优先级问题,但是走偏了跑题了,改css也不太对,问群里也没什么答案,甚至起类名连着父子选择器都来了,百度也没好结果,我反思了一阵子。后来:重看一遍html代码发现了
的问题,然后进行了一下总结究其原因(个人总结):还是并没有将“吴用”“豹子头"给包起来虽然将"大刀关胜包起来"并没有什么用,因为问题的起始标签是从"吴用"这开始的到"大刀关胜"结束,也就是他们三者成了一个共同的整体,而后css的类名不一样就造成了优先级问题的冲突。个人觉得这有点像是内存溢出一样。而后我将"吴用"“豹子头”"大刀关胜"换成将其包起来
font 梁山英雄排行榜
宋江
卢员外
吴用
豹子头
大刀关胜
结果如图显示正常:
我把这图贴到这,方便观看,还有个练习二我把正确的html代码和遗漏的css也一起写一遍
2.html
链接