链接样式列表样式表格样式[第三天]

最新推荐文章于 2023-03-27 13:08:55 发布

PBitW

最新推荐文章于 2023-03-27 13:08:55 发布

阅读量350

点赞数 1

分类专栏：重学前端2 css 文章标签： css 详解链接样式详解列表样式详解表格样式经验分享

本文链接：https://blog.csdn.net/langwang_100/article/details/107818332

版权

重学前端2 css 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

文章目录

链接样式
- :hover
- :active
列表样式
表格样式
- < colgroup>
- < col>

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等），有些不一定生效。

链接可以有不同的样式，这取决于他们是什么状态，这四个链接状态是：

a:link —— 正常，未访问过的链接
a:visited —— 用户已访问过的链接
a:hover —— 当用户鼠标放在链接上时
a:active —— 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

注意：

如果不符合顺序规则，则不符合的无法生效

链接样式的顺序记忆(小诀窍)：

L(link)OV(visited)E and H(hover)A(active)TE

:hover

:hover伪类 在鼠标移到元素上时向此元素添加特殊的样式。

这个伪类应用处于 “ 悬停状态 ” 的元素，悬停定义为用户指示了一个元素但没有将其激活。

最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态（eg：p）。

:active

:active伪类 向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

这个伪类应用于处于激活状态的元素。

最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活（eg：p）。

注意：

只要对同一个元素使用了 :hover伪类，那么 :active伪类必须在其后！

注意：

只有：hover 和：active可以作用于其它元素！

列表样式

详情见：
重学前端详解列表（list-style-type list-style-position 自定义列表 dl list-style-image list-style li的源css）（第五天）

表格样式

详情见：
重学前端样式和text-align / 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列）（第四天）

表格这里补充一个小的知识点：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<table border="1" style="color:white">
  <colgroup span="2" width="200px" style="background-color:red"></colgroup>
  <colgroup width="100px"  style="background-color:green"></colgroup>
  <tr>
    <th color="white">ISBN</th>
    <th>Title</th>
    <th width="300px">Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>
</body>
</html>

运行结果：
在这里插入图片描述
或

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<table border="1">
  <colgroup>
    <col span="2" width="200px" style="background-color:red">
    <col width="100px" style="background-color:green">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>
</body>
</html>

运行效果：
在这里插入图片描述

< colgroup>

在这里插入图片描述
< colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

通过使用 < colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
在这里插入图片描述
其它属性在html5中舍弃了（不包括style，style是行内样式，不是属性），所以不列举，详见：菜鸟教程，虽浏览器可以兼容，但建议改为css样式，而不是菜鸟这样直接用width。

注释：只能在 < table> 元素之内，在任何一个 < caption> 元素( caption 元素定义表格标题 )之后，在任何一个 < th>、< tfoot>、< tr> 元素之前使用 < colgroup> 标签。

提示：如果想对 < colgroup> 中的某列定义不同的属性，请在 < colgroup> 标签内使用 < col> 标签。

< col>

在这里插入图片描述
< col> 标签规定了 < colgroup> 元素内部的每一列的列属性。通过使用 < col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

其它属性在html5中舍弃了（不包括style，style是行内样式，不是属性），所以不列举，详见：菜鸟教程，虽浏览器可以兼容，但建议改为css样式，而不是菜鸟这样直接用width。