几个必须掌握的css概念:重用、子选择器和组选择器

简介:  最近由于工作原因,接触到一些css方面的东西,收集了一些相关资料贴出来,希望对大家有用.重用:经常会用到一些基本的式样叠加,比如字体的颜色和加粗。
 最近由于工作原因,接触到一些css方面的东西,收集了一些相关资料贴出来,希望对大家有用.
重用:
经常会用到一些基本的式样叠加,比如字体的颜色和加粗。网页中可能同时出现三种情况:1.字体为红色  2.字体加粗 3.字体红色加粗
这时我们只需要定义前两个css:
.red{color:red;}
.b{font-weight:bold;}
第三种情况时用<div class="red b"></div>

子选择器:
相对来说,简化html文件的代码更加重要,因此在css中使用子选择器非常有益,同时也使css代码更加容易理解。比如下面的代码:
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式样,采用子选择器,可以省略代码中li 和a 的class属性,从而简化代码:
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
组选择器:
当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如:定义所有标题的字体、颜色和margin,你可以这样写:
h1,h2,h3,h4,h5,h6 {
"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子选择器和组选择器的灵活使用可以非常有效的减少代码,同时非常有利的增加代码的可读性,具体的应用需要在具体编写过程中体会。
相关文章
|
SQL 分布式计算 数据可视化
Tableau与大数据:可视化工具在大数据分析中的应用
【4月更文挑战第8天】Tableau是一款领先的数据可视化工具,擅长于大数据分析,提供广泛的数据连接器,支持多源整合。它与Hadoop、Spark等深度集成,实现高效大数据处理。Tableau的拖拽式界面和交互式分析功能使得非技术人员也能轻松探索数据。在实战中,Tableau用于业务监控、数据storytelling和自助式分析,推动数据民主化,提升决策效率。未来,Tableau将持续创新,扩展生态系统,并保障数据安全与合规性,助力企业最大化数据价值。
847 0
|
运维 Java Nacos
nacos常见问题之配置账号密码
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
1266 6
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学学术交流论坛的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学学术交流论坛的详细设计和实现(源码+lw+部署文档+讲解等)
153 0
|
关系型数据库 MySQL 网络安全
MySQL主从复制详细教程
配置MySQL的主从复制是一个细致的过程,需要仔细遵循上述步骤进行。一旦配置完成并运行正常,主从复制将大大提高数据库的可用性和读写性能。在操作过程中,务必保持谨慎,确保数据的一致性和安全性。
989 0
|
域名解析 缓存 运维
【域名解析DNS专栏】DNS解析策略:如何实现负载均衡与故障转移
【5月更文挑战第23天】DNS在互联网中扮演关键角色,将域名转换为IP地址。本文探讨DNS的负载均衡和故障转移技术,以增强服务可用性和性能。负载均衡包括轮询(简单分配流量)和加权轮询(按服务器处理能力分配)。故障转移通过主备策略和TTL值实现快速切换,确保服务连续性。实践案例展示了在电商网站如何应用这些策略。DNS策略优化可提升网站速度和稳定性,借助云服务和智能工具,DNS管理更加高效。
1594 1
【域名解析DNS专栏】DNS解析策略:如何实现负载均衡与故障转移
|
SQL 关系型数据库 MySQL
信创迁移适配实战-修改Nacos2.0.4源码以连接达梦数据库DM8
信创迁移适配实战-修改Nacos2.0.4源码以连接达梦数据库DM8
3935 0
信创迁移适配实战-修改Nacos2.0.4源码以连接达梦数据库DM8
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息
循序渐进BootstrapVue,开发公司门户网站(3)--- 结合邮件发送,收集用户反馈信息
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的软件缺陷管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的软件缺陷管理系统的详细设计和实现
131 0
|
IDE Java 编译器
从 internal 修饰符一探 kotlin 的可见性控制
从 internal 修饰符一探 kotlin 的可见性控制
从 internal 修饰符一探 kotlin 的可见性控制
|
开发工具 git
git merge用法
git merge用法
233 0