优化函数html代码,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(CSS5.gif);对应属性是设置CSS5.gif图片为背景
background-position:bottom;背景图片是居底部
background-repeat:repeat-x;背景按X坐标(横坐标)重复延伸
以上CSS代码可以简写为
background:#FFF url(CSS5.gif) repeat-x bottom;
解释:背景颜色为白色,并以X坐标重复CSS5.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 "黑体";
2、排列css代码。
通常我们代码如下排列
这样将占css文件很多的空格和回车位空间,这里还占用了12行css文件空间
css5.com.cn建议你改写为
/* CSS css5.com.cn实例演示图 */-这里是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代码。
如:
/* CSS css5.com.cn div+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 引入
这样就可以让通过调用相同css样式,再分别调用不同css属性类即可,以上实例还不能展示他的优点,但是如果代码多而且有很多地方如以上特点,这样将显示其功能特点。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
这点有以上第三点同属性提取共用css选择器特点,但是区别地方,如果站比较大,需要改一个地方即可改变整个站点网页的字体颜色样式,背景图案颜色,边框颜色样式。
这个时候我们将需要在div+css开发的时候特别将的基本字体样式、背景图案颜色、边框等颜色提取到一起或放到一个css文件里,这样一来便于我们维护管理整个站点基本样式。
5、条理化css代码。
条理化css代码意思是将css代码整理归类,如控制头部、局部、底部的css代码选择器样式区别开来分别放到一起并与其他地方css代码互相隔开。
如头部的css代码与内容区css代码回车各行隔开
如以上“toubu”与“dibu”以行隔开得以区分,好处是以后维护方便,便于辨认更改维护。
CSS5通过以上实例讲解的css 优化方法及css优化方案希望对大家有帮助。
作者:div+css
优化函数html代码,CSS代码优化方法相关推荐
- css代码优化思路,CSS代码优化方法
CSS代码怎么优化 最近看过许多网友制作的SKIN的CSS文件,发现其中有着许多冗余的代码.下面我来跟大家介绍一下,如何清除这些冗余的代码,让你的CSS文件更加简洁. 一.margin.padding ...
- css样式压缩了怎么还原,CSS代码的压缩方法
原标题:CSS代码的压缩方法 在建站的时候,很多网站都对他们的代码进行压缩,今天主要来讲解下CSS代码的压缩,压缩后的CSS代码所占用字节数会减少,要是访问量比较小的网站看不出明显的区别,比较大型的网 ...
- html,css维护优化,网站CSS代码优化的7个原则
作为网页设计师或前端工程师,你可能还记得曾经的那个网页大小建议:一个网页(包括HTML.CSS.Javacript.Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速 ...
- 实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
任务一: 任务1:建立站点并完成页面整体布局 任务2:制作网页头部和导航 任务3:制作banner和最新更新栏目 任务4:制作苹果之家栏目 任务5:制作Apple独家栏目 任务6:制作底部版权区域与C ...
- 【转】在html中引入CSS的方法
在html中,引入css的方法主要有行内式.内嵌式.导入式和链接式4种 1.行内式 即在标记的style属性中设定css样式,这种方式本质上没体现出css的优势,因此不推荐使用. 2.嵌入式 在对页面 ...
- 在html中引入css内部样式表使用,CSS样式学习笔记(三)html文件引入CSS的方法(2)...
一.CSS样式规则 CSS样式规则 二.html文件中引入CSS样式的方法有以下三种(行内样式,内部样式表,外部样式表): 2.1 行内样式( 使用style属性引入CSS样式) 实现方式:CSS样式 ...
- JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
- 前端:CSS/13/HTML引入CSS的方法,CSS表格属性,盒子模型,上下外边距合并
HTML引入CSS的方法 1,嵌入式 通过<style>标记,来引入CSS样式: 语法格式:<style type="text/css"></styl ...
- 【编译原理笔记16】代码优化:流图,常用代码优化方法, 基本块的优化
本次笔记内容: 8-1 流图 8-2 常用代码优化方法一 8-3 常用代码优化方案二 8-4 基本快的优化 本节课幻灯片,见于我的 GitHub 仓库:第16讲 代码优化_1.pdf 文章目录 流图 ...
最新文章
- oracle与mysql创建表时的区别
- Discuz X2论坛数据库MyISAM转InnoDB的脚本
- 【2021Java最新学习路线】kvm和docker区别
- Plant Simulation常用命令
- 20本最好的Linux免费书籍
- HDU 5882 Balanced Game 分析+欧拉图
- ETL异构数据源Datax_自增ID增量同步_12
- HiJson工具(查看Json)
- 远程桌面客户端管理器RDCMan
- 叩丁狼学院Java入门 项目代码
- Android中的临时文件
- 记一次因为丢帧导致视频播放花屏问题的排查
- 快速修复 bug 的技巧?初学者的痛点,教你一招搞定!
- 敏捷这么久,你知道如何开敏捷发布火车吗?
- 2021-2022 ACM-ICPC Brazil Subregional Programming Contest N. No Luck
- 最全shell脚本语句语法使用(超详细)
- Openlayers与GeoServer:跨域配置与WMS服务加载
- 最近很火的盲盒交友源码v1.1.5 带教程
- 关于 WPC发布了Qi 1.3版本标准
- 给XP系统加油:让运行提速100%