CSS 边框背景超链接

最新推荐文章于 2022-05-20 23:37:12 发布

eerieShadow

最新推荐文章于 2022-05-20 23:37:12 发布

阅读量2.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42265536/article/details/85246212

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

边框：

对于一个元素，必须设置    border-width    border-style    border-color

border-width : 宽度

border-style : 外观

    none       无样式
   hidden       与 none 相同，对于表，hidden 用于解决边框冲突
   solid       实线
   dashed        虚线
   dotted       点线
   double        双线
   inset       内凹
   outset       外凸
   ridge       脊线
   groove       槽线

border-color : 颜色

简写模式：        border : 1px solid red;

分别设置边框样式：

border-top       上边框
border-bottom   下边框
border-left       左边框
border-right   右边框

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #test {
            width: 100px;
            height: 100px;
            border-top: 2px solid blue;
            border-bottom: 2px solid red;
            border-left: 2px solid rebeccapurple;
            border-right: 2px solid hotpink;
        }
    </style>

</head>
<body>
    
    <div id="test">
        <p>python</p>
    </div>

</body>
</html>

背景样式：

背景颜色：
   语法：   background-color:颜色值;

背景图像：
   语法：   background-image: url("图像地址")
   图形地址：可以是绝对路径也可以是相对路径

   background-repeat   定义图像显示方式，例如纵向平铺，横向平铺
       语法：   background-repeat:属性值;
       属性值：
           no-repeat   不平铺
           repeat       默认值，x 和 y 同时平铺
           repeat-x   x 轴平铺
           repeat-y   y 轴平铺

   background-position       定义背景图像在元素的哪个位置（左上角笛卡尔坐标）
       语法：   background-position : (x,y)
       属性值:
           top left       左上
           top center       靠上居中
           top right       右上
           left center       靠左居中
           center center   正中
           right center   靠右居中
           bottom left       左下
           bottom center   靠下居中
           bottom right   右下

   background-attachment   定义图像是否随着内容而滚动
       语法：   background-attachment : scroll / fixed;
           scroll 表示是
           fixed 表示否

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #test {
            width: 100px;
            height: 60px;
            border-top: 2px solid blue;
            border-bottom: 2px solid red;
            border-left: 2px solid rebeccapurple;
            border-right: 2px solid hotpink;
            background-color: aqua;
        }
        #test2 {
            color: red;
            width: 980px;
            height: 500px;
            background-image: url("image/big202000.jpg");
            background-position: 0px 0px;
            background-attachment: scroll;
        }
    </style>

</head>
<body>
    
    <div id="test">
        <p>python</p>
    </div>

    <div id="test2">
        <p>python</p>
    </div>

</body>
</html>

超链接样式：

去除超链接伪类：
   text-decoration : none;

定义超链接伪类：
   顺序不能改变
   a:link {CSS样式}       定义 a 元素未访问的样式
   a:visited {CSS样式}       定义 a 元素访问后的样式
   a:hover {CSS样式}       定义鼠标经过显示的样式
   a:actived {CSS样式}       定义鼠标单击激活时的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <style type="text/css">
        #test {
            text-decoration: none;
        }
        a:link {color: palegreen;}
        a:visited {color: navy;}
        a:hover {color:powderblue;}
        a:actived {color: red;}
    </style>

</head>
<body>
    
    <div>
        <a id="test" href="https://www.baidu.com">python</a>
    </div>

</body>
</html>

hover 伪类：

hover 可以定义任何元素在鼠标经过时的样式
语法：元素 : hover{ }
元素：任意的块元素和行内元素

eerieShadow

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
CSS 边框背景超链接

边框：对于一个元素，必须设置 border-width border-style border-colorborder-width : 宽度border-style : 外观 none 无样式 hidden 与 none 相同，对于表，hidden 用于解决边框冲突 solid 实线 das...
复制链接

扫一扫