第1关:CSS基础选择器相关概念
任务描述
本关任务:完成一组与CSS基础选择器相关的概念题。
相关知识
为了完成本关任务,你需要掌握:1.通用选择器,2.标签选择器,3.类选择器,4.ID选择器,5.CSS样式的特殊性。
通用选择器
通用选择器“ * ”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。 例如:
*{
margin:0px;
padding:0px;
border:0px
}
标签选择器
指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式 。 例如:
p{
font-famliy:黑体;
font-size:12px;
color:green;
}
类选择器
用来为一系列的网页元素定义相同的显示样式。类选择器使用“.”进行标识,后面紧跟类名。 例如: 若设置 <p class=font01>您好</p>
则这个p标签设置的样式可写为: .font01{color:green;}
ID选择器
用来为唯一的网页元素定义显示样式。ID选择器使用“#”进行标识,后面紧跟ID名。 例如: 若设置 <p id=green>您好</p>
则这个p标签设置的样式可写为: #green{color:green;}
特别注意:HTML和XHTML中,类名和ID名定义是区分大小写的!!
CSS样式的特殊性
当基础选择器的多个规则都应用在同一元素时,权重高的样式优先。 样式优先级从高到低分别是: id选择器、类选择器、标签选择器、通用选择器。 例如: 若设置 <p class=font1>CSS样式的特殊性</p>
当p标签中的文本颜色显示为红色
.font1{Color:red}
p{color:blue}
1、id选择器使用( )进行标识,后面紧跟id名(D #)
2、类选择器使用( )进行标识,后面紧跟class名。(C .)
3、CSS选择器的优先级从高到低分别为,通用选择器、标签选择器、类选择器、ID选择器。(B 错)
第2关:通用选择器
任务描述
本关任务:使用通用选择器设置文字样式。
编程要求
请在右侧编辑器的Begin - End区域内使用通用选择器对文本进行样式设置,具体要求是: 1.先将文本字号大小值设置为100px 2.再将文本颜色属性值设置为#D33E2A。
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--------- Begin-------->
<style type="test/css">
*{font-size:100px;color:#D33E2A;}
</style>
<!--------- End-------->
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>
第3关:标签选择器
任务描述
本关任务:使用标签选择器设置文字样式。
编程要求
请在右侧编辑器的Begin - End区域内使用标签stong选择器对文本进行样式设置,具体要求是: 1.先将文本字号大小值设置为100px 2.再将文本颜色属性值设置为#D33E2A。
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--------- Begin-------->
<style>
strong{font-size:100px;color:#D33E2A;}
</style>
<!--------- End-------->
</head>
<body>
<strong>G</strong>
<strong>o</strong>
<strong>o</strong>
<strong>g</strong>
<strong>l</strong>
<strong>e</strong>
</body>
</html>
第4关:文字Google结构设计
任务描述
本关任务:设置文字Google的主体结构。
编程要求
请在右侧编辑器的Begin - End区域内编辑字母,具体要求是: 1.第一个字母为G,使用strong标签作用,类名为blue 2.第二个字母为o,使用strong标签作用,类名为red 3.第三个字母为o,使用strong标签作用,id名为orange 4.第四个字母为g,使用strong标签作用,类名为blue 5.第五个字母为l,使用strong标签作用,id名为green 6.第六个字母为e,使用strong标签作用,类名为red
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
</head>
<body>
<!--------- Begin-------->
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
<!--------- End-------->
</body>
</html>
第5关:文字Google样式设计
任务描述
本关任务:使用类选择器和id选择器设置文字样式。
编程要求
请在右侧编辑器的Begin - End区域内设置各字母的样式,具体要求是: 1.类名为blue的元素对应的文字颜色值为#2B75F5 2.类名为red的元素对应的文字颜色值为#D33E2A 3.id名为orange的元素对应的文字颜色值为#FFC609 4.id名为green的元素对应的文字颜色值为#00A45D
测试说明
补充代码后,请点击测评,平台会对你编写的代码进行测试,如果正确则完成闯关任务。
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>文字Logo</title>
<style type="text/css">
<!--------- Begin-------->
strong{ font-size:100px;}
.blue{color:#2B75F5;}
.red{color:#D33E2A;}
#orange{color:#FFC609;}
#green{color:#00A45D;}
<!--------- End-------->
</style>
</head>
<body>
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
</body>
</html>