文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS代码如何优化

2024-04-02 19:55

关注

小编给大家分享一下CSS代码如何优化,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

div+css代码优化方案介绍-css代码优化

css代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。

css优化方法-需要优化css代码地方
1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。

实例讲解以上几点div css优化方法
1、缩写css代码
常用需要缩写css属性代码如下:
background(背景属性-CSS手册详细了解background手册)
未优化前
background-color:#FFF;对应属性为背景颜色为白色
background-image:url(编程网.gif);对应属性是设置编程网.gif图片为背景
background-position:bottom;背景图片是居底部
background-repeat:repeat-x;背景按X坐标(横坐标)重复延伸
以上CSS代码可以简写为
background:#FFF url(编程网.gif) repeat-x bottom;
解释:背景颜色为白色,并以X坐标重复编程网.gif图片,并且图标居下。未优化css background属性相同

margin(外补白属性-CSS手册详细了解margin手册)
未优化前
margin-left:5px; 意思为靠左5px
margin-right:6px; 靠右6px
margin-bottom:7px; 底部延伸7px
margin-top:8px; 顶部延伸8px
优化简写为
margin:8px 6px 7px 5px; 意思和属性效果同上,可详细了解css margin介绍

padding(内补白属性-CSS手册详细了解padding手册)
未优化前
padding-left:5px; 意思为左补白5px
padding-right:6px; 右补白6px
padding-bottom:7px; 底(下)补白7px
padding-top:8px; 顶(上)补白8px
优化简写为
padding:8px 6px 7px 5px; 意思和属性效果同上,可详细了解css padding介绍

border(边框属性-CSS手册详细了解border手册)
未优化前
border-color:#000000;边框颜色为黑色
border-style:solid;边框样式为实线
border-width:1px;边框宽度为1px

可以简写为
border:1px solid #000000;意思同上未优化前
如果是只设置左边边框为1px,颜色为黑色的实线css代码如下
border-left:1px solid #000000;

font(字体属性-CSS手册详细了解fonts手册)
字体的属性如下:
font-style:italic; 字体样式
font-variant:small-caps; 字体异体
font-weight:bold; 字体加粗
font-size:12px; 字大小为12px
line-height:22px;字行高为22px
font-family:"黑体" 字体为黑体字
可以缩写为一句:font:italic small-caps bold 12px/22px "黑体";

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值了解css font技巧。
了解px是什么

2、排列css代码。
通常我们代码如下排列

这样将占css文件很多的空格和回车位空间,这里还占用了12行css文件空间
www.编程网.com建议你改写为

 -这里是css 注释
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px;}
 

这样将节约空格和回车位,及css文件行数,从而节约代码文件字节。

3、同属性提取共用css选择器。
这个要了解的是如果有两个部分的css属性如宽度高度字体颜色都相同,而有很小一点不同,这个时候我们就需要提取大家相同的css样式出来,单独命名一个css属性选择器,从而节约css代码。
如:

 
.yangshi{ font-size:12px;border:1px solid #000000;padding:5px; width:25px;}
.yangshi2{ font-size:12px;border:1px solid #000000;padding:5px; width:50px;}
 

这里的yangshi和yanshi2两个样式有相同的字体大小为12px,边框相同,内补白相同,只有宽度不同,这个时候我们就可以提取他们相同部分并重新新建个css选择器和重用

新建css属性选择器演示如下

 .gongyong{font-size:12px;border:1px solid #000000;padding:5px;}
.yangshi{ width:25px;}
.yangshi2{width:50px;}
 

这样在调用css时候-了解css 引入
<div class="gongyong yangshi">div css样式</div>
<div class="gongyong yangshi2">div css样式2</div>
这样就可以让通过调用相同css样式,再分别调用不同css属性类即可,以上实例还不能展示他的优点,但是如果代码多而且有很多地方如以上特点,这样将显示其功能特点。

4、分离网页颜色和背景设置样式(较大站点需要注意)。
这点有以上第三点同属性提取共用css选择器特点,但是区别地方,如果站比较大,需要改一个地方即可改变整个站点网页的字体颜色样式,背景图案颜色,边框颜色样式。
这个时候我们将需要在div+css开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个css文件里,这样一来便于我们维护管理整个站点基本样式。

5、条理化css代码。
条理化css代码意思是将css代码整理归类,如控制头部、局部、底部的css代码选择器样式区别开来分别放到一起并与其他地方css代码互相隔开。
如头部的css代码与内容区css代码回车各行隔开
如以上“toubu”与“dibu”以行隔开得以区分,好处是以后维护方便,便于辨认更改维护。

以上是“CSS代码如何优化”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯