CSS Links, Lists and Tables

初发布于 26 Apr 2014 | in CSS

CSS Links

<a> 可以根据它的状态，被赋予不同的样式。

链接的四种状态是：

  • a:link - a normal, unvisited link 还没有访问
  • a:visited - a link the user has visited 已访问
  • a:hover - a link when the user mouses over it 鼠标滑过
  • a:active - a link the moment it is clicked 鼠标点击时（也是它被选中的时刻）

根据链接状态设定 CSS 须遵守的顺序规则

  1. a:hover MUST come after a:link and a:visited
  2. a:active MUST come after a:hover

disable 链接

禁止点击一个link

  1. <a>测试</a> H5中，缺省 href 特性时会创建一个 link 的 placeholder，看起来与正常的超链接一样，仍然会响应点击事件处理函数（如果有自定义的），但页面不会跳转。
  2. 注意： 如果写了 href 特性，即使值为空，点击仍会 reload 当前页。
  3. 设置标签样式 pointer-events: none; 能禁止标签的鼠标点击动作。但 IE<11 不支持，keyboard 用户仍然可以 ENTER 触发链接。都禁止，只能借助JS了。
  4. disabled 特性在 link 标签上无效，可以使用 aria-disabled="true" 告诉屏幕阅读器该标签是 disabled。
.is-disabled {
  cursor: not-allowed; /*鼠标显示disabled样式*/
  pointer-events: none; /*写了这个，上面显示禁点击的鼠标icon会失效*/
}

总结：想要一个a标签看起来、功能上、语义上都disabled，需要加额外的css、js和html。不建议这么做。

CSS Lists

list 可以用来给有序 ordered 列表 和无序 unordered 列表设置不同的列表元素标记 markers，使用图片作为列表元素标记，给列表和列表元素添加背景色。

List item marker

使用 list-style-type 来设置列表元素标记。默认值是 disc（实心小黑圆）。

在 HTML List 章节提到有序列表可以在元素 <ol> 上通过 type 特性值来设置列表元素的标记，而 CSS 设置无序列表 <ul> 元素标记的值只有四种。

这里只列举 CSS 设置有序列表元素样式可取的值：

  • armenian（亚美尼亚计数文字）
  • cjk-ideographic（中文：一，二，三）
  • decimal（十进制数字），decimal-leading-zero（以 0 开始的十进制：01，02，03）
  • georgian（格鲁吉亚语的）
  • hebrew（希伯来语的）
  • hiragana（日语平假名），hiragana-iroha（？）
  • katakana（日语片假名），katakana-iroha（？）
  • lower-alpha（小写英文字母）
  • lower-roman（小写罗马数字）
  • lower-greek（小写希腊语）
  • lower-latin（同 alpha）
  • upper-alpha
  • upper-latin（同 alpha）
  • upper-roman

注意：list-style-type 只用于列表父元素 <ul>, <ol> ，而不是列表子元素 <li>。

使用图片作为列表元素标记

list-style-image 属性，默认值为 none。只要将属性值设为图片 url 即可。

注意：使用图片作为标记，也要设定 list-style-type 属性，这样在图片不可用的情况下也有 fallback。

指定 list item marker 的位置

使用 list-sytle-position 属性来指定列表元素标记的位置是出现在内容流的里面，还是外面。具体见下面的例子。

outside：（默认值）

  • Coffee

inside：

  • Coffee

All in one

list-style 属性是以上三个属性的简写形式。需要遵循的顺序是：

  • list-style-type
  • list-style-position
  • list-style-image

CSS Tables

Table Borders

给表格设置边框的时候，注意 <table>、<th> 和 <td> 的边框是separate borders。

在 <table> 元素上，使用 border-collapse 属性设置表格的边框是否要合并成一个单边边框。

默认值是 separate。当取值为 collapse 时，表格边框就会合并成 a single border。

独立边框模式下，以下两个属性都是只在 <table> 元素上设置。

  1. border-spacing 设定边框和单元格之间的距离，默认值为 0. 取值方式：

    • length length，以 px，cm 等为单位。不允许负值。前者指定水平间距 horizontal spacing，后者指定竖直间距 vertical spacing。当只有一个值时，表示相同的水平和竖直的间距。
    • initial
    • inherit

  2. empty-cells 设定是否隐藏表格中空的单元格的边框、背景。默认值是 show。希望隐藏的话，属性值设为 hide。

Horizontal & Vertical alignment

使用 text-align 和 vertical-align 属性来对齐表格 <th>，<td> 里的元素。

默认地，在水平方向上，<th> 表头单元格里的元素中心对齐，<td> 普通单元格里的元素为左对齐。

而竖直方向上，单元格的元素是居中对齐。

Table padding

在 <th>，<td> 单元格上设置 padding 属性，来控制边框与单元格内容的间距。

Table caption

使用 caption-side 属性指定表格标题的位置。该属性用于<caption>元素（需要包裹在 <table> 元素里）。

默认值是 top，还可以取值 bottom。

table-layout

table-layout 指定表格用来布局的算法。默认值是 auto，表格列的宽度由最宽的、内容不可 break 的单元格决定。

这种算法可能会比较慢，因为它需要在决定最终的布局之前读取表格中的全部内容。

另一种取值是 fixed。水平布局只取决于表格和列的 width，而不是单元格的内容。使得浏览器可以在接收到表格第一行时就开始显示表格，比起 automatic table layout 可以快速布局表格。