background复合属性顺序_background(css复合写法)

1. 背景－background

==========================================================

单个属性的写法

.sample1 {

/*背景颜色*/

background-image: url(sample.gif); /*背景图片*/

background-repeat: no-repeat; /*平铺(?)*/

background-attachment: fixed; /*随文本滚动(?),很少用到*/

background-position: center center; /*背景图片位置*/

}

复合属性的写法

书写格式

background : background-color background-image background-repeat background-attachment background-position;

默认值

background: transparent none repeat scroll 0% 0%;

默认值(中文意思)

background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角

按照以上的方法，将 .sample1 改成 .sample2，可以得到相同的样式。

.sample2 {

background: #CCCCCC url(sample.gif) no-repeat fixed center center;

}

background的书写顺序是比较容易理解的。

1. 首先要有背景颜色 background-color ，在背景图片(如果有设置)未载入之前，先显示的是背景颜色。默认为 transparent(透明，即应用父元素或 BODY 的背景设置)，可以省略，不过在应用一些JS事件时最好将它写上，以示规范；

2. 接下来就是背景图片 background-image 。如果没有此项，那么后面的项就没有任何意义了；

3. 是否平铺 background-repeat 要写在 background-position 之前，很容易理解，如果此项设置了 repeat (铺满整个元素)，那么 position 设置就基本失去作用了；

4. fixed 一般用在 body 上，其他地方不大见到；

5. background-position：有2个值，垂直位置和水平位置。按代码写法是没有顺序的：比如说背景图片位于元素的右下角，可以写成 bottom right ，也可以写成 right bottom ；如果按百分比写法是有顺序的：比如 20% 30% ，第1个百分比表示水平位置，第2个百分比表示垂直位置。有意思的是这里的垂直居中是 center 而不是 middle 。你可以设置一个 center 表示图片的居中，相当于 center center 或者 50% 50% 。

==========================================================

2. 字体－font

==========================================================

单个属性的写法，这里只列出最常用的3个字体属性。

.sample3 {

font-weight: bold;

font-size: 12px;

font-family: Verdana;

}

复合属性的写法

书写格式(仅css1)

font : font-style font-variant font-weight font-size line-height font-family;

默认值

font: normal normal normal medium normal "Times New Roman" ;

所以上面的.sample3可以写成这样

.sample4 {

font: bold 12px Verdana;

}

大家可能会对这个写法感到陌生，因为font这个复合属性很少看到，源于它比较严苛的书写要求。

1. font属性内必须有 font-size 和 font-family 这2项值。如果少了一项，即便将其他字体属性都写上也没用。

如果是这样 font: bold 12px; 或者 font: bold Verdana; 在绝大部分的浏览器里都会表现异常。

2. 书写顺序必须严格按照上面提到的顺序。

如果写成 font: 12px bold Verdana; 或者 font: Verdana 12px bold，浏览器就不会正确解释。

3. 这里的12px是表示字体大小，并非行高。

如果要将这两项同时表现，必须这样写：font: bold 12px/2.0em Verdana; ，12px表示字体大小，2.0em(就是12*2.0px)表示行高。

==========================================================

最后要注意的一点：

如果只有一项值，最好不要应用复合属性。以免带来不必要的麻烦。

比如 .sample6 {font-weight: bold} ，如果写成 .sample6 {font: bold} 就没任何作用了。

再举个列子，比如 .sampl5 {background-color: #CCCCCC; } ，如果写成 .sampl5 {background: #CCCCCC; } ，浏览器虽然能正确解释，但这不是规范的写法。

1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小 ...

CSS复合样式

关于font OK,我们先从font来谈起. 如下一段代码: div{ font-size: 14px; font-family: '\5FAE\8F6F\96C5\9ED1'; font-weigh ...

0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类

重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

IE9下css hack写法

ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下: select { background-color:red\0; ...

IE 6 ~ 9 CSS Hack 写法总结

IE 6 ~ 9 CSS Hack 写法总结 24th 四, 14 lip2up [code lang="css"]_color: red;    /* ie6 */*color: ...

ie8 background css没有显示？——都是空格惹的祸

ie8 background css没有显示?——都是空格惹的祸

android 4.4.3 css hack 写法

最近发现android在4.4.3上面出现很多怪异的现象,现在虽然没有找到原因和解决方案,但是突然间找到一个css hack写法: button{ display:none; width:$rem*4 ...

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

css复合属性的写法

# 复合属性也称为 "shortcut" property (快捷属性),它作用是为了简化代码,提高页面运行的效率. # 下面的内容会介绍 2 个比较常用的复合属性 "f ...

随机推荐

BZOJ 3236: [Ahoi2013]作业

3236: [Ahoi2013]作业 Time Limit: 100 Sec  Memory Limit: 512 MBSubmit: 1393  Solved: 562[Submit][Status ...

Java Performance - 如何调查解决内存问题

JVM 的内存溢出/不足/OutOfMemoryError/垃圾收集恶性循环是需要解决,又是屡见不鲜的问题. 建议阅读官方的 Troubleshooting Guide for Java SE 6 w ...

MySql5.7环境搭建

1. 安装mysql的linux系统 [root@grewan ~]# cat /etc/redhat-release CentOS release 6.7 (Final) [root@grewan ...

Struts的session问题

问题描述: 在一个action中设置session之后,在jsp中得不到session的值或者在另一个action中得不到session的值. 解决方案: 1.不要把session设置成为静态的,同时 ...

LODOP打印超过后隐藏内容样式

Lodop中的有纯文本和超文本,纯文本本身超过设置的打印项宽度,如果高度足够,就会换行,如果高度设置的很小,不会换行,后面的内容会直接隐藏.除非设置了多页项等,会自动分页.超文本打印项需要用css样式 ...

WPF 斜角border

最近看了一些科技感UI设计,其中很多的按钮都不是常见的圆角边,而是斜角边.查了一下,wpf中好像没有现成的斜角border,网上也没搜到现成的,于是自己写了点时间做了一个,写的较简单,有一些bug(主 ...

Java 存储和读取 oracle CLOB 类型字段的实用方法

import java.io.BufferedReader; import java.io.IOException; import java.io.Reader; import java.io.Str ...

Configuring spartan 6 using mcu and spi flash

http://forums.xilinx.com/t5/General-Technical-Discussion/Configuring-spartan-6-using-mcu-and-spi-fla ...

进程 multiprocessing详解

一 ,核心 就是像线程一样管理进程 ,类似于threading ,cup利用率较好,该模块用来跨平台的多进程模块,含有一个Process 类代表进程对象,start() 启动进程 Process语法结 ...