CSS系列之美化网页/超链接伪类/列表样式/网页背景

最新推荐文章于 2022-01-25 22:42:23 发布

DOGIOOH

最新推荐文章于 2022-01-25 22:42:23 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： JavaWeb

本文链接：https://blog.csdn.net/yinyanyao1747/article/details/92851610

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS系列之美化网页/超链接伪类/列表样式/网页背景

01 超链接伪类

各伪类总结

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

设置伪类的顺序

a:link->a:visited->a:hover->a:active

程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
	
	a:visited{
    	color: #ff5f5d;
	}

	/*产生事件的伪类在同一个元素只能绑定一个*/
	a:active{
    	color: cyan;
	}

	/*:hover鼠标悬停样式*/
    a:hover{
    	color: yellow;
	}
	
    </style>
</head>
<body>


<a href="https://www.baidu.com" target="_blank">点击进入百度首页...</a>


</body>
</html>

02 列表样式

常用设置
- list-style-type 设置列表序号格式
- list-style-image
- list-style-position
- list-style

li{
    list-style：none；/*可以去除列表的小黑点*/
}

程序示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        li{
            list-style-type:square;
            list-style-position: revert;
        }
    </style>

</head>
<body>

<ul>
    <li>java</li>
    <li>python</li>
    <li>c/c++</li>
    <li>Linux</li>
</ul>



</body>
</html>

运行结果

03 网页背景

常用网页背景设置
- background-color 设置背景颜色
- background-image 设置背景图片
- background-position 设置背景定位
- background-repeat 设置背景重复方式(平铺/拉伸等)
- background 简写方式可一次设置完
  - 如 background：#C00 url（…/image/1.jpg）205px 10px no-repeat

背景尺寸的设置
- background-size
  - auto 默认值，使用背景图片保持原尺寸
  - percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
  - cover 整个背景图片放大填充了整个元素
  - contain 让背景图片保持本身的狂傲比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域