1.使用css缩写

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;

注意:在同一个CSS配置节中,不要交错使用全写和缩写的颜色配置,在系统资源极低时,会导致浏览器渲染失败。

盒尺寸

通常有下面四种书写方法:

  • property:value1; 表示所有边都是一个值value1;
  • property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  • property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  • property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

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

可以缩写为一句:border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  • background-image:url(background.gif);
  • background-repeat:no-repeat;
  • background-attachment:fixed;
  • background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  • color: transparent
  • image: none
  • repeat: repeat
  • attachment: scroll
  • position: 0% 0%

http://roucheng.cnblogs.com/

字体(fonts)

字体的属性如下:

  • font-style:italic;
  • font-variant:small-caps;
  • font-weight:bold;
  • font-size:1em;
  • line-height:140%;
  • font-family:"Lucida Grande",sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

  • list-style-type:square;
  • list-style-position:inside;
  • list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);

http://www.cnblogs.com/roucheng/p/3509733.html

转载于:https://www.cnblogs.com/roucheng/p/cssstyle.html

DIV+CSS颜色边框背景等样式相关推荐

  1. html背景样式代码,12种纯CSS实现的背景图案样式代码

    这是使用纯css实现的背景图案样式,可以作用于任何元素甚至文本背景. 使用方法: 1使用NPM安装并下载pattern.css. 2导入pattern.css. 3.或在html文档中加载patter ...

  2. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div><div style="color:#ff ...

  3. DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程

    DIV CSS虚线教程篇包括讲解常常出现的各种样式的DIV虚线案例CSS教程. 本节为大家介绍常见的CSS 虚线及DIV教程.CSS虚线下划线.列表虚线统统搞定. 目录 CSS虚线边框 CSS超链接虚 ...

  4. css背景上能添加文字,如何利用div+css来给背景图片上文字布局

    这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...

  5. html图片如何全部展示整个页面,div+css如何控制背景图片全显示出来??

    扬帆大鱼 可以使用:Background-size属性语法:background-size :[  |  | auto ]{1,2} | cover | contain取值::由浮点数字和单位标识符组 ...

  6. DIV+CSS虚线边框

    这里通过边框属性的虚线边框border控制虚线.以下设置的css 高度(css height)和css 宽度(css width)为350像素是为了便于观看演示 其它意思. 一.四边为虚线边框 bor ...

  7. php 验证码提交按钮样式,修改thinkphp验证码样式(颜色边框背景)

    做网站,常常需要自定义一些自己喜欢的颜色背景样式,验证码也不例外. Thinkphp 默认验证码是白色调为主的.在比较暗色调的网站上非常的显眼不好看,于是 我这里和大家说一下如何修改 首先找到Thin ...

  8. web前端入门到实战:CSS颜色、背景和剪切

    颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...

  9. html添加背景图片并且填满div,css background-size与背景图片填满div(示例代码)

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

最新文章

  1. python以运行效率高著称吗_如何提高python的运行效率
  2. Docker selenium自动化 - Python调用容器实例跑自动化查天气实例演示,docker selenium自动化环境部署过程
  3. ie浏览器 杂项样式错乱
  4. 分组交换中的时延、丢失和吞吐量
  5. java颜色gui_Java gui颜色不加载
  6. 测试工程师不懂AI,还有未来吗?
  7. VS2005(C#)里读取及改变App.config里appSettings节的值
  8. Redis的过期键删除策略和内存淘汰机制
  9. 单结晶体管的导电特性_适用于印刷电子的导电墨水可在纸和PET薄膜上印刷薄膜晶体管...
  10. Flink SQL 实战:HBase 的结合应用
  11. 【MAC】手动下载安装docker
  12. 51单片机流水灯三种实现方法
  13. 什么是3d建模,3D建模师可以从事哪些职业?
  14. Oracle导出表结构(含表名、字段名、数据类型、是否为空、字段说明)至Excel(简单详细)sql语句的形式
  15. ICEM 准备工作-常用操作
  16. Windows下HdWiki安装步骤
  17. 项目运行时报错出现:因为在此系统上禁止运行脚本有关详细信息,请参阅 https。该如何解决
  18. try{}里有一个return语句,那么紧跟在这个try后的finally{}里的代码会不会被执行
  19. 如何从Linux下载一个文件到本地
  20. android 高仿美团,Android 仿美团、大众点评团购详情UI

热门文章

  1. 一次线上Nginx出问题排错经历
  2. TensorFlow Lite发布重大更新!支持移动GPU、推断速度提升4-6倍
  3. 伯克利人工智能导论课开放:视频、PPT和练习都在这 | 资源
  4. Chrome十周年,作了一次死
  5. 谷歌推出理解神经网络的新方法SVCCA | NIPS论文+代码
  6. AI正在打王者荣耀排位赛,背后是腾讯100亿开放新战略
  7. plupload与springmvc分段上传视频
  8. 物联网全面崛起 LED企业大有可为
  9. 一次openresty http.lua 性能调优之旅
  10. 《脱颖而出——成功网店经营之道》一2.5 后方——不可忽视的金库