简单样式
- 1. 字体样式
- 2. 外观样式
- color:文本颜色
- line-height:行间距
- text-align:水平对齐方式
- text-indent:首行缩进
- letter-spacing:字间距
- word-spacing:单词间距
- 文字阴影(CSS3)
- 3. 背景样式
1. 字体样式
| 属性 | 说明 |
|---|---|
| font-size | 设置字体大小 |
| font-family | 设置字体 |
| font-weight | 设置字体宽度,数字只能取100的倍数，有三个值：lighter(100-300)、normal(400-600)、bold(700-900) |
| font-style | 设置字体风格:normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。 |
CSS中，为这四种属性设置了简写：
font: font-style font-weight font-size font-family;
2. 外观样式
color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
1.预定义的颜色值，如red，green，blue等。
2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
3.RGB代码，如红色可以表示为rgb(255,0,0)rgb(0.1,0.2,0.1)、rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
.color1{
color:red;
}
.color2{
color:#FF0000;
}
.color3{
color:rgb(255,0,0);
}
/* 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：color: rgba(r,g,b,a)
a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3) */
.color4{
color:rgb(0.1,0.1,0.1,0.5);
}
line-height:行间距
ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7.8像素左右就可以了。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
文字阴影(CSS3)
CSS3以后我们可以给我们的文字添加阴影效果了 Shadow 影子
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
3. 背景样式
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| 属性 | 属性值 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
background-color 背景颜色
background-color的属性值语法与color的一致。
background-image 背景图片
div{
background-image:url(地址);
}
/* url中地址可用引号包裹，也可以不包裹，我个人喜欢用包裹它。
我查阅的资料中说，出于安全问题，不包裹的地址可能会引发cookie泄露问题。
而且用引号包裹地址也能养车较好的书写习惯。 */
background-position 背景定位
position ：位置方位
一般运用于从许多的小图标中选中自己喜欢的那个图标，如在下图中，我们要选出那个红色圈出的图标。
1.定义div大小，要能放得下圈出的图标，不能过大有其他图标出现，
或者过小图片无法完全显示。
width:50px;
height:50px;
2.调整定位，图片是根据坐标轴来定位的：background-position: x y;
background-position:100px 100px:
background-attachment
| 值 | 说明 |
|---|---|
| scroll | 背景图片随页面的其余部分滚动。这是默认 |
| fixed | 背景图像是固定的 |
| inherit | 指定background-attachment的设置应该从父元素继承 |
| local | 背景图片随滚动元素滚动 |
background 背景
上面的表格中，写明了属性值的书写顺序：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
在实际运用中我们不一定要写上所有的属性值，例：
/* 1.background可以作为任意一个属性，如下面代码中，
background是作为了background-color，我一般都是像这样写的，可以偷懒 */
.div1{
background:red;
}
/* 2.也可以任意组合，但是要按照顺序，比如background-position中的实例，
可以像下面这么写，background:图片地址 是否平铺 图片位置定位*/
.div2{
background:url("地址") no-pereat 100px 100px;
}
/* 3.可以设置多重背景，每个背景用","隔开。 */
.div2{
background:url("地址") no-pereat 100px 100px,
url("地址") no-pereat 100px 100px,
url("地址") no-pereat 100px 100px;
}
background-size 背景缩放(CSS3新增)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。