了解了CSS选择器，我们就想要知道更多设置样式的属性了，让我们一起来看看吧，如果你还不了解选择器，也可以看上篇我的博客哈：css选择器详解CSS字体样式属性font-size:字号大小font-siz
了解了CSS选择器，我们就想要知道更多设置样式的属性了，让我们一起来看看吧，如果你还不了解选择器，也可以看上篇我的博客哈：css选择器详解
CSS字体样式属性
font-size:字号大小
- font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用 |
| 绝对长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
font-family:字体
- font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{font-family:"微软雅黑";}- 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
- 注意点：
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
- 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。比如font-family: "/5FAE/8F6F/96C5/9ED1"，表示设置字体为“微软雅黑”。可以通过escape()来得到的。
font-weight:字体粗细
- font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
font-style:字体风格
- font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
- oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式
- font属性用于对字体样式进行综合设置，其基本语法格式如下：选择器{font:font-style font-weight fong-size/line-height font-family;}
- 使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
代码举例(直接复制到你的编辑器中查看即可)：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size: 18px; font-weight: bold; font-family: "微软雅黑"; font-style: normal; color: red; } p { font:normal 700 20px/20px "楷体"; } </style></head><body> <div>请看一下我的css样式代码效果哈</div> <p>这个是字体属性的连写呢</p></body></html>CSS文本外观属性
color:文本颜色
- color属性用于定义文本的颜色，其取值方式有如下3种：
- 预定义的颜色值，如red，green，blue等。
- 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
- RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
- 需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
letter-spacing:字间距
- letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing:单词间距
- word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
- word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
line-height:行间距
- line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
text-decoration:文本装饰
- text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：
- none：没有装饰（正常文本默认值）。
- underline：下划线。
- overline：上划线。
- line-through：删除线。
- 另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。
text-align:水平对齐方式
- text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
- left：左对齐（默认值）
- right：右对齐
- center：居中对齐
text-indent:首行缩进
- text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
white-space:空白符处理
- 使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：
- normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
- pre：预格式化，按文档的书写格式保留空格、空行原样显示。
- nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
word-break:自动换行
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行。
- keep-all 只能在半角空格或连字符处换行。
word-wrap
- word-wrap属性允许长单词或 URL 地址换行到下一行normal
- normal只在允许的断字点换行（浏览器保持默认处理）。
- break-word在长单词或 URL 地址内部进行换行。几乎得到了浏览器的支持。
背景
背景相关的属性：
- background-color:设置背景颜色
- background-image:设置背景图片
- 写法：background-image:url(图片的路径);//默认情况下图片如果比容器要小，它会平铺。
- background-repeat:设置背景是否平铺：
- 取值：
- no-repeat:不平铺
- repeat-x：在水平方向上平铺
- repeat-y:在垂直方向上平铺
- repeat:平铺
- background-position:设置背景图片的位置
- 用法：
- background-postion: x y;
- 注意：x,y可以是具体的数值x,y又可以是一些英文单词。
- x: left 左 center 中 right 右
- y: top 上 center 中 bottom下
背景的连写方式：
background: background-color background-image background-repeat background-position;
注意点：
- color样式不在font里，直接写color即可。
- textarea中设置不能被拖动大小代码：style=“resize:none;”
- 一个标签里可以设置多个class名称，且用空格隔开：<p class=”p1 p2”>(同时适用于p1和p2的样式)
- 背景设置一般图片多大元素宽高就要多大（注意：不想背景缩放出现问题时候使用min-width；设置min-width：1000px防止页面小于1000px的背景位置不对。）
如果文章有什么错误，欢迎评论指正，把您的意见或建议告诉我，我会继续努力的！谢谢您！
