web前端开发与应用——选择器

最新推荐文章于 2022-05-04 00:32:37 发布

leo Messi 7

最新推荐文章于 2022-05-04 00:32:37 发布

阅读量622

点赞数

文章标签：前端 css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_59742894/article/details/121798745

版权

通用选择器

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

*{
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> 当

.font1{Color:red}
p{color:blue}

p标签中的文本颜色显示为红色

编程要求

请在右侧编辑器的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

编程要求

请在右侧编辑器的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;}

.blue{color:#2B75F5;}

#green{color:#00A45D;}

.red{color:#D33E2A;}

</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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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