zoukankan      html  css  js  c++  java
  • CSS中(font和background)的简写形式

    转自:http://blog.csdn.net/shenzhennba/article/details/7356095

    1.字体属性主要包括下面几个:
    font-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;
    font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);
    font-variant (字体变化): normal(正常)或small-caps(小体大写字母);
    font-weight (字体浓淡): 是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);
    font-size(字体大小): 可通过多种不同单位(比如像素或百分比等)来设置, 如:12xp,12pt,120%,1em

       如果用 font属性的话,就可以把几个样式进行简化,减少书的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):
    font-style | font-variant | font-weight | font-size | font-family
    例如: 
    .fontStyle01{
            font-style: italic;
            font-variant: normal
            font-weight: bold;
            font-size: 30px;
            font-family: arial, sans-serif;
        }
    上面的样式简写为:
    .fontStyle01{font:italic normal bold 12px arial,verdana;}

    2.背景
     background-color:#999999; //元素的背景色
     background-image : url("path/bgFile.gif"); //设置背景图像
     background-repeat : repeat-x | repeat-y | repeat | no-repeat; //设置重复方式
     background-attachment : fixed | scroll; //设置背景图片的固定方式
     background-position : X轴坐标,Y轴坐标[top,bottom,center,left,right,20px,10%];  //设置背景的左上角位置,坐标可以是以百分比或固定单位

    background缩写各个值的次序依次如下:
    background-color | background-image  | background-repeat | background-attachment | background-position
       如果省略某个属性不写出来,那么将自动为它取缺省值。比如,如果去掉background-attachment和background-position的话:
    background: #FFCC66 url("butterfly.gif") no-repeat;
    例如:
    .bg01{
       background-image: url("path/bgFile.gif");
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-position: left top;
    }

    上面可以简写为:
    .bg01{
       background:#FFCC66  url("path/bgFile.gif")  no-repeat  fixed  left  top;
    }

    补充:background-size

    取值:
    1、value1 value2
    宽度 高度
    2、value1% value2%
    百分比
    3、cover
    覆盖,将背景图像等比缩放,直到背景能够覆盖到元素的所有区域
    4、contain
    包含,将背景图像等比缩放,直到背景图像碰到右边或下边时,停止缩放。

  • 相关阅读:
    display:inline-block引发的间隙思考
    HTML中让表单input等文本框为只读不可编辑的方法
    纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)
    区分javascript中的toString(),toLocaleString(),valueOf()方法
    Javascript高级程序设计笔记 <第五章> 引用类型
    js数组操作大全
    css中使用if条件在各大浏览器(IE6IE7IE8)中hack方法解决教程
    IE下判断IE版本的语句...[if lte IE 8]……[endif]
    有关opacity或RGBA设置颜色值及元素的透明值
    traceback模块——获取详细的异常信息
  • 原文地址:https://www.cnblogs.com/jacksplwxy/p/6792038.html
Copyright © 2011-2022 走看看