CSS3选择器-基础选择器

第1关:CSS基础选择器相关概念

任务描述

本关任务:完成一组与CSS基础选择器相关的概念题。

相关知识

为了完成本关任务,你需要掌握:1.通用选择器,2.标签选择器,3.类选择器,4.ID选择器,5.CSS样式的特殊性。

通用选择器

通用选择器“ * ”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。 例如:

 
  1. *{
  2. margin:0px;
  3. padding:0px;
  4. border:0px
  5. }

标签选择器

指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式 。 例如:

 
  1. p{
  2. font-famliy:黑体;
  3. font-size:12px;
  4. color:green;
  5. }

类选择器

用来为一系列的网页元素定义相同的显示样式。类选择器使用“.”进行标识,后面紧跟类名。 例如: 若设置 <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标签中的文本颜色显示为红色

 
  1. .font1{Color:red}
  2. 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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值