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

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 表格