13-CSS代码缩写,占用更少带宽
来源:互联网 发布:javascript用户名验证 编辑:程序博客网 时间:2024/06/05 03:21
13-1 盒模型代码简写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
- 如果top、right、bottom、left的值相同,如下面代码:margin:10px 10px 10px 10px;可缩写为:margin:10px;
- 如果top和bottom值相同、left和 right的值相同,如下面代码: margin:10px 20px 10px 20px;可缩写为:margin:10px 20px;
- 如果left和right的值相同,如下面代码:margin:10px 20px 30px 20px;可缩写为:margin:10px
20px 30px;
注意:padding、border的缩写方法和margin是一致的。
实例代码(把margin和padding两个值修改成缩写形式。)
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative样式</title> <style type="text/css"> p{ padding:13px; margin:10px 40px; } </style> </head> <body> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> </body></html>
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative样式</title> <style type="text/css"> p{ padding:13px 13px 13px 13px; margin:10px 40px 10px 40px; } </style> </head> <body> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> </body></html>
13-2 颜色值缩写
关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例子1:
p{color:#000000;}
可以缩写为:
p{color: #000;}
例子2:
p{color: #336699;}
可以缩写为:
p{color: #369;}
实例代码:
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative样式</title> <style type="text/css"> p{ color:#369; } </style> </head> <body> <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> </body></html>
13-3 字体缩写
网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif;}
这么多行的代码其实可以缩写为一句:
body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
注意:
- 使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如
font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。 - 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
- 一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{ font:12px/1.5em "宋体",sans-serif;}//只是有字号、行间距、中文字体、英文字体设置。
实例代码:
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>字体缩写</title> <style type="text/css"> body{ font:italic small-caps bold 12px/1.6em "宋体",sans-serif; } </style> </head> <body> <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p> <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p> <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p> </body></html>
0 0
- 13-CSS代码缩写,占用更少带宽
- CSS代码缩写,占用更少的带宽
- CSS代码缩写,占用更少的带宽
- 第13章 CSS代码缩写,占用更少的带宽
- 【CSS笔记八】CSS代码缩写,占用更少的带宽
- 第 8 章 CSS 代码缩写,占用更少的带宽
- CSS代码缩写,占用更少的带宽--第九系列
- CSS代码缩写,占用更少的带宽/字体缩写/盒模型代码简写/颜色值缩写
- CSS代码缩写,占用更少的宽带
- CSS代码缩写, 占用更少的宽带,单位和值
- CSS代码缩写技巧
- CSS代码缩写技巧
- CSS代码缩写技巧
- CSS代码缩写技巧
- css代码缩写规范
- CSS代码缩写
- CSS代码缩写技巧
- CSS中代码缩写
- 每日一命令(13)free - (Display amount of free and used memory in the system)
- android hook方法收集及选择优化
- 编程中无穷大常量的设置技巧
- 封装原生javascript连缀
- Docker CLI命令小结
- 13-CSS代码缩写,占用更少带宽
- IO流下载文件,支持中文
- CentOS6.5使用yum命令方便快捷安装Nginx
- 1.系统移植——基础知识
- tomcat的默认程序发布路径的使用与修改
- 从今日起开始在CSDN上编写自己的博客
- Java NIO:浅析I/O模型
- gulp.js--基于流的自动化构建工具
- 大数据技术Hadoop面试题,看看你能答对多少?(16)