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

文章目录

  • 链接样式
    • :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">ISBNth>
    <th>Titleth>
    <th width="300px">Priceth>
  tr>
  <tr>
    <td>3476896td>
    <td>My first HTMLtd>
    <td>$53td>
  tr>
  <tr>
    <td>5869207td>
    <td>My first CSStd>
    <td>$49td>
  tr>
table>
body>
html>

运行结果:
链接样式 列表样式 表格样式[第三天]_第1张图片

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>ISBNth>
    <th>Titleth>
    <th>Priceth>
  tr>
  <tr>
    <td>3476896td>
    <td>My first HTMLtd>
    <td>$53td>
  tr>
  <tr>
    <td>5869207td>
    <td>My first CSStd>
    <td>$49td>
  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。

你可能感兴趣的:(重学前端2,css,css,详解链接样式,详解列表样式,详解表格样式,经验分享)