day02---图像、CSS引入

最新推荐文章于 2024-09-04 15:47:59 发布

前端大白白～

最新推荐文章于 2024-09-04 15:47:59 发布

阅读量184

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/m0_54022091/article/details/120396102

版权

图像

图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像

语法：
img标签属性
- src属性
  - 作用：用于指定图像文件的路径和文件名
  - 注意：是标签的必须属性
  - 代码演示
- alt属性
  - 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验
  - 代码演示
- width/height属性
  - 作用:指定图片宽度/高度
  - 注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比缩放
  - 代码演示
- title 鼠标悬停时的文字提示

默认样式

多张图片可以交列在一行显示
默认产生下间隙

应用：

作为内容展示的图像：产品图、广告图、详情页、文章页中插图

路径

页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。路径可以分成，相对路径和绝对路径

相对路径

概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系,常用的相对路径包括当前目录，上一级目录，下一级目录

当前目录
- 语法：一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。
```
<img src="pic.png" alt="">
<img src="./pic.png" alt="">     
```
上一级目录
- 语法：两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录
```
 <img src="../pic2.png" alt="">
```
下一级目录
- 语法：一个斜杠，表示图像文件位于HTML文件下一级
```
 <img src="images/pic3.png" alt="">
```

绝对路径

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置

网络绝对位置
- 语法：包括协议和域名：如：https://img-home.csdnimg.cn/images/20201124032511.png
本地绝对位置
- 语法：D盘下webset文件夹下的image文件夹中的logo.png描述为：
```
D:\webset\images\logo.jpg
```
特点:绝对URL始终指向同一位置，无论在何处使用

注意:在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。

CSS介绍，引入

css 层叠样式表 cascading 层叠 style 样式 sheets表标记语言

负责样式也就是网页上那些内容的样式 (宽高，位置，字体样式，背景样式，动画，阴影，边框)

属性名:属性值;
属性名:属性值;
属性名:属性值;

...
属性名:属性值;

width:300px;

属性毫无逻辑性
不能计算

引入 (3个)

1.行内引入

<div style="width:300px;height:200px;background-color:red"></div> style样式对象 包含着这个div的所有css属性

缺点：1. 结构不清晰 2. 代码重复冗余3. 与官方提倡的结构与样式相分离不符合

2.内部嵌入

<head>
    <!-- 嵌入样式style标签 通过css选择器挑选出来 在加css样式！ 
    css选择器： 挑选html标签

    1.标签选择器 {
        利用标签名字挑选元素
    }

    2.类选择器 {
        1. 先设置一个类属性 class(并不是唯一挑选)
        2. 通过.类名实现挑选
    }
    -->
    <style>
        div {
            width:300px;
            height:200px;
            /* 背景色 */
            background-color: red;
            
        }
        p {
            /* 字体大小 */
            font-size: 50px;
        }
        .a {
            font-size: 100px;

        }
        .b {
          color: pink;
          /* font-size: 100px; */
        }
    </style>
</head>

3.外部链接

<head>
    <!-- link 链接一个外部文件  .css样式文件 
    rel 指明链接进来的文件类型
    href 

-->
    <link rel="stylesheet" href="./9-style.css">
</head>

前端大白白～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day02---图像、CSS引入

图像图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像语法： img标签属性 src属性作用：用于指定图像文件的路径和文件名注意：是标签的必须属性代码演示 alt属性作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验代码演示 width/height属性作用:指定图片宽度/高度注意：值可以不带单位默认px，只指定宽或高属性其中一个，另一个按照原比例等比
复制链接

扫一扫