css元素选择器,css3样式选择器

第一关) 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； }类选择器

用于为一系列web元素定义相同的视觉样式。类选择器由“.”标识，后跟类名。例如，如果设置p class=font01你好/p，则此p标签设置的样式为. font01{color:green； }

身份选择器

定义唯一的web元素显示样式。 ID选择器由“#”标识，后跟ID名称。例如，如果设置p id=green你好/p，则此p标签设置的样式为#green{color:green； }特别注意：在HTML和XHTML中，类名和ID名称的定义是区分大小写的。

CSS风格的特殊性

如果基本选择器的多个规则应用于同一元素，则权重较高的样式优先。样式的优先级为id选择器、类选择器、标签选择器和通用选择器。例如，如果设置了p class=font1CSS样式的特殊性，/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。

在测试中说明补充代码后，请点击测评。平台测试你写的代码，如果正确的话完成突破任务。

！ doctypehtmlhtmlheadmetacharset=' utf-8 ' /！ ----------begin-------styletype=' test/CSS ' * { font-size 3360100 px； color:#D33E2A； (} /style！ ----------------------------headbodystrongg/strongstrongo/strongstrongg/strongstrongg

编程要求使用标签stong选择器在右侧编辑器的Begin - End区域中设置文本样式。具体来说，1 .将文本大小的值设置为100px 2，并将文本颜色的属性值设置为#D33E2A。

在测试中说明补充代码后，请点击测评。平台测试你写的代码，如果正确的话完成突破任务。

！ doctypehtmlhtmlheadmetacharset=' utf-8 ' /！ ----------begin-------style strong { font-size 3360100 px； color:#D33E2A； (} /style！ --------------------------- headbodystrongg/strongstrongo/strongstrongg/strongstrongg/strongstrong

strong>e</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> G o o g l e </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">strong{ font-size:100px;}.blue{color:#2B75F5;}.red{color:#D33E2A;}#orange{color:#FFC609;}#green{color:#00A45D;} </style></head><body>Google</body></html>