CSS样式整理

一、文本样式：

1. text-index:缩进文本

，用于段落首行缩进。
取值：text-index：2em（父级元素的2倍）；10%（父级宽度的百分之10；10px；
只能用于块级元素，无法用于行内元素、图像元素。如果一个块级元素首行有一个图像，它会随文本移动。
使用负值，可实现“悬挂缩进”。

2. text-align：水平对齐

取值：
- left：左对齐，默认值。
- right：右对齐。
- center：居中。
- justify：两端对齐。

3. word-spacing：字（单词）间隔

取值：normal：正常间隔，默认值，其值与设置0一样。
取值可正可负，为正时增加间隔，为负时缩小间隔。

4. letter-spcing：字母间隔

修改的是字符或字母间的间隔。
取值和word-spcing相同。

5.text-transform：字符转换。

取值：
- none：默认值，不改动。
- uppercase：转换全大写。
- lowercase：转换全小写。
- capitalize：每个单词首字母大写。

6.text-decoration：文本装饰。

取值：
- none：默认值。
- underline：加下划线。
- overline：文本顶端上划线。
- line-through：贯穿线。
- blink：文本闪烁。
不同装饰作用同一个元素，其值会替换，而不积累。

7. direction：文本方向

指示文本从哪个方向开始显示。
取值：
- ltr：从左向右，默认值。
- rtl：从右向左。

8. color：文本颜色

取值：
- 颜色名称（color-name）：如red。
- 16进制颜色（hex-number）：#ff0000
- rgb颜色：rgb（255,0,0）

9. line-height：行高

取值：
- normal：默认，合理行间距
- number（设置数字）：数字与字体尺寸相乘来设置行间距。
- length：还可以设置固定行间距，如20px；
- %：基于当前字体尺寸的百分比行间距。

10. vertical-align：垂直对齐

取值：
- top，bottom：以顶线对齐，底线；

11.text-shadow：文字阴影

语法：text-shadow：10px 20px 30px red;
其中：10px代表水平延伸距离。20px代表垂直方向延伸距离。30px代表模糊值。

二、背景样式

1. background-color：背景色

取值：和color取值一样。不同的是默认值为transparent（透明）。

2.background-image：背景图像

取值：
- none：默认
- background-image：url（“路径”）设置背景

3.background-repeat:图像平铺

前提：背景图小于标签时
取值
- no-repeat：不重复
- repeat-x：水平方向上重复
- repeat-y：垂直方向上重复
- repeat：全部重复（默认）

4. background-position：背景定位

改变图像在背景中的位置。
取值：top bottom left right 长度值等。

5. background-attachment：背景关联

取值：
- fixed：背景固定，不随文字移动而移动
- scroll：随文字滚动而移动
- local：随文字滚动，超出背景后，背景将逐渐收起。

6.background-size：背景图像尺寸

取值：
- cover：放大图像覆盖背景区域（某些超出部分无法显示）
- contain：缩放图像适应内容区域
- auto：保持原有图片尺寸
- 数值，如background-size：80px 60px；其中80px是宽，60px是高
- %

7.background-origin：指图像相对于哪里来定位，设置背景渲染区域

取值：
- content-box：内容区域
- padding-box：填充盒区域
- border-box：边框盒区域

8.背景渐变

①线性渐变：background：linear-gradient（to top，green，red，。。）

其中，to top：从下到上，表示方向，还可以取值：to bottom等，或者用度数：如45deg（即45度）
重复渐变：repeating-linear-gradient（to top，green 10% ，red 15%，blue 20%）
- 其中，10-15%代表green到red渐变区域，15-20%代表red到blue渐变区域

②径向渐变：

语法：background：radial-gradient（center，shape size 5%，start-color 10%，….，last-color）
其中：shape定义了形状，取值：circle圆形，eclipse：椭圆形（默认）

三、字体样式

1. font-style：文本斜体设置

取值：
- normal：正常字体
- italic：斜体
- obligue：使文字倾斜（对于没有斜体字的字体）

2. font-variant：定义元素的文本是否为小型的大写字母

取值：
- normal：正常
- small-caps：小型的大写字母

3.font-weight：字体粗细

取值：
- normal：400
- bold：粗体，相当于700
- bolder：比继承值更重
- lighter：比继承值更轻
- 用数值表示，取值为100 200 300 400 500 600 700 800 900

4.font-size：字体大小

取值：数值

5.font-family：字体名称

取值：
- 字体名称：若名称有中文或空格，用引号括起
- 字体序列名称
- 引用字体：

font-face{

font-family:”F53”; F53自定义名称

src:url(“路径”)；} 字体文件路径

衬线体：serif：有笔锋
非衬线体：sans serif 无笔锋

四、边框样式

1. border-width：边框宽度

取值：
- 长度值，不可为负
- medium：默认边框，3px
- thin：比默认细 1px
- thick：比默认粗 5px

2.border-style：边框样式

取值：
- none：无轮廓
- hidden：隐藏边框
- dotted：点状轮廓
- dashed：虚线轮廓
- solid：实线
- double：双线
- groove：3D凹槽轮廓
- ridge：3D吐槽轮廓
- inset：3D凹边
- outset：3D凸边
用边框画三角形：

{width:0px;

height:0px;

border-top:30px solid transparent;

border-left:30px solid transparent;

border-right:30px solid red;

border-bottom:30px solid transparent;}

3.border-color：边框颜色

4.box-shadow：阴影

取值：
- none：无阴影
- inset：内阴影，否则为外阴影
- box-shadow：10px 10px 20px 5px darkgray inset；
  - 第一个长度值定义阴影水平偏移量，正值则右，负值则左
  - 第二个长度值定义阴影垂直偏移量，正值则底部，负值则顶部
  - 第三个长度值定义阴影模糊值半径，值越大越模糊，不允许负值
  - 第四个长度值定义阴影外延值，正值则四面扩展，负值则向里收缩

5. border-radius:定义圆角边框

取值：
- length长度值：定义圆形半径或椭圆半长轴、半短轴，非负值
- percentage百分比，水平方向上对比元素宽度，垂直方向上对比元素高度

{width：50px;

height:50px;

border:5px solid red;

border-radius:50%;}

五、列表样式

1.list-style：设置列表相关内容

语法：list-style：type position image；

2.list-style-type：设置列表标记

取值：
- disc：实心圆
- circle：空心圆
- square：实心方块
- decimal：阿拉伯数字
- lower-roman：小写罗马数字
- upper-roman：大写罗马数字
- lower-alpha：小写英文字母
- upper-alpha：大写英文字母
- none：不适用标记

3. list-style-image：设置列表标记的图像

取值：
- url（“地址”）：使用绝对或相对地址指定列表标记图像
- none：不指定图像

4. list-style-position：设置列表项如何根据文本排列

取值：
- outside：列表项标记放置文本以外，且环绕文本，不根据标记对齐
- inside：列表项标记放置文本以内，且环绕文本，根据标记对齐

5.列表：

①无序列表：ul 即unorder list

②有序列表：ol 即order list

<ol>

<li>

</li>

</ol>

<ul>