HTML与CSS中的,链接与图像个人分享

头像
a达达
    阅读 7 分钟

    链接与图像

    链接元素

    • < a >元素 - 表示链接元素

      • 作用 - 从当前html页面跳转到指定html页面

      • 属性

        • href - 设置指定跳转html页面的路径

    • 路径分类

      • 相对路径 - 相对于当前html页面的路径
      • 绝对路径 - 访问的路径地址不变化

    示例代码:

    <body>
<!-- 相对路径的链接 -->
<a href="04.文本阴影案例.html">他是链接</a>
<br>
<!-- 绝对路径的链接 -->
<a href="http://localhost:63342/untitled/Study2/HTML%E4%B8%8ECSS-04/04.%E6%96%87%E6%9C%AC%E9%98%B4%E5%BD%B1%E6%A1%88%E4%BE%8B.html">他也是链接</a>
<br>
<!-- 绝对路径的链接 -->
<a href="https://www.baidu.com/">百度</a>
</body>

    效果显示图:
    图片描述

    链接元素样式

    • 通过CSS可以改变链接元素样式

    示例代码:

    <style>
        a{
            color: cyan;
            text-decoration: none;
        }
        a:hover{
            /* 设置鼠标样式 */
            cursor: default;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<a href="#">我是谁?你是链接!</a>
</body>

    链接元素的属性

    • 链接元素也可以实现Email链接效果 - 前提是必须配合当前电脑中的邮箱软件共同使用

    示例代码:

        <style>
        a{
            margin-left: 200px;
            font-size: 48px;
            line-height: 200px;
            color: cyan;
        }
    </style>
</head>
<body>
<!--
    <a>元素的属性
    * target - 表示当前链接的打开方式
      * _self - 默认值，表示在当前窗口中打开目标页面
      * _blank - 表示在新窗口(页签)打开目标页面
    * 实现Email链接效果
      * 用法 - 配合href属性使用，值是以"mailTo:"开头的
      * 问题 - 必须配合当前电脑中的邮箱软件使用
 -->
<a href="imgs/c.jpg">点开有惊喜</a>
<a target="_blank" href="imgs/b.jpg">点开吓死你</a>
<!-- <a>元素中特殊的方法 - 打开email软件 -->
<a href="mailTo:18603644430@163.com">email</a>
</body>

    效果显示图:
    图片描述

    锚点

    • 所谓锚点就是点击指定链接回到之前设置的元素那里

    • < a >元素实现锚点功能

      • 设置href属性值为 "#id属性值" 格式就行

    示例代码:

    <body>
<a id="top">往下看</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--
    <a>元素实现锚点功能
     * 设置href属性值为 "#id属性值" 格式就行
-->
<a href="#top">看完回去吧</a>
</body>

    效果显示图:
    图片描述

    下载功能

    • 注意: 下载功能是HTML5新增的download属性可以实现a元素的下载功能

    • < a >元素实现下载功能

      • 如果默认使用href属性指定下载文件路径的话 -> 实现跳转到指定文件

        • 如果浏览器能识别该文件类型的话 -> 直接打开该文件

      • 需要使用HTML5新增的download属性实现< a >元素的下载功能

        • download属性的值 - 表示下载文件的名称(不一定是原文件名称)

    示例代码:

    <body>

<a href="imgs/a.jpg" download="吓死你.jpg">下载图片</a>
</body>

    动态伪类选择器

    • 注意: 设置input时需要先去除浏览器默认的边框样式才能重新设置

    示例代码:

    <style>
        /* 字体颜色 */
        a:link{
            color: #33FF33;
        }
        /* 鼠标悬停 */
        a:hover{
            color: cyan;
        }
        /* 按住不松手的时候 */
        a:active{
            color: yellow;
        }
        /* 跳转完成后回来的颜色 */
        a:visited{
            color: olivedrab;
        }
        /* 获取焦点 - 就是一闪一闪的小竖杠 */
        input:focus{
            border: 2px solid mediumspringgreen;
            outline: none;
        }
    </style>
</head>
<body>
<a href="04.文本阴影案例.html">进去瞅瞅</a>
<input type="text">
</body>

    效果显示图:
    图片描述

    图片元素

    • <img>元素 - 空元素

      • 属性

        • src - 设置引入指定图片的路径
        • alt - 设置如果图片没有正确显示时的文本提示内容

      • 改变图片显示的大小 - 保持原图片宽度和高度的比例(只设置宽度或高度)

        • 元素的属性 - width和height(不常使用)
        • CSS的属性 - width和height(建议使用这种方式)

    示例代码:

        <style>
        img{
            width: 450px;
        }
    </style>
</head>
<body>

<img src="imgs/c.jpg" alt="吓死你">
</body>

    背景图片

    • 引入背景图像的情况:

      1. 如果引入图片大于当前HT如果引入图片小于当前HTML页面 - 重复出现(铺满整个页面)ML页面 - 图片会显示不完整
      2. 如果引入图片小于当前HTML页面 - 重复出现(铺满整个页面)

    示例代码:

        <style>
        body{
            
            background-image: url("imgs/dalv.jpg");
        }
    </style>
</head>
<body>

</body>

    效果显示图:
    图片描述

    平铺方式

    • 注意: 浏览器默认是平铺整个浏览器的

    示例代码:

        <style>
        /*body {
            background-image: url("imgs/wolongxueyuan.png");
            !*
                背景图像的平铺方式：
                * repeat - 默认值，表示水平方向与垂直方向平铺
                  * repeat-x - 表示水平方向平铺
                  * repeat-y - 表示垂直方向平铺
                * no-repeat - 表示不平铺
                * space - 水平方向平铺(根据页面的宽度进行均匀分配)
             *!
            background-repeat: no-repeat;
            !*
                背景图像的定位 - 水平方向和垂直方向
                * 水平方向 - left、center和right
                * 垂直方向 - top、center和bottom
             *!
            background-position: center right;!* 水平 垂直 *!
        }*/
        div{

            width: 800px;
            height: 600px;
            /* 边框 */
            border: 1px solid black;
            /* 引入背景图片 */
            background-image: url("imgs/dalv.jpg");
            /* 背景重复 - 不重复 */
            background-repeat: no-repeat;
            /* 背景定位 - 控制背景图片的位置 */
            background-position: 210px 100px;
            /* 背景大小 - 控制背景图片大小 */
            background-size: 260px 260px;
        }
    </style>
</head>
<body>
<div></div>
</body>

    效果显示图:
    图片描述

    背景关联

    • 备注: 浏览器默认背景图片跟随页面滚动

    示例代码:

        <style>
        body{
            height: 5000px;
            /* 引入背景图片 */
            background-image: url("imgs/dalv.jpg");
            /* 控制背景图片不重复 */
            background-repeat: no-repeat;
            /*
                设置背景图片是否跟随页面滚动
                 * 浏览器默认是滚动
            */
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<p>一花一世界,一叶一孤城,我是谁?我在哪?我在干什么?</p>
</body>

    效果显示图:
    图片描述

    精灵图

    • 精灵图又叫雪碧图
    • 由于页面中需要引入多个背景图像 -> 将HTML页面加载变慢
    • 所以将多个背景图像整合成一张图片 -> 只需要引入一次
    • 利用background-position属性 - 设置背景图像的定位位置 - 实现现实背景图像哪个部分

    精灵图分析图:
    图片描述

    绝对路径与相对路径

    • 相对路径 - 相对于当前html页面的路径
    • 绝对路径 - 访问的路径地址不变化

    分析图:
    图片描述

    csshtml
    a达达
    21 声望5 粉丝
    « 上一篇
    HTML与CSS中的文本个人分享
    下一篇 »
    DOM编程系列之Node对象个人分享

    引用和评论

    推荐阅读
    头像
    Ajax系列之JSON数据格式

    a达达阅读 2.7k

    头像
    Html&Css测试试题（简单版）

    云绮棠兮赞 2阅读 4.5k

    头像
    问题记录

    吴季分赞 2阅读 465

    头像
    国外邮箱全攻略：注册、登录、购买及格式详解

    ZohoMail阅读 3.2k

    头像
    你好，我是冴羽，我写了一套《前端大佬成长之路》

    冴羽赞 1阅读 751

    头像
    CSS 小技巧 —— CSS 实现 ... 的 loading 加载中动画

    月恒赞 1阅读 911

    头像
    理解API：应用程序之间的桥梁

    忧郁的钥匙扣赞 1阅读 492

    0 条评论
    得票最新