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

通用选择器

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

 
  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>

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

<!--------- Begin-------->

strong{ font-size:100px;}

.blue{color:#2B75F5;}

.red{color:#D33E2A;}

#orange{color:#FFC609;}

.blue{color:#2B75F5;}

#green{color:#00A45D;}

.red{color:#D33E2A;}

<!--------- 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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值