CSS常规属性

CSS3的常规属性

背景属性——background

​ 在css中使用background属性来设置背景，它的值有以下几个：

属性	描述
background	简写属性，作用是将背景属性设置在一个声明当中。
background-color	设置的是背景颜色。（颜色名 十六进制 rgb() rgba()）
background-image	设置背景图像，图像默认水平垂直平铺
background-repeat	设置背景图像平铺或者不平铺
background-attachment	设置背景图像固定或者随着页面的区域部分滚动
background-position	设置背景图像的起始位置。

【注意】背景图像属性background-image使用的是url函数，而不是herf属性。

​

background-repeat：它的值有以下几种：

repeat：背景图像将向垂直和水平方向重复。这是默认

repeat-x：只有水平位置会重复背景图像

repeat-y：只有垂直位置会重复背景图像

no-repeat：background-image不会重复

inherit：指定background-repea属性设置应该从父元素继承

body {
	background-image: url(./img/test.jpg);
}

默认情况如下图：

它会在水平和垂直方向上同时平铺，即默认值repeat。

repeat-x：

body {
	background-image: url(./img/test.jpg);
	background-repeat: repeat-x;
}

结果：

repeat-y：

body {
	background-image: url(./img/test.jpg);
	background-repeat: repeat-y;
}

结果：

no-repeat：（不平铺）

body {
	background-image: url(./img/test.jpg);
	background-repeat: no-repeat;
}

结果：

background-attachment：页面的固定或者不固定。 它的值有以下几种：

scroll：背景图片随着页面的滚动而滚动，这是默认的。

fixed：背景图片不会随着页面的滚动而滚动

local：背景图片会随着元素内容的滚动而滚动。

bbackground-attachment：scroll：

默认值就是scroll，当滚动页面的滚动条，它会随着页面滚动。

background-attachment：fixed：

这时就不会随着页面滚动。

background-position：背景图片的定位 它的值有三种：方位组合性名词，百分数，px。其中定位有两个值，第一个值代表水平方向，达第二个代表垂直方向。

​

方位组合性名词：（水平方向的方位名词：left center right 垂直方向的方位名词：top center bottom）

left top 左边的上边 默认值
left center：左边的中间
left bottom：左边的下边
right top：右边的上边
right center：右边的中间
right bottom：右边的下边
center top：中间的上面
center center：中间的中间
center bottom：中间的下面

对应上面的九个方位如下图所示：

当只写一个值时，第二个值默认为center：

body {
	background-image: url(./img/test.jpg);
	background-repeat: no-repeat;
	height: 1500px;
	background-position:  center;/*水平方向上为center 省略的垂直默认为center*/
}

结果：

百分比值：第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％ 水平居中：50% 50%

px：具体的定位，同样也是两个值，一个代表水平方向的，一个代表垂直方向的。百分比和px单位也是可以混用的，当然这里也可以使用其他的单位，这里我举例使用的是px单位。

综上所述，我们可以把背景的几个属性写在一个属性中：background

注意一下他的书写顺序：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

如下述代码：

body {
	height: 1500px;
	background: url(img/test.jpg) no-repeat fixed center;/*background属性的简写*/
}

【注意】各个属性值之间使用空格连接。

CSS3中新增的背景属性

多背景

​ 在css3中新增了几个背景属性，其中对background-image进行了进一步的优化，即可以引入多个背景图片，之前的版本之呢个使用一个图片作为背景。

 div {
		 500px;
		height: 500px;
		background-image: url(img/01.gif),url(img/02.gif);/*同时使用两张图片作为背景，中间使用逗号隔开*/
		background-repeat: no-repeat,repeat;/*对于两个背景，分贝使用两个不同的属性值设置 中间使用逗号隔开*/
		background-position: right bottom,center; 
}

结果：

background-size：指定背景图像的大小

在之前 版本中，背景图像的大小只能由它的实际大侠来决定，该属性则是用于设置背景图像的大小。

同样也是两个值，分别代表宽度和高度，可以使用百分比，也可以使用px单位。

div {
		 500px;
		height: 500px;
		background-image: url(img/01.gif);
		background-repeat: no-repeat;
		background-position:center; 
				 
}
.block {
	background-size: 70px 70px;
}

background-origin：设置背景绘制的区域

该属性用于设置背景绘制的区域，它的值有以下几种：

border-box：默认值。背景绘制在边框方框内（剪切成边框方框）。

padding-box：背景绘制在衬距方框内（剪切成衬距方框）。

content-box： 背景绘制在内容方框内（剪切成内容方框）。

 div {
	 500px;
	height: 500px;
	margin: 0 auto;
	background-color: red;
	border: 10px dotted black;
}

默认情况下：

背景颜色的覆盖范围从边框开始，同时也是border-box的效果，默认值。

background-clip: padding-box：

背景绘制区域从内边距开始（内边距的最外层就是边框）

background-clip：content-box：

背景区域的绘制将会从内容部分开始

background-origin：指定背景图像的位置区域

​ 它的值跟上面的background-clip一样，只不过这个属性针对的是背景图像，上面的background-clip针对的是背景绘制的颜色

background-origin：border-box

background-origin：padding-box:（默认值）

background-origin：content-box

【注意】如盒子没有内边距，那么设置了content-box和padding的效果是一样的。

CSS文本属性

​ 在css中，文本也有自己的属性，具体的属性如下图所示：

color：设置的是字体颜色

direction：设置字体文本的方向，它的值有以及几个：

值	描述
ltr 即left to right	默认值，从左到右
rtl 同上	从右到左
inherit	规定应该从父元素继承 direction 属性的值。

letter-spacing：设置字符间距。该值可以为负数

line-height：设置行高

【注意】设置行高可以增大文本的间距，当设置的行高使用px单位表示具体的值，这个值如果和父元素的高度一样，则可以实现文本的垂直居中，该样式也会经常使用得到，比如：

div {
	 200px;
	height: 200px;
	border: 2px solid red;
}
p {
	margin: 0;/*p元素默认自带10px的外边距的*/
	line-height: 200px;/*当行高为父元素高度时，文本实现水平居中*/
}

结果：

当它的值为一个时：

p {
	margin: 0;
	line-height: 10;/*当该属性的值为数字时，表示的行高为该数字与当前字体大小的乘积*/
}

上面的行高就是当前字体的大小：16px * 10 = 160px 即行高为160px。

text-align:设置文本的对齐方式，它的值有以下几种：

值	描述
left	默认值，文本左对齐
center	文本居中对齐
right	文本右对齐
justify	文本两端对齐

【注意】：text-align属性设置的是文本的水平对齐方式。

text-decoration：文本修饰属性，它的值有以下几个：

值	描述
none	默认。定义标准的文本。通常适用该值去除超超链接默认的下划线
underline	定义下划线
overline	定义上划线
line-through	定义删除线
blink	定义闪烁的文本
inherit	规定应该从父元素继承 text-decoration 属性的值

text-indent：设置文本缩进 值可以是px或者百分比，如果是百分比表示基于父元素宽度的比例。

text-shadow：设置文本阴影，它有以下几个值：

属性	描述
h-shadow	必选的参数，表示水平阴影的值 可以为负数
v-shadow	必选的参数，表示垂直阴影的值 可以为负数
blur	可选。模糊的距离。
color	可选。阴影的颜色

【注意】IE9及其之前的版本是不支持该属性的。

text-transform：文本的变换，大小写的切换，它的值有一下几个：

属性	描述
none	默认值 定义小写或者大写用户决定
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义大写
lowercase	定义小写
inherit	规定应该从父元素继承 text-transform 属性的值。

write-space：用于处理元素中的空白。

属性	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到换行标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

word-spacing：设置字符的间距。与letter-spacing不同的是，该属性只对英文有效，对中文字符没有效果的。

p {
	word-spacing: 40px;/*该属性只对英文有效，对中文没有效果*/
    letter-spacing: 10px;/*该属性既对中文有效，也对英文有效*/
}

CSS字体属性

​ 在css中也有很多字体的批属性，属性及其说明如下：

font-family：规定字体的种类。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

.serif{font-family:"Times New Roman",Times,serif;}/*字体准备至少两种以上，名字较长的需要使用引号包含起来*/
.sansserif{font-family:Arial,Helvetica,sans-serif;}

font-style：规定字体的样式。它有以下几个值：

• normal 正常显示文本
• italic 以斜体字显示的文字
• oblique 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

font-size：设置字体的大小，一般使用绝对单位px。但是也可以使用以下两个类型的大小：

绝对大小：

• 设置一个指定大小的文本
• 不允许用户在所有浏览器中改变文本大小
• 确定了输出的物理尺寸时绝对大小很有用

相对大小：

• 相对于周围的元素来设置大小
• 允许用户在浏览器中改变文字大小

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

font-weight：设置字体的加粗效果，它的值有以下几种：

属性	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100 200 300 400 500 600 700 ......	具体数值代替字符的粗细程度，normal等同400 bold等同700
inherit	规定应该从父元素继承字体的粗细。

font-variant：设置字体的小型大写

normal：定义标准的字体。

small-caps：定义小型大写

inherit：规定应该从父元素继承font-variant的值。

【注意】

字体默认具有继承性。

字体也是可以简写在font属性当中，同样也要遵循书写顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

例如：

.font{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
}
/*以上代码可以简写在一个font属性当中*/

.font{font:italic small-caps bold 12px/1.5em arial,verdana;}

简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。

顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值（默认值）。