前言：这段时间天天加班到10:30之后，简直是x了。

在上一篇文章中，分别解析了background各个属性的用法和注意细节。如果我们在项目上使用背景效果，如果使用下面的写法，你可能抓狂。

body{background-color:#ccc;background-image:url(bg123.gif);background-repeat:no-repeat;background-position:50% 50%;}

这样就会得到自己想要的背景效果，但是如果每次都这么写，那就太坑爹了，其实background也是有简写的写法的。我们来看看简写的写法。

还是上面的效果，但是改成了:

body{background:#ccc url(bg123.gif) no-repeat 50% 50%;}

合并后的写法是不是很简洁，以前看过关于如何写出优雅的css代码相关的博文，其中有一条就是关于复合属性尽量使用简写。这里我就写一下关于自己的

使用心得：

1.使用background时，url()里面的路径不要用引号括起来，为什么勒？减小了css代码。

2.关于background的缺省值的细节。很多复合属性都有这一个现象。今天就先说说background的缺省值的问题。

body{background:#ccc url(bg123.gif) no-repeat 50% 50%;} body有了背景图像。如果在某些场景下需要用js来改变background的某些值时，于是写下代码

$('body').css('background','red'),一看效果，背景颜色是有了，但是背景图像没了，因为后面的属性覆盖了前面的属性声明。你得这么写

$('body').css('background-color','red'),这样就只是修改了背景颜色，其他的背景属性并没有被修改。这里算一个注意的地方吧。

文章写的不好，还请大家见谅。困了，累了，喝xxx！

好程序员web前端分享css常用属性缩写

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

1+x证书学习日志——css常用属性

## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

css常用属性汇总

一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

CSS常用属性-xy

一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

css 02-CSS属性：背景属性

02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...

02: css常用属性

目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

css常用属性总结：背景background上篇

1.在前面一节中我们提到了color的使用,类似于前景色,我们同样可以为元素的背景声明颜色,可以使用background-color属性, 它接受任何有效的颜色值.先看看它的语法. backgroun ...

css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面

1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...

随机推荐

bzoj2820--莫比乌斯反演

题目大意: 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对. 推导: 设n<=m ans=  = 由于gcd(i,j)= ...

服务器搭建多个tomcat服务器

以三个tomcat为例: 先配置环境变量: 编辑 /etc/profile 文件 添加三个tomcat环境变量:value为tomcat目录 //第一个tomcatCATALINA_BASE=/usr ...

JS运动从入门到兴奋1

hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

Javascript 判断变量类型的陷阱 与 正确的处理方式

Javascript 由于各种各样的原因,在判断一个变量的数据类型方面一直存在着一些问题,其中最典型的问题恐怕就是 typeof null 会返回 object 了吧.因此在这里简单的总结一下判断数据 ...

vscode wechat settings&period;json

// { // "window.zoomLevel": 0, // "editor.fontSize": 16, // "files.associat ...

Zookeeper 源码(四)Zookeeper 服务端源码

Zookeeper 源码(四)Zookeeper 服务端源码 Zookeeper 服务端的启动入口为 QuorumPeerMain public static void main(String[] a ...

【BZOJ】1778&colon; &lbrack;Usaco2010 Hol&rsqb;Dotp 驱逐猪猡

[题意]给定无向图,炸弹开始在1,在每个点爆炸概率Q=p/q,不爆炸则等概率往邻点走,求在每个点爆炸的概率.n<=300. [算法]概率+高斯消元 [题解]很直接的会考虑假设每个点爆炸的概率,无 ...

vertex shader must minimally write all four components of POSITION

Though the POSITION semantic must be written out by the vertex shader, it cannot be read in by the p ...

iframe自动全屏

AJPFX总结java创建线程的三种方式及其对比

Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...