CSS3选择器-基础选择器

最新推荐文章于 2023-07-10 21:59:06 发布

NGC 2237号

最新推荐文章于 2023-07-10 21:59:06 发布

阅读量1.5k

点赞数

分类专栏： # Web程序设计基础文章标签： css3 css html web

本文链接：https://blog.csdn.net/m0_60416689/article/details/121880642

版权

Web程序设计基础专栏收录该内容

62 篇文章 41 订阅

订阅专栏

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

任务描述

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

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>

NGC 2237号

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器-基础选择器

第1关：CSS基础选择器相关概念任务描述本关任务：完成一组与CSS基础选择器相关的概念题。相关知识为了完成本关任务，你需要掌握：1.通用选择器，2.标签选择器，3.类选择器，4.ID选择器，5.CSS样式的特殊性。通用选择器通用选择器“ * ”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。例如：*{ margin:0px; padding:0px; border:0px }标签选择器指用HTML标签名称作为选择器，按标签名称分类，为页面中
复制链接

扫一扫