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;fontweight属性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&rsqb；作业
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
进程 multiprocessing详解
⼀ ，核⼼ 就是像线程⼀样管理进程 ，类似于threading ,cup利⽤率较好，该模块⽤来跨平台的多进程模块，含有⼀个Process 类代表进程对象,start() 启动进程 Process语法结 ...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。