编写css代码时需要注意什么-创新互联

这篇文章给大家分享的是有关编写css代码时需要注意什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联服务项目包括民乐网站建设、民乐网站制作、民乐网页制作以及民乐网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，民乐网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到民乐省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

一、css顺序

　　首先声明，浏览器读取css的方式是从上到下的。我们一般书写css只要元素具备这些属性就会达到我们预期的效果，但是这会给以后的维护和浏览器的渲染效率带来一定的影响，那么该怎么书写css的顺序呢？有没有一定的规范呢？

　　首先我们知道css的属性按特性分为几类；

　　1.规定元素特性，如display、position、float，这些属性会决定他的排版方式

　　2.规定元素的空间占据，如line-height、margin、padding、width、height等，这些属性会决定元素的大小和位置

　　3.规定元素的自身效果，如font-size、color、background等，这些属性会决定元素的效果

　　其实当我们把css的属性分类结束后，我们会得到一个很明显的答案，我们可以想象一下自己用css按照自己的书写顺序画出来该元素，举例说明

p.detail {
  font-size: 10px;
  line-height: 12px;
  width: 30px;
  height: 30px;
  display: inline;        
}

　　描述：这是一个元素字体大小10px 行高12px 宽度30px 高度30px 陈列方式为内联样式

　　当我们开始读取属性的时候，我们会很难对元素进行定位，因为我们不知道元素的特性，陈列方式。读到最后一行的时候才发现，原来这是一个内联元素，宽度和高度的定义就会失效，所以这种css书写顺序是不被推荐的

p.detail {
  display: inline-block;
  margin-top: 20px;
  width: 100%;
  height: 20px;
  color: #fff;
  font-size: 10px;
}

　　描述：这是一个元素，陈列方式为内联-块方式，距上有20px 宽度与父元素等宽高度为20px 颜色为白色字体大小为10px

　　这样的书写方式就能按照一个我们很容易理解的方式进行渲染

　　总结：我们书写css的时候推荐的规范是，先书写影响元素陈列特性的属性，再书写影响元素位置的属性，最后书写元素的内部属性

二、点击或hover等触发高亮情况的css书写

　　当鼠标hover的时候，我们往往给需要改变的元素添加一个active类名，然后在active里面书写我们需要改变的属性

　　如：

.content {
  background: black;  
}
.active {
  background: white;
}

　　当我们点击某元素的时候，需要.content的背景色从黑色变成白色，那么给.content添加active类名就会达到我们的预期效果，然而我们有的时候点击的时候不止要改变一个元素的属性，我们有可能会有这种情况

　　我们需要在点击一个类名为.click的元素的时候，元素icon字体和 span元素一个字体变大一个变为红色怎么办，我们可以这样

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.icon-active{
　　　　font-size: 40px;
　　}
　　.text-active{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$('.icon-font').addClass('icon-active');
　　　　$('.text').addClass('text-active')
　　})
</script>

　　这样可以达到我们的预期效果，但是这是两个元素的关联反应，假如有三个元素或更多，我们会需要更多的代码，

　　其实细心的朋友可能发现了我这里有一个.parent 标签，我们可以通过给.parent标签添加active类名代码如下：

<div class="parent">
	<div class="icon-font"></div>
	<span class="text"></span>
</div>
<div class="click"></div>
<style>
　　.active .icon-font{
　　　　font-size: 40px;
　　}
　　.active .text{
　　　　color: red;
　　}
</style>
<script src="jquery.js?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$('.parent').addClass('active');
　　})
</script>

　　这样的话我们只需要将会改变css元素的最相近的最外层添加active类名，然后设置该类名下后代元素的样式，这样我们只需要添加一个active类名就达到了我们预期的效果

感谢各位的阅读！关于“编写css代码时需要注意什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：编写css代码时需要注意什么-创新互联
本文来源：https://www.cdcxhl.com/article18/cessdp.html

成都网站建设公司_创新互联，为您提供网站营销、动态网站、标签优化、虚拟主机、小程序开发、建站公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容