文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

DIV CSS优化技巧有哪些

2024-04-02 19:55

关注

这篇文章主要讲解了“DIV CSS优化技巧有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV CSS优化技巧有哪些”吧!

一、CSS样式属性单词代码简写优化  

1、border(CSS边框)简写:

1)、4个边边框宽度为1px,颜色为#000

border-color:#000; border-style:solid; border-width:1px

可以简写为:

border:1px solid #000;

2)、单独上、下、左、右边框简写
左边:

border-left-color:#000; border-left-style:solid; border-left-width:1px

简写:

border-left:1px solid #000

右边:

border-right-color:#000; border-right-style:solid; border-right-width:1px

简写:

border-right:1px solid #000

上边:

border-top-color:#000; border-top-style:solid; border-top-width:1px

简写:

border-top:1px solid #000

下边:

border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px

简写:

border-bottom:1px solid #000

3)、技巧性简写边框
有时只设置3边的边框时候,我们可以技巧性减少代码量。
假如我们不设置上边框,而其他3边为1px实现黑色边框。

传统代码:

Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}

简写:

Div{border:1px solid #000;border-top:0}

这样达到相同效果也大大地减少CSS代码量

了解更多css边框优化压缩教程。

2、padding(CSS padding)简写:

1)、四边设置padding内补白属性
传统思维:

Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px

可以css padding简写:

Padding:4px 3px 5px 2px

2)、只对3边设置padding
假如我们不对“上”设置padding,其它3边设置padding属性

传统:

Padding-left:2px;Padding-right:3px;Padding-bottom:5px

简写:

Padding:0 3px 5px 2px

3边相同情况:
传统:

Padding-left:2px;Padding-right:2px;Padding-bottom:2px

简写:

Padding:0 2px 2px 2px;

3、margin简写

Margin与padding缩写类似

1)、四边间距设置缩写:
传统:

Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;

简写:

Margin:4px 3px 5px 2px

2)、四边设置距离相同缩写
传统:

Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;

简写:

Margin:2px

3)、上下相同、左右相同

Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;

简写:

Margin:5px 2px

4、background简写

background-color:#000;

可以简写为

background:#000;
background-image:url(图片地址)

可简写为:

background:url(图片地址)

CSS背景比较常用的样式属性,包括单独设置一个背景颜色、单独设置背景为图片、单独设置背景图片是否重复,重复是全部重复还是按照X横向或Y纵向重复。接下来我们介绍background背景样式常用简写与注意。

1)、单独设置背景一种颜色的背景优化

background-color:#CCC

优化为:

background:#CCC

2)、背景为图片,X横向重复平铺

background-image:url(http://www.编程网.com/img201207/编程网-logo-2012.gif);  background-position:0 0; background-repeat:repeat-x

简写:

background:url(http://www.编程网.com/img201207/编程网-logo-2012.gif) repeat-x 0 0;

2)、背景为图片,Y纵向重复平铺

  1. background-image:url(http://www.编程网.com/img201207/编程网-logo-2012.gif); 
    background-position:0 0; background-repeat:repeat-y 

CSS简写优化为:

background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0;

3)、背景为图片,不重复平铺CSS压缩

  1. background-image:url(http://www.编程网.com/img201207/编程网-logo-2012.gif);
    background-position:0 0; background-repeat:no-repeat 

简写:

background:url(http://www.编程网.com/img201207/编程网-logo-2012.gif) no-repeat 0 0;

4)、背景为图片,网页全背景X和Y重复平铺

background-image:url(http://www.编程网.com/img201207/编程网-logo-2012.gif);

简写合并:

background:url(http://www.编程网.com/img201207/编程网-logo-2012.gif) ;

5)、背景为黑色,图片向X横向重复平铺

background-color:#CCC;background-image:url(http://www.编程网.com/img201207/编程网-logo-2012.gif);  background-position:0 0; background-repeat:repeat-x;

简写合并:

background:#CCC url(http://www.编程网.com/img201207/编程网-logo-2012.gif) repeat-x 0 0;

这里注意颜色与图片前后顺序。

5、font简写

font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;

可简写为:

font:12px/12px Arial, Helvetica, sans-serif;

二、标点符号优化    -   TOP

1、删除多余空格字符
我们常常写CSS代码时候CSS样式单词之间会多html空格,我们可以在开发完CSS代码时候,可以利用软件快速删除多余空格字符

DIV CSS优化技巧有哪些
标点符号字空格字符优化

例子:

div{ float:left; width:100px; height:100%;}

删除空格后:

div{float:left;width:100px;height:100%;}

DIV CSS优化技巧有哪些
去掉空格优化压缩后的CSS代码

删除空格,在开发CSS过程不必删除,只需要在开发完成后利用如DW软件批量替换删除掉多余空格即可。

2、删除每个选择器最后一个分号

DIV CSS优化技巧有哪些
删除分号前CSS代码

代码:

div{float:left;width:100px;height:100%;} .编程网{float:left;width:100px;height:100px;}

简写删除分号压缩后:

div{float:left;width:100px;height:100%} .编程网{float:left;width:100px;height:100px}

DIV CSS优化技巧有哪些
去掉最后一个分号

三、删除换行    -   TOP

删除空格与换行,让代码都挤一起。

DIV CSS优化技巧有哪些
删除选择器之间换行空格截图

简写删除选择器换行占位

CSS代码:

div{float:left;width:100px;height:100%} .编程网{float:left;width:100px;height:100px} 

简写缩写优化:

  1. div{float:left;width:100px;height:100%}.编程网{float:left;width:100px;height:100px}
     

DIV CSS优化技巧有哪些
简写删除换行,依然可以借助DW软件进行操作删除。

四、CSS重用优化    

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,CSS实例如下:

.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
优化压缩后:

.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{text-align:right; }

注意观察以上代码,自己理解,不懂可到CSS论坛提出问题。

感谢各位的阅读,以上就是“DIV CSS优化技巧有哪些”的内容了,经过本文的学习后,相信大家对DIV CSS优化技巧有哪些这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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