CSS学习（4） - 链接，列表和表格

文章首发于我的个人博客：欢迎大佬们来逛逛

@

目录

• CSS链接
• CSS列表
• CSS表格

CSS链接

链接样式，通过

color
font-family
background
等来设置：

a{
    color: hotpink;
    font-size: 30px;
}

可以指定不同的链接时刻来指定不同的样式：

• link：正常的，未被访问过
• visited：访问过的。
• hover：鼠标悬停在上面
• active：链接被点击时

设置的顺序：link visited hover active

---

text-decoration 用于从链接中删除下划线，或者改变下划线样式：

a{
    font-size: 30px;
    text-decoration: none;
}

---

background-color 指定链接的背景颜色

background-color: brown;

---

• 例子：把链接伪装成一个按钮：

  /*链接伪装成按钮*/
  a:link, a:visited{
      color: white;
      background-color: #f44336;
      padding: 15px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
  }
  
  a:hover, a:active{
      background-color: red;
  }
  

---

CSS列表

html中的列表分为两种：

• ol：有序列表
• ul：无序列表

css中可以对列表添加如下的属性：

• 设置项标记
• 添加背景色

---

list-style-type 设置列表的样式：

ul.a{
    list-style-type: circle;
}

ul.b{
    list-style-type: armenian;
}
ul.c{
    list-style-type: georgian;
}

此属性如果设置为 none 则表示删除项标记，如果需要删除内外边距，则设置：

margin: 0px;
padding: 0px;

---

list-style-image 图像作为列表的项标记：

指定好url即可。

ul.c{
    list-style-image: url('https://www.w3school.com.cn//i/photo/sqpurple.gif');
}

list-style-position 属性项标记在列表框中的位置：

ul.b{
    list-style-type: armenian;
    list-style-position: inside;
}
ul.c{
    list-style-image: url('https://www.w3school.com.cn//i/photo/sqpurple.gif');
    list-style-position: outside;
}

• inside：表示在内容框内
• ouside：表示在内容框外，内边距中

---

列表属性的简写：

• list-style-type ：项标记
• list-style-position ：项标记位置
• list-style-image ：项标记图标

省略了image属性：

ul.a{
    list-style: square outside;
}

---

• 美化列表：设置列表的背景颜色及其他属性：

  ol{
      background-color: hotpink;
      padding: 20px;
  }
  
  ul{
      background-color: lightblue;
      padding: 20px;
  }
  
  ol li{
      background-color: pink;
      padding: 10px;
      margin: 5px;
  }
  
  ul li{
      background-color: aqua;
      padding: 10px;
      margin: 5px;
  }
  

---

CSS表格

border 设置表格的边框：与设置边框一致

table, th, td{
    border: 2px solid red;
}

---

width 属性设置表格的宽度，如果设置为 100% 则表示铺满屏幕

table{
    width: 100%;
}

---

table-collapse 设置将表格的双边框变为单一边框：

table, th, td{
    border: 2px solid black;
    border-collapse: collapse;
}

如果只希望周围有边框，则只设置 table 即可。

---

height 设置表格的高度与宽度，如果希望设置表头，则指定 th设置即可，对于其他也是如此：

th{
    height: 70px;
}

---

text-align 设置表格内容水平对齐：

设置其他方式的对齐也是如此。

td{
    text-align: center;
}

---

vertical-align 设置内容的垂直对齐方式，适用于 th 和 td标签。

设置td内容为靠下对齐。

td{
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}

---

padding 设置表格内边距;

td{
    height: 50px;
    text-align: center;
    padding: 10px 20px;
}

---

border-bottom 设置水平分割线：

在th 和 td之间设置水平线，移除border属性，则表格中就只剩红色水平线了。

th, td{
    border-bottom: 2px solid red;
}

---

tr:hover 设置表格的每一行的鼠标悬停的背景颜色：

tr:hover{
    background-color: lightblue;
}

---

tr:nth-child(xxx) 设置表格的斑马线样式

即每隔一行的背景颜色不同：

其中xxx 表示 odd或者even ，表示奇数行或者偶数行 ….

tr:nth-child(even){
    background-color: #f2f2f2;
}

---

设置表格标题框的颜色或者样式：

th{
    height: 70px;
    background-color: lightgreen;
    color: white;
}

---

响应式表格： 添加 style="overflow-x:auto 表示当表格超过屏幕宽度的时候，设置表格为可拖动状态。如果我们不指定它，则整个窗口会出现一个拖动条，这不是我们想要的。

<div style="overflow-x:auto;">
...
</div>

---

参考连接：

CSS 表格