900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS学习总结(5)——列表/表格/链接/鼠标光标样式

CSS学习总结(5)——列表/表格/链接/鼠标光标样式

时间:2022-12-10 23:45:10

相关推荐

CSS学习总结(5)——列表/表格/链接/鼠标光标样式

列表样式

list-style-type属性

无序列表<ul>- 列表项目用项目符号标记有序列表<ol>- 列表项目用数字或字母标记

使用CSS,列表可以进一步风格化,图像可以用作列表项标记。使用list-style-type属性,可以设置为none,circle,square,decimal,disc,lower-alpha等。 list-style-type属性的none值可以将列表的标记设置为不显示,在使用ul/ol进行一些网页布局(例如菜单)的时候较常使用到。

ul.fang{list-style-type: square;}

列表的图标和位置

list-style-image : 指定要用作列表项标记的图像。list-style-position : 指定标记框的位置(属性值包括:inside, outside)。"list-style-position: outside"是默认值。

ul {list-style-image: url("u=2830705192,2886686135&fm=26&gp=0.jpg");list-style-position: inside;}

表格样式

border-collapse属性

border-collapse属性指定表格边框是否折叠为单个边框或默认分开。 如果边框是分开的,则可以使用border-spacing属性来更改间距。

<table border="2"><tr><td>数学</td><td>语文</td></tr><tr><td>英语</td><td>物理</td></tr></table>

table {border-collapse: separate;border-spacing: 10px 10px;}

caption-side属性

caption-side属性指定表标题的位置。 值可以设置为 top 或 bottom。

caption {caption-side: top;}

empty-cells属性

empty-cells属性指定是否在表格中的空单元格上显示边框和背景。参数值可以是:

show:呈现空单元格的边框hide :隐藏空单元格的边框

table {border-collapse: separate;empty-cells: hide;}

table-layout属性

table-layout指定如何计算表格列的宽度。 参数值可以是:

auto :当列或单元格宽度未明确设置时,列宽将与组成列的单元格中的内容量成比例。fixed :当列或单元格宽度未明确设置时,列宽将不受组成列的单元格中的内容数量的影响。表格布局默认设置为auto。

链接样式

链接的样式可以不同,具体取决于所处的状态。以下伪选择器可用:

a:link - 定义正常的未访问链接的样式a:visited - 定义访问链接的样式a:active - 一旦点击链接,链接就会激活a:hover - 当鼠标悬停时,链接悬停

当为链接设置样式时,必须遵循以下规则:

a:hover 必须在a:link和a:visited之后a:active 必须在a:hover之后

a:hover {color: red;}

text-decoration属性用于删除下划线。

a:link {text-decoration: none;}

以下属性用于控制链接的样式:

border:none - 从包含链接的图像中删除边框outline:none - 删除IE中点击链接行上的虚线边框

鼠标光标样式

cursor属性

CSS允许将鼠标悬停在元素上时设置所需的光标样式。

<span style="cursor:help;">帮助光标s</span>

cursor属性还有许多其他的值,例如:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。