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

devtools/2024/10/20 20:47:27/

以下内容接上文。

结合图片的超链接

将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.ppmy.cn/devtools/127378.html

相关文章

Excel:vba实现筛选出有批注的单元格

实现的效果:代码: Sub test() Dim cell As RangeRange("F3:I10000").ClearlastRow Cells(Rows.Count, "f").End(xlUp).Row MsgBox lastrow For Each cell In Range("a1:a21")If Not cell.Comment Is Nothing ThenMsgBox…

PHP中的ReflectionClass常见用法

ReflectionClass是 PHP 中的一个类,它提供了有关类的信息的反射。 使用ReflectionClass可以在运行时获取关于类的各种信息,例如类的名称、方法、属性、注释等。 以下是一些常见的用法: 获取类的名称: $reflection new Reflec…

fastapi的docs页面是空白解决

环境:openEuler、python 3.11.6、fastapi 0.115.2 背景:居家办公,默认搭建的fastapi的docs接口为空白 时间:20241016 说明:网上很多教程的缺点是复杂(但是能够了解的更清楚),使用…

[含文档+PPT+源码等]精品基于ssm实现的原生微信小程序线上养花系统的设计与实现

基于SSM(Spring、SpringMVC、MyBatis)实现的原生微信小程序线上养花系统的设计与实现背景,可以从以下几个方面进行阐述: 一、选题背景 随着人们生活水平的提高和环境保护意识的增强,养花已经成为一种流行的休闲活动。…

6.C++经典实例-计算给定范围内的素数(质数)

所谓素数&#xff08;也称为质数&#xff09;是指大于1的自然数&#xff0c;且只能被1和它本身整除的数。例如&#xff0c;2、3、5、7、11等都是素数。 下面是计算3000内所有的素数的实例 #include <iostream> #include <vector> #include <cmath>// 判断一…

止步阿里一面。。。

时间过的真快&#xff0c;转眼间国庆已经过去一周了&#xff0c;又到了新的一周&#xff0c;继续分享最新的面经。 今天分享的是粉丝在阿里巴巴的一面&#xff0c;考察了数据库、redis、kafka、ES和项目&#xff0c;数据库和redis不用多说&#xff0c;项目必用面试必考&#x…

5.C++经典实例-判断输入的年份是否为闰年

要判断一个年份是否为闰年&#xff0c;首先要明白闰年的定义&#xff1a; 如果年份能被4整除但不能被100整除&#xff0c;则是闰年。 如果年份能被400整除&#xff0c;也是闰年。 其他情况则不是闰年。 根据上面的逻辑&#xff0c;我们写代码&#xff1a; #include <io…

Redis Windows最新安装教程(2024.10.10)

文章目录 redis介绍下载地址安装流程基础操作测试Redis常用的服务指令redis介绍 Redis(Remote Dictionary Server)是一个开源的、基于内存的数据结构存储系统,常用作数据库、缓存和消息中间件。Redis具有快速、灵活、可扩展和高可用性等特点。 Redis支持多种数据结构,包括…