0
点赞
收藏
分享

微信扫一扫

CSS链接、列表与表格

西曲风 2022-04-04 阅读 84
html前端

链接样式

链接可以使用任何CSS属性(背景,字体,文本等)来设置样式。
还可以根据链接处于什么状态来设置不同的样式。
链接共有四个状态:
a:link:正常未访问的链接
a:visited:已访问过的链接
a:hover:用户将鼠标放在链接上时。
a:active:链接被点击时
在多个链接状态下设置样式时:
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

列表

CSS可以为列表设置不同的列表项标记,添加背景颜色

list-style-type

设置列表项标记的类型

有序列表

list-style-type常用值:
none:无标记
deicmal:标记是数字,默认值
upper-roman:标记是阿拉伯数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母

#无序列表

list-style-type常用值:
none:默认值
disc:实心圆,默认值
circle:空心圆
square:实心方块

list-style-opsition

设置列表项标志的位置,它一共有3个值
inside:列表项目标记环绕在文本以内,且环绕文本根据标记对齐。
outside:默认值,保持标记位于文本左侧,列表项目标记放置文本以外,且环绕文本不根据标记对齐。
inherit:从父元素继承

list-style-image

将图像设置为列表项标志

语法:
list-style-image:URL

后面吗可跟图像地址。也可以是none:默认值,无图像标记或inherit:雄父元素继承

list style

列表的样式属性可以连写。通常先写type——opsition——image的顺序连写

例:
 list-style:square inside url("sqpurple.gif");

表格

使用CSS可以使HTML表格更美观

表格边框

使用border属性可以给border加上边框。

table, th, td
{
    border: 1px solid black;
}

折叠边框

在上面例子中,因为th与td有独立的边框属性,就导致上面例子的表格是个双边框表格。要想创建一个单边框表格就要使用border-collapse属性。

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

表格宽度与高度

如果将表格宽度用像素表示,那么将会显示一个固定宽度的表格。浏览器页面放大或缩小时,表格的大小不变。这时就不方便我们查看,所以为了方便查看,可以将width的值改为百分比。那么无论浏览器窗口是放大还是缩小,表格都会随之放大缩小。
width表示宽度,height表示高度

表格文字对齐

使用text-align属性。他有三个值是:left,right,center
另外背景填充使用padding,背景颜色用background-color

举报

相关推荐

0 条评论