css003：链接伪类和背景设计

最新推荐文章于 2024-07-10 10:14:49 发布

一个码农

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量230

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44699728/article/details/90673812

版权

a:link{属性:值;} a{属性:值}效果是一样的。

a:link{属性:值;}       链接默认状态	
a:visited{属性:值;}     链接访问之后的状态 
a:hover{属性:值;}      鼠标放到链接上显示的状态  
	a:active{属性:值;}      链接激活的状态,按上去不松手

实例：

head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: yellow; //默认颜色黄色
        }
        a:visited{
            color: brown;   //访问之后棕色
        }
        a:hover{
            color: green;  //鼠标放上去绿色
        }
        a:active{
            color: deeppink;  //鼠标长按粉色
        }
    </style>
</head>
<body>
 <a href="#">百度</a>
</body>
</html>

hover：选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
图片的旋转：transform代表旋转的度数，而transition代表旋转角度需要的时间。
在这里插入图片描述
二，文本修饰：

text-decoration: none 没效果， underline下划线， line-through贯穿线， overline上划线

在这里插入图片描述
二，背景设计：
1，先做出一个盒子框：

 <style>
        div{
            width: 400px;
            height: 400px;
            border: brown solid 1px;  //颜色，线，线大小，没有就看不见盒子边框
               margin: auto;  //盒子位置
        }
       
    </style>
</head>
<body>
<div></div>
</body>

2，背景颜色：

 background-color: yellow;

3，背景图片：

  background-image: url("8800276_184927469000_2[1].png");

4，填充格式：

     background-repeat:no-repeat;

Background-repeat repeat(默认，如果一张图片填充不满，就自我复制多分把箱子填满)
| no-repeat（多大就是多大，只填有一张图，没填满的部分不管）
| repeat-x（把横向x轴填满）
| repeat-y （竖向y轴填满）
背景平铺 background-size: 100%;（填满盒子的比例，100%表示一张图全部填完盒子，图片会失真）

5，背景定位：

７.4Background-position left （左）
| right（右）
| center（中间）
| top （顶部）
| bottom （底部）

只写一个方位的时候，默认后面会加一个center

 background-position: right;

写两个方位可以具体调到你想要的位置：

  background-position: right top;

★写2个方位值的时候，顺序没有要求。（调到自己想要的位置）

  background-position: 10px 5px ;

★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
在一个div里面设置两张背景图片用css3的多背景可以做到，写法也很容易，类似下面这样就行了:

background:url(top.jpg) center top no-repeat,
	url(bottom.jpg) center bottom no-repeat;

6，背景是否滚动：

Background-attachment 背景是否滚动 scroll（背景滚动）
| fixed（背景固定不滚动，以浏览器为参照物）

 background-attachment: scroll;

7，背景属性连写
在这里插入图片描述
★：连写的时候没有顺序要求，url为必写项。

一个码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css003：链接伪类和背景设计

a:link{属性:值;} a{属性:值}效果是一样的。a:link{属性:值;} 链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态,按上去不松手实例：head> <meta charset="UT...
复制链接

扫一扫