web前端开发与应用——选择器
通用选择器
通用选择器“ * ”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。 例如：
*{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">
<!--------- 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>
web前端开发与应用——选择器相关推荐
- Web前端开发标准规范
web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...
- 初学Web前端开发，你需要掌握的11项技能
你也许会觉得Web前端开发是一个很简单的工作,但当你深入其中时,一定会发现好像Web前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额.确实,做前端开发就是先易后难,想成为一个优秀的We ...
- Web前端开发入门之网页制作三要素！
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
- 超级棒的170+款web前端开发工具汇总，千万要收藏好！
作者:web前端开发 我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- angularjs 开发流程_超级棒的30款web前端开发工具汇总，一定要收藏！
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
- Web前端开发——BAT面试题汇总及答案01
目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ...
- html div转行,转行web前端开发的人有没有未来
如何转行web前端开发?未来发展方向有哪些? 本文上海达内web培训将以UI设计师转型做web前端作为案例,详细解读学web前端该学习哪些专业知识!当然也适用于所有想转型web前端的亲们! 如何学习w ...
- Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
最新文章
- java访问map_java.map使用
- 回顾2019年5个重大宕机事件
- pytorch 中 Autograd(四）
- TI Davinci DM6446开发攻略——开发环境搭建
- 腾讯副总裁姚星：腾讯AI Lab将致力打造通往AGI之路
- 内容分发网络 CDN 是如何提高网页加载时间的？
- 凌云KTV点歌系统功能简介
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
- AliRTC 开启视频互动 “零计算” 时代
- mysql 触发器条件判断偶尔失效_mysql┃多个角度说明sql优化，让你吊打面试官！...
- Deep Learning 论文笔记 (3): Deep Learning Face Attributes in the Wild
- Spring Cloud Hystrix Dashboard仪表盘 和 Turbine集群监控 (学习总结)
- C++程序设计：字符图形输出（空白三角形）
- 5.2 Photoshop复制图层的几种方式 [原创Ps教程]
- 读取cpu温度的api_温度读取vc++获取cpu温度
- 非接触IC卡读写模块MFRC530的工作原理及其应用
- 外地驾照迁入北京流程
- linux拷贝文件断电后丢失,linux突然断电重启，配置文件丢失/程序无法打开/文件损坏...
- 数据库笔试——查出各部门超出部门平均薪资的员工的姓名，薪资，所在部门名称及部门平均薪水...
- HTML为什么称为超文本标记语言？＜ DOCTYPE html＞什么意思？