标签：固定   direction   radius   dia   medium   col   适应   delay   font   

一、文本样式：

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：字体名称

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

• 衬线体：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凸边
• 用边框画三角形：

3.border-color：边框颜色

4.box-shadow：阴影

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

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

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

五、列表样式

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

③自定义列表：dl

④表格标记：table

• solspan：合并列

-表格头：

• 列表语义化格式：table>caption+(thead>th)+(tbody>tr>td)+(tfooter>tr>td)

六、其他

• hover的时候防抖动： 
  
  • ①改box-sizing：border-box；
  • ②先把下划线加上，占有位置，设置透明，hover的时候出现
  • ③给父级设置足够的高与宽
• 延迟效果： 
  
  • transition：指定过度细节（单位ms） 
    
    • transition-delay：hover之后到开始出现的延迟时间
    • transition-duration：从开始出现到结束的持续时间
    • transition-property：延迟属性，指定要过渡的属性（必需设置）
  • 双向延迟：在原样式标签里设置延迟属性，在hover下同样设置延迟则实现。

CSS样式整理

标签：固定   direction   radius   dia   medium   col   适应   delay   font   

原文地址：https://www.cnblogs.com/zhangzhiyong/p/9538874.html