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;

}

时间: 2024-10-26 03:54:30

CSS中(font和background)的简写形式的相关文章

css中font系列常见内容

font 可以一次性定义以下五种属性的值,常见的是前四种.不用所有的都写上,有什么些什么,没有的不写,各个属性值之间用空格. 说实话,如果能够单独写就单独写,真不知道这样写有什么样的好处,还麻烦 注意:书写的顺序 font-style font-variant font-weight font-size/line-height font-family 另外还有一些别的属性值:主要是应用在一些特殊的应用场景的制定字体,比如下拉列表.按钮.对话框.图标标记.窗口状态栏等等 caption 定义被标题

CSS中对图片(background)的一些设置心得总结

写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接拖到html里,这就需要对图片的css样式进行一些调整,鉴于我总是记不住一些样式属性而无法让图片按我的想法摆放,不得已每次都要百度一下,几次下来,让我很是恼火,于是专门整理了一些css中关于图片的一些属性设置,置于此,以供下次望及时查看(废话真多): css2中关于background的属性有: b

CSS中font属性的注意事项

font包含font-style font-variant font-weight font-size/line-height font-family; 在书写font属性时font-style font-variant font-weight 在前,且顺序可以随意排列:font-size/line-height font-family在后,且顺序是固定的:而且font属性的声明中必须要包含font-size font-family这两个属性,否则,整个声明都是无效的. 在使用font声明时,会

css 中font属性知识点总结

一. font属性值可以继承.例如子元素可以继承父元素的行高,字体大小等等. 二.font属性可以进行连写:font: font-sytle  font-weight  font-size/line-height font-family; 三.font连写要注意两点:1.font属性联写中必须有font-size  和 font-family:2.font属性联写中,font-size  必须在font-family 前.

TP5.1:将外部资源引入到框架中(css/js/font文件)

为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bootcss.com/getting-started/#download (2)JQ下载地址:http://jquery.com/ 2.将下载完毕之后的JQ文件放进bootstrap/js文件夹下 3.将bootstrap中的js.css.font文件夹复制到TP5中的public/static文件夹

css 中的background:transparent到底是什么意思有什么作用

有时我在看css时,看到有的css属性定义为background:transparent.意思就是背景透明.实际上background默认的颜色就是透明的属性.所以写和不写都是一样的 有段时间没写文章了,一直在学校,虽然带着电脑,但是不能上网啊!最近在用javascript写一个网页版的操作系统,写好了一定发上来,写的过程中遇到很多问题,许多都是细节方面的,很麻烦,不过自己一直在努力解决,也是对自己的一种提高吧.下面我来说一下我最近遇到的一个问题. 大家知道,你用createelement新建一

css中 background设置

css2中有五个与背景相关的属性.它们是: background-color:完全填充背景的颜色 background-image:用作背景的图片 background-position:确定背景图片的位置 background-repeat:确定背景图片是否重复铺平 background-attachment:确定背景图片是否随页面滚动                                                                                

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是

css中background背景属性概

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*