版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
css样式属性
css样式属性种类繁多，使用复杂，需要逐步积累,在此不举例，小伙伴们从平时的代码中积累,加粗为常用属性
1.字体属性
| 功能 | 属性名 | 描述 |
|---|---|---|
| 字体类型 | font-family | 设置文本的字体类别 |
| 字体风格 | font-style | 设置字体样子，取值normal（正常），italic（斜体），oblique（倾斜） |
| 字体变形 | font-variant | 设定小型大写字母，取值normal（正常），small-caps（小型大写字母） |
| 字体加粗 | font-weight | 设定字体的粗细，取值可以是border(特粗体)，bold(粗体），normal(正常)，lighter(细体)或100-900之间的9个等级 |
| 字体大小 | font-size | 设置文本大小，值可以是绝对或者相对，其中绝对值从小到大依次是xx-small,x-small,small,medium(默认),large,x-large,xx-large;单位可以是px或pm,也可以采用百分比（%）的形式 |
| 字体拉伸 | font-stretch | 设置或检索对象中的文字是否横向拉伸变形，主流浏览器都不支持 |
| 字体 aspect | font-size-adjust | 设置或检索小写字母x的高度与对象文字字号的比率，IE，Google不支持 |
| 字体简写 | font | 属性的简写可用于一次设置元素字体的两个或多个方面，书写顺序font-style,font-variant,font-weight,font-size/line-height,font-family |
2.文本属性
| 功能 | 属性名 | 描述 |
|---|---|---|
| 文本颜色 | color | 设置文本颜色 |
| 文本方向 | direction | 设置文本方向，取值ltr(从左到右),rtl(从右到左),inherit(继承父元素) |
| 行高 | line-height | 设置文本行高，即两行文本基线之间的距离 |
| 缩进文本 | text-indent | 设置行的缩进大小，值可以为正值或者负值，单位可以用em,px或百分比（%） |
| 水平对齐 | text-align | 设置文本的水平对齐方式，取值left，center，right，justify(两端对齐) |
| 垂直对齐 | vertical-align | 设置垂直对齐方式，取值bottom,top,middle,baseline |
| 字间距 | word-spacing | 设置字之间的标准间隔，默认normal或0 |
| 字母间隔 | letter-spacing | 设置字符或字母之间的间隔 |
| 字符转换 | text-transform | 设置文本中字母的大小写，取值none,uppercase,lowercase,capitalize |
| 文本修饰 | text-decoration | 设置段落中需要强调的文字，取值none,underline,overline,line-through,blink(闪烁) |
| 空白字符 | white-space | 设置源文档中的多余的空白，取值normal（忽略多余），pre(正常显示),nowrap(文本不换行，除非遇见<br/>标签,pre-wrap,pre-line) |
| 文本阴影 | text-shadow | 设置文本的阴影，书写顺序：h-shadow(水平阴影位置)，v-shadow(垂直阴影位置)，blur(模糊距离)，color(阴影颜色) |
| 文本两端对应时单词间隔 | text-justify | 设置text-align=justify时所使用的对齐方式 |
| 容器数据溢出 | overflow | 设置当元素的内容溢出其区域时发生的事情，取值visible(默认值,内容不会被修剪，呈现在元素框之外),hidden(内容被修剪，其余内容不可见),scroll(内容被修剪，会显示滚动条查看内容)，inherit(从父元素继承值) |
| 文本溢出 | text-overflow | 设置文本溢出时的事件，取值clip(修剪)，ellipsis（省略号），string（给定字符串），取ellipsis,string时，overflow需设为hidden |
| 文本换行 | word-break | 设置非中日韩文本的换行规则，取值normal，break-all（允许在单词内换行），keep-all（只能在半角空格或连字符处换行） |
| 长文本换行 | overflow-wrap | 设置长度超过一行的单词是否被拆分换行，是word-break的补充，取值normal（只在允许的断字点换行），break-word（在长单词或url地址内部进行换行） |
3.背景属性
|背景颜色|background-color|设置元素的背景色|
|背景图像|background-image|设置背景图像|
|背景重复|background-repeat|设置背景平铺方式，取值no-repeat(不平铺)，repeat-x（横向平铺），repeat-y（纵向平铺），repeat（x/y双向平铺）|
|背景定位|background-position|设置图像在背景中的位置，取值top,bottom,left,right,center或具体值，百分比|
|背景关联|background-attachment|设置背景图像是否随页面内容一起滚动，取值scroll(滚动),fixed(固定)|
|背景尺寸|background-size|用来设置背景图片的尺寸|
|填充区域|background-origin|规定background-position属性相对于什么位置来定位|
|绘制区域|background-clip|规定背景的绘制区域|
|背景简写|background|在一个声明中设置所有的背景属性|
4.列表属性
| 功能 | 属性名 | 描述 |
|---|---|---|
| 列表类型 | list-style-type | 设置列表的图形符号，取值none,disc,circle,square,decimal,lower-roman,upper-roman,lower-latin,upper-latin等 |
| 列表项图像 | list-style-image | 将图形符号设定为指定的图像，如list-style-image:url() |
| 符号位置 | list-style-position | 设置列表图形符号的位置，取值inside,outside |
| 列表简写 | list-style | 一个声明中设置所有列表属性，可以按顺序设置如下属性list-style-type,list-style-position,list-style-image |
文字基本属性练习：
效果在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>古诗词欣赏</title>
<style type="text/css">
.aa {
background: url("D:/download/eclipse_workspace/ch03/images/2.jpg");
background-size: 77% 100%;
background-repeat: repeat-y;
}
h1, h3 {
text-align: center;
color: #00CACA;
font-weight: bold;
font-style: italic;
}
p {
font-size: 15px;
text-align: center;
color: #007979;
text-height: 3px;
}
</style>
</head>
<body>
<div class="aa">
<h1>声声慢</h1>
<h3>李清照</h3>
<p>苦苦地寻寻觅觅，却只见冷冷清清，怎不让人凄惨悲戚</p>
<p>乍暖还寒的时节，最难保养休息。</p>
<p>喝三杯两杯淡酒，怎么能抵得住傍晚的寒风急袭？</p>
<p>一行大雁从眼前飞过，更让人伤心，因为都是旧日的相识.</p>
<p>园中菊花堆积满地，都已经憔悴不堪，如今还有谁来采摘？</p>
<p>冷清清地守着窗子，独自一个人怎么熬到天黑？</p>
<p>梧桐叶上细雨淋漓，到黄昏时分，还是点点滴滴。</p>
<p>这般情景，怎么能用一个“愁”字了结！</p>
</div>
</body>
</html>