CSS查缺补漏之常用文本属性、列表属性、表格属性、鼠标属性

文本属性

letter-spacing： 表示字母或汉字间距；

word-spacing：表示单词之间或汉字之间空格的间距

Loremip sumdolors itametconsecteturadipisicingelit.Voluptas.
这是一首简单的小情歌 唱着我们心肠的曲折

div {
  /* 每个字母或汉字之间间距 */
  letter-spacing: 5px; 
  /* 每个单词空格或汉字空格之间间距 */
  word-spacing: 10px;
}

text-decoration: 对文本进行修饰，可选值有none、underline、overline、line-through

可配合wavy dotted等线型以及颜色值使用，没有顺序要求

a {
/* 将a的默认下划线去掉 */
  text-decoration: none; 
}

div {
  /* 删除线 */
  text-decoration: line-through;
}

div {
  /* 上划红色波浪线 */
  text-decoration: overline wavy rgb(253, 160, 160);
}

 div {
   /* 下划蓝色波点线 */
   text-decoration: dotted deepskyblue underline;
 }

text-indent 表示首行文本缩进

div {
  width: 200px;
  text-indent: 30px;
}

 

line-height：行高

行高之前提到过，此处再次强调，行高值可用多种方式表示：像素值(px)、数字（参考自身元素font-size的倍数）、百分比（参考自身元素font-size的百分比）

对于单行文字来说，若行高与高设置相同，则能实现垂直居中；

对于多行文字来说，设置行高可以控制行之间的距离；

div {
  height: 48px;
  font-size: 24px;
  background-color: rgba(248, 65, 65, 0.72);
  /* 下面三种写法效果是一样的 */
  line-height: 200%;
  /* line-height: 2; */
  /* line-height: 48px; */
}

 vertical-align： 表示文本垂直对齐的方式，可选值有baseline(默认值)、top(顶部对齐)、middle(元素的中部与父元素的基线加上父元素字母x的一半对齐)、bottom（底部对齐）

列表属性

list-style-type：设置列表符号，可选值有none、square（实心方块）、disc（圆形）、decimal（数字）、lower-roman（小写罗马字）、upper-roman（大写罗马字）、lower-alpha（小写字母）、upper-alpha（大写字母）

li {
  /* 设置列表符号为圆形 */
  list-style-type: disc; 
  background-color: yellow;
}

 

list-style-position： 设置列表符号的位置，可选值有inside(列表里面)与outside(列表外面)

li {
  /* 设置列表符号为小写罗马 */
  list-style-type: lower-roman; 
  background-color: yellow;
  list-style-position: inside;
}

 ​​​​​​​

li {
  /* 设置列表符号为小写罗马 */
  list-style-type: lower-roman; 
  background-color: yellow;
  list-style-position: outside;
}

 

 list-style-image：表示自定义列表符号

li {
  background-color: yellow;
  list-style-position: outside;
  /* 设置自定义列表图片 */
  list-style-image: url('./src/icons/svg/dashboard.svg');
}

 

 list-style：列表属性的复合属性，无顺序要求

li {
  background-color: yellow;
  list-style: url('./src/icons/svg/dashboard.svg') inside;
}

 

表格属性

table-layout：用于设置表格的列宽度，可选值有auto(默认值)、fixed(固定列宽，平均分配)

 

    
学生成绩统计表
    

      
姓名
      
性别
      
年级
      
成绩
    
    

      
小龙齐德龙
      
男
      
12
      
100
    
    

      
小虎虎虎生威
      
男
      
11
      
90
    
    

      
小猫喵喵喵
      
女
      
12
      
33
    
  

table {
  table-layout: fixed;
}

 

border-spacing： 单元格间距 

table {
  table-layout: fixed;
  border-spacing: 12px;
}

 ​​​​​​​

border-collapse： 用于合并单元格边框，可选值为collapse(合并)、separate(不合并，默认值)

table {
  table-layout: fixed;
  border-spacing: 12px;
  border-collapse: collapse;
}

caption-aside: 用于设置表格标题的位置，可选值有top（默认值）、bottom

table {
 table-layout: fixed;
 border-spacing: 12px;
 border-collapse: collapse;
 caption-side: bottom;
}

 

鼠标属性

cursor：用于设置鼠标光标的样式，可选值有pointer(小手)、move(移动)、text(文本)、crosshair(十字架)、wait(等待)、help(帮助)

li {
  font-size: 48px;
  /* 小手样式 */
  cursor: pointer;
}