一、css背景
css背景属性用于定义HTML元素的背景
背景效果（属性顺序）：
- background-color：设置元素的背景元素
- background-image：设置背景图片
- background-repeat：设置背景图像是否及如何重复
- background-attachment：背景图像是否固定或者随着页面的其余部分滚动
- background-position：设置图像的起始位置（定位）
1. 背景颜色
background-color属性定义了元素的的背景颜色
CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
2. 背景图像
background-image属性描述了元素的背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
body {
background-image:
url('paper.gif');}
设置图像只在水平方向平铺（repeat-x）
body
{
background-image:
url('gradient2.png');
background-repeat:
repeat-x;
}
background-repeat属性可以设置背景图像是否平铺
background-position属性可以给背景图像定位
body
{
background-image:
url('img.png');
/*设置为不平铺*/
background-repeat:
no-repeat;
/*定位：右 上*/
background-position:
right top;
}
3. 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
body
{
background:
#ffffff url('img.png') no-repeat right top;
margin-right:
200px;
}
二、CSS文本
1. 文本颜色
颜色属性被用来设置文字的颜色
body {
color:
red;}
h1 {
color:
#00ff00;}
h2 {
color:
rgb(255,0,0);}
2. 对齐方式
文本排列属性是用来设置文本的水平对齐方式
文本可居中或者对齐到左或右，两端对齐
当text-align设置为“justify”，每一行被展开为宽度相等，左、右外边距是对齐的
h1 {
text-align:
center;}
p.date {
text-align:
right;}
p.main {
text-align:
justify;}
3. 文本修饰
text-decoration属性用来设置或删除文本的装饰（主要用来删除链接得下划线）
a {
text-decoration:
none;}
当然也可以用来装饰文字，但是不建议强调指出不是链接得文本，容易混淆
h1 {
text-decoration:
overline;}
h2 {
text-decoration:
line-through;}
h3 {
text-decoration:
underline;}
4. 文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母
可用于所有字句变成大写或小写字母，或每个单词的首字母大写
<style>
/*全部大写*/
p.uppercase {
text-transform:
uppercase;}
/*全部小写*/
p.lowercase {
text-transform:
lowercase;}
/*首字母大写*/
p.capitalize {
text-transform:
capitalize;}
</style>
<body>
<p class="uppercase">This is some text.
</p>
<p class="lowercase">This is some text.
</p>
<p class="capitalize">This is some text.
</p>
</body>
5. 文本缩进
用来指定文本的第一行缩进
p {
text-indent:
50px;}
6. 所有CSS文本属性
属性描述
color
设置文本颜色
direction
设置文本方向
letter-spacing
设置字符间隔
line-height
设置行高
text-align
对齐元素中的文本
text-decoration
向文本添加修饰
text-indent
缩进元素中文本的首行
text-shadow
设置文本阴影
text-transform
控制元素中的zimu
unicode-bidi
设置或返回文本是否被重写
vertical-align
设置元素的垂直对齐
white-space
设置元素中空白的处理方式
word-spacing
设置字间距
三、CSS字体
CSS字体属性定义字体、加粗、大小、文字样式。
1. 字体系列
font-family 属性设置文本的字体系列，在使用的时候我们应当设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，将会尝试下一种。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
多个字体系列是用一个逗号分隔指明：
p{
font-family:
"Times New Roman", Times, serif;}
2. 字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
/*正常*/
p{
font-style:
normal;}
/*斜体*/
p{
font-style:
italic;}
/*倾斜的文字*/
p{
font-style:
oblique;}
3. 字体大小
font-size 属性设置文本的大小
字体大小的值可以是绝对或相对大小
绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输入的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变字体大小
默认：如果不指定一个字体的大小，默认和普通文本段落一样，是16像素（16px=1em）
px和em：
/*px*/
h1 {
font-size:
40px;}
h2 {
font-size:
30px;}
p {
font-size:
14px;}
/*em*/
h1 {
font-size:
2.5em;}
/* 40px/16=2.5em */
h2 {
font-size:
1.875em;}
/* 30px/16=1.875em */
p {
font-size:
0.875em;}
/* 14px/16=0.875em */
px设置可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本
em设置可以在所有浏览器中调整文本大小（IE有偏差）
百分比和em：
在所有浏览器的解决方案中，设置<body>元素的默认字体大小是百分比：
body {
font-size:
100%;}
h1 {
font-size:
2.5em;}
h2 {
font-size:
1.875em;}
p {
font-size:
0.875em;}
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
4. 所有CSS字体属性
属性
描述
font
在一个声明中设置所有的字体属性
font-family
指定文本字体系列
font-size
指定文本的字体大小
font-style
指定文本的字体样式
font-variant
以小型大写字体或者正常字体显示文本
font-weight
指定字体的粗细
转载于:https://www.cnblogs.com/jiumo/p/9744547.html
