CSS 属性整理
字体
字体风格：font-style：normal| italic |oblique;
字体粗细：font-weight: normal | bold | bolder | lighter | number;
字号大小：font-size:px|百分比|em|rem;
字体样式：font-family：字体1，字体2，字体3;
复合属性：font：italic hold 12px "宋体",Arail;
文本
字体颜色：color:red|#456545;
文体修饰：text-decoration: none | underline | overline | line-through;
取消下划线：text-decoration: none
文体行距：line-heigh:normal | 18px;
文本缩进：text-indent:length;
文本水平对齐：text-align:left|center|right|justify;
文本垂直对齐：vertical-align: top | bottom | middle；
字词间隔：word-spacing: normal | length；
字符间隔：letter-spacing: normal | length；
自动换行：word-break: break-word;
背景
背景颜色：background-color：red|#fff552;
背景图片：background-image:none|url(nrl);
背景图定位：background-position:x y;
背景图重复：background-repeat: repeat | no-repeat | repeat-x | repeat-y；
背景图滚动：background-attachment : scroll | fixed；
复合属性：background:blue url（url） 0 0 no-repeat;
BGC
背景图片不重复不平铺，可以这样设定背景：
1、<body style="background-image: url("图片文件地址"); background-attachment: fixed;">
这样背景图片就会固定住，不会因页面滚动而重复。
2、使图在任何大小的屏幕都不会显示重复，可以这样设定背景（图像不平铺）：
<body style="background-image: url("图片文件地址"); background-repeat:no-repeat;">
有三张单独的图片使用多背景技术实现
background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-origin
设置元素背景图片的原始起始位置。
语法：
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
background-clip
用来将背景图片做适当的裁剪以适应实际需要。
语法：
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。
文字天
第四个属性：需要加前缀 background-clip：text;
background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。
语法：
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器，即填充忙高度为止；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
PS：假如有人看我把CSS3的笔记也公开出来毕竟我用不上了~
版权声明: 本文为 InfoQ 作者【kidd】的原创文章。
原文链接:【http://xie.infoq.cn/article/dc4bf38d955e8be9b75980eed】。未经作者许可，禁止转载。
还未添加个人签名 2020.07.28 加入
还未添加个人简介
){kind=link}
){kind=link}
){kind=link}
评论