900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS(列表+表格+链接+自定义鼠标光标)样式

CSS(列表+表格+链接+自定义鼠标光标)样式

时间:2021-09-05 09:50:47

相关推荐

CSS(列表+表格+链接+自定义鼠标光标)样式

1.CSS列表样式

1.1 list-style-type属性 (值可取none、circle、square、decimal、disc、lower-alpha)

有序列表:列表项目用数字或者字母来表示。

Onetwothree

无序列表:列表项目用项目符号来表示。

applewatermelonpotato

list-style-type属性的none值可以将列表的标记设置为不显示,在使用ul/ol进行一些网页布局(例如菜单)的时候较常使用到~

1.2 列表的list-style-image(图标) 和 list-style-position(位置)

list-style-image: 将列表项设置为图片。

list-style-position:指定标记框的位置(值可取:inside、outside)outside是默认值

1.3 list-style属性

list-style属性包含三大属性,是一个简写属性:

ul {list-style: square outside none;}

等价于

ul {list-style-type: square;list-style-position: outside;list-style-image: none;}

2. css的表格样式

2.1 border-collapse:指定表格边框是否折叠为单个边框或者默认分开。
2.2 border-spacing :在collapse是分开的前提下,用于设置间距。
2.3 caption-side:指定表格标题的位置 (top、bottom)
2.4 empty-cells:指定是否在空单元格上显示边框(show、hide)
2.5 table-layout:指定如何计算表格列的宽度(auto、fixed)
auto:默认值当列或单元格宽度未明确设置时,列宽将与组成列的单元格中的内容量成比例。fixed:当列或单元格宽度未明确设置时,列宽将不受组成列的单元格中的内容数量的影响。

3.链接样式

3.1 伪选择器
a:link 正常的未访问链接样式a:visited 访问链接的样式a:active 点击并激活链接a:hover 当鼠标悬停的时候,连接悬停
注意事项:
a:hover 必须在a:link和a:visited之后a:active 必须在a:hover之后
3.2文本链接样式

默认情况下,文本链接由浏览器添加下划线。

3.2.1 text-decoration:none;删除文本链接下划线
3.2.2 border:none; 从包含链接的图像中删除边框
3.2.3 outline:none; 删除IE中点击链接行上的虚线边框

4. cursor 自定义鼠标光标样式

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

常见取值表:

default - 默认光标crosshair - 光标显示为十字准线pointer - 光标显示手形图标

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