【前端】如何制作自己的网站(7)

以下内容接上文。

结合图片的超链接

将img元素作为内容,放在a元素中。即可为图片添加一个超链接。

例如右边的代码,点击头像就会打开“aboutme.html“。

点击右边的图片试试~

两个非文本元素——图片与超链接。

从现在开始,制作网页不再只是编写一个HTML文档,而是结合了多张图片、多个html文档的开发项目。

学习了网页的基本骨架,并使用HTML语言在网页中添加了文本和图片等HTML元素。

当然,如果一个网页只有基本骨架和基本元素,那么它看起来就会十分混乱,不够美观。

目标

为了让网页层次更加分明,样式更加美观,我们就需要引入CSS

本节课,我们将通过CSS的语法规则、引用方式、分类几个方面先来学习CSS的基础。

使用HTML时,需要遵从一定的规范,CSS也是如此。要想熟练地使用CSS对网页设置样式,首先需要了解CSS的语法规则

CSS语法规则

代码的作用

第2到4行,定义了一个CSS。

CSS包含选择器、属性、属性值三个部分。

解释代码:

选择器

选择器,用于指定要为哪个HTML元素定义样式。

比如,这里的选择器h1,就表示为所有h1元素定义样式。

/* css语法规则 */

h1 {        

    color: red;

}

属性

属性,是指我们给HTML元素设置的样式名称。

比如,这里的color表示设置颜色。

更多的属性我们将在后续逐一学习。

/* css语法规则 */

h1 {        

    color: red;

}

属性值

属性值,用来控制某个属性的显示效果。

比如,这里的red就是控制颜色显示出红色。

/* css语法规则 */

h1 {        

    color: red;

}

冒号

英文冒号:用于将属性与属性值分隔开。

/* css语法规则 */

h1 {        

    color : red;

}

分号

英文分号;放到属性值后,作为结束标志,是固定格式。

/* css语法规则 */

h1 {

    color: red;

}

声明

属性和属性值的组合,可以看作一个声明。

一条声明的格式为属性: 属性值;

/* css语法规则 */

h1 {

    color: red;

}

代码风格

CSS中,没有强制规范代码的书写风格。

为了使 CSS 更具可读性,我们可以在定义CSS时每一行代码上只放置一个声明。

比如,h1 {color: red;font-size: 20px;}

我们会写成如图的结构。

CSS的出现,使得网页的样式与内容分离开来。

HTML负责网页中有哪些内容,CSS负责以哪种样式来展现这些内容。因此,CSS必须和HTML协同工作,那么如何在HTML中引用CSS呢?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/450499.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

API项目3:API签名认证

问题引入 我们为开发者提供了接口,却对调用者一无所知 假设我们的服务器只能允许 100 个人同时调用接口。如果有攻击者疯狂地请求这个接口,那是很危险的。一方面这可能会损害安全性,另一方面耗尽服务器性能,影响正常用户的使用。…

Golang | Leetcode Golang题解之第492题构造矩形

题目: 题解: func constructRectangle(area int) []int {w : int(math.Sqrt(float64(area)))for area%w > 0 {w--}return []int{area / w, w} }

DeBiFormer:带有可变形代理双层路由注意力的视觉Transformer

https://arxiv.org/pdf/2410.08582v1 摘要 带有各种注意力模块的视觉Transformer在视觉任务上已表现出卓越的性能。虽然使用稀疏自适应注意力(如在DAT中)在图像分类任务中取得了显著成果,但在对语义分割任务进行微调时,由可变形…

【论文精读】RELIEF: Reinforcement Learning Empowered Graph Feature Prompt Tuning

RELIEF: Reinforcement Learning Empowered Graph Feature Prompt Tuning 前言AbstractMotivationSolutionRELIEFIncorporating Feature Prompts as MDPAction SpaceState TransitionReward Function Policy Network ArchitectureDiscrete ActorContinuous ActorCritic Overall…

Firefox火狐浏览器打开B站视频时默认静音

文章目录 环境问题解决办法 环境 Windows 11家庭版Firefox浏览器 131.0.2 (64 位) 问题 用Firefox浏览器打开B站的视频时,默认是静音播放的: 而其它浏览器,比如Chrome和Edge,默认是带声音播放的。 虽然不是什么大问题&#xf…

二叉树与堆讲解

目录 1.树的概念及结构 1.树的概念 2.树的相关概念 3.树的表示 2.二叉树 1.概念 2.特殊的二叉树 1.满二叉树 2.完全二叉树 3.二叉树的性质 4.二叉树的存储结构 1.顺序结构 2.链式存储 3.堆 1.堆的概念及结构 2.堆的实现 1.堆的创建 2.堆的初始化(H…

Javascript算法——双指针法移除元素、数组去重、比较含退格字符、有序数组平方

数组移除元素(保证数组仍连续) 暴力求解法(两层for循环),length单词拼写错误❌二次嵌套for的length设置 /*** param {number[]} nums* param {number} val* return {number}*/ var removeElement function(nums, val) {let leng…

三、账号密码存储

使用Playfers存储 Unity本地持久化类Playerprefs使用详解 - PlaneZhong - 博客园 (cnblogs.com) 一、登陆界面切换 1、登陆界面的脚本(机制类脚本) 在这个UI上挂载一个脚本LoginWnd 先声明一下这个脚本,拖拽 2、在登录模块中调用 这里的l…

手写Spring IOC-简易版

目录 项目结构entitydaoIUserDaoUserDaoImpl serviceIUserServiceUserServiceImpl ApplicationContext 配置文件初始化 IOC 容器RunApplication 注解初始化 IOC 容器BeanAutowired Reference 项目结构 entity User Data NoArgsConstructor AllArgsConstructor Accessors(chai…

神经网络中使用的激活函数有什么用?

🎁👉点击进入文心快码 Baidu Comate 官网,体验智能编码之旅,还有超多福利!🎁 🔍【大厂面试真题】系列,带你攻克大厂面试真题,秒变offer收割机! ❓今日问题&am…

最新仿蓝奏网盘系统源码 附教程

自带的蓝奏云解析,是之前的代码,截至发帖时间,亲测依旧有效,可以扒拉下来做蓝奏云解析接口。 使用方法:可以将文件上传至蓝奏云,然后通过此套系统,二次解析下载,不会暴露你的真实蓝…

PCL 点云配准-4PCS算法(粗配准)

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 加载点云数据 2.1.2 执行4PCS粗配准 2.1.3 可视化源点云、目标点云和配准结果 2.2完整代码 三、实现效果 3.1原始点云 3.2配准后点云 PCL点云算法汇总及实战案例汇总的目录地址链接…

扫雷(C 语言)

目录 一、游戏设计分析二、各个步骤的代码实现1. 游戏菜单界面的实现2. 游戏初始化3. 开始扫雷 三、完整代码四、总结 一、游戏设计分析 本次设计的扫雷游戏是展示一个 9 * 9 的棋盘,然后输入坐标进行判断,若是雷,则游戏结束,否则…

FPGA实现PCIE采集电脑端视频转SFP光口UDP输出,基于XDMA+GTX架构,提供4套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的PCIE方案1G/2.5G Ethernet Subsystem实现物理层方案1G/2.5G Ethernet PCS/PMA or SGMII Tri Mode Ethernet MAC实现物理层方案 3、PCIE基础知识扫描4、工程详细设计方案工程设计原理框图电脑端视频PCIE视频采集QT上位机X…

VSCODE c++不能自动补全的问题

最近安装了vscode,配置了C/C扩展,也按照网上说的配置了头文件路径 我发现有部分头文件是没办法解析的,只要包含这些头文件中的一个或者多个,就没有代码高亮和代码自动补全了,确定路径配置是没问题的,因为鼠…

【GT240X】【3】Wmware17和Centos 8 安装

文章目录 一、说明二、安装WMware2.1 下载WMware2.2 安装2.3 虚拟机的逻辑结构 三、安装Centos3.1 获取最新版本Centos3.2 创建虚拟机 四、问题和简答4.1 centos被淘汰了吗?4.2 centos里面中文显示成小方块的解决方法4.3 汉语-英语输入切换4.4 全屏和半屏切换 五、练…

【图论】(一)图论理论基础与岛屿问题

图论理论基础与岛屿问题 图论理论基础深度搜索(dfs)广度搜索(bfs)岛屿问题概述 岛屿数量岛屿数量-深搜版岛屿数量-广搜版 岛屿的最大面积孤岛的总面积沉没孤岛建造最大人工岛水流问题岛屿的周长 图论理论基础 这里仅对图论相关核…

精英高匿ip的自述

大家好,我是精英高匿IP。在网络世界里,我有着自己独特的看家本领,今天我就让大家见识一下我的本事。 我是一个神秘的网络侠客,我在数据的江湖中穿梭自如且不留痕迹。大家可能好奇我为什么叫精英高匿IP。“精英”代表着我拥有卓越…

【命令操作】Linux上通过mdadm配置软RAID _ 统信 _ 麒麟 _ 方德

往期好文:【功能介绍】麒麟2403支持配置任务栏上的图标“从不合并”啦! Hello,大家好啊!今天给大家带来一篇关于如何在Linux系统上使用mdadm工具配置软件RAID(Redundant Array of Independent Disks,独立磁…

高频面试手撕

手撕高频结构 前言,以下内容,都是博主在秋招面试中,遇到的面试手撕代码题目,包含常见的数据结构、多线程以及数据库连接池等。 ArrayList 实现了ArrayList的基本功能,包括随机访问和自动扩容。 添加元素时&#xff…