怎样使用CSS技术美化网页?(知识点2)

news2025/1/9 8:26:11

知识引入

  • 引入CSS样式表

CSS提供了行内式、内嵌式、外链式、导入式四种引入方式,具体介绍如下。

  1. 行内式

行内式也被称为内联样式,是通过标签的style属性来设置标签的样式,其基本语法格式如下。

<标签名 style=“属性:属性值;”>内容</标签名>

Style是标签的属性,任何HTML中都有style属性,可以用来设置行内式。行内式写在<html>根标签中,例如:<h1 style=”font-size:20px;color:blue;”>使用行内式修饰文本</h1>

*注意:行内式通过标签的属性来控制央视的,这样并没有做到结构与样式分离,所以不推荐使用。

    2.内嵌式

        (1)内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中,并且用style标签定义,其基本语法格式如下。

         <head>

         <style type=“text/css”>

        选择器{属性1:属性值;属性2:属性值;属性3:属性值;}

        </style>

       </head>

     (2)下面通过一个案例演示一下如何使用内嵌式CSS样式,先编写代码如图1.

图1

运行显示页面如图2中圈起来的部分。

图2

3.外链式

   (1)外链式也叫链入式,是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中,通过<link href=“css文件的路径” type=”text/css” rel=”stylesheet”/>

上述语句中,<link/>标签需要放在<head>头部标签中,并且必须指定<link/>标签的三个属性,具体如下。

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

type:定义所链接文档的类型,在这里需要指定为”text/css”,表示链接的外部文件为CSS样式表。

rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

  (2)下面通过一个案例来演示一下如何通过外链式方式引入CSS样式表,具体步骤如下。Step01.创建一个HTML文档并添加文本,如图3.

图3

 Step02.将该文档命名并保存,然后新建一个文档,选择css,然后点击创建,如图4. 

图4

Step03.创建好后保存,编写样式代码,然后保存,如图5

图5

Step04.保存然后再HTML文档中添加<link/>语句,将“style.css“外部样式表文件链接到HTML文档中,如图6.

图6

Step05.保存好后会出现,成功链接后再文档工具栏上方出现“style.css”,如图7.

图7

Step06.运行显示如图8.

图8

4.导入式

导入式与外链式相同,都是将样式存放再外部样式表文件中。对HTML头部文档应使用style标签,并在style标签内开头处使用@import语句,即可导入外部样式表文件,其基本语法格式如下。

<style type=”text.css”/>

@import url(css文件路径);或@import “css 文件路径”;

/*在此还可以存放其他CSS样式*/

</style>

导入只需要将<link/>语句换成以下其中一个代码:

(1)<style type=”text.css”/>

@import url(style.css);

</style>

(2) <style type=”text.css”/>

@import  “style.css”;

</style>

*注意:虽然导入式与外链式相同,但是大多数网站都采用外链式方式引入外部样式表。

原因是两者的加载时间和顺序不同。

5.以上就是使用CSS技术美化网页(知识点2)的内容了,我们下期讲知识点3(CSS基础选择器)。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Denoising diffusion implicit models 阅读笔记2

Denoising diffusion probabilistic models (DDPMs)从马尔科夫链中采样生成样本&#xff0c;需要迭代多次&#xff0c;速度较慢。Denoising diffusion implicit models (DDIMs)的提出是为了在复用DDPM训练的网络的前提下&#xff0c;加速采样过程。 加速采样的基本思路是&#…

Shell脚本⑤函数与数组

一.函数 封装的可重复利用的具有特定功能的代码 格式&#xff1a; 方法一&#xff1a; [function] 函数名 (){ 命令序列 [return x] #使用return或者exit可以显式的结束函数 } 方法二&#xff1a; 函数名(){ 命令序列 } 1.函数的调用方法 &#xff08;1&…

【Flink】记录Flink 任务单独设置配置文件而不使用集群默认配置的一次实践

前言 我们的大数据环境是 CDP 环境。该环境已经默认添加了Flink on Yarn 的客户端配置。 我们的 Flink 任务类型是 Flink on Yarn 的任务。 默认的配置文件是在 /etc/flink/conf 目录下。如今我们的需求是个别任务提供的配置仅用于配置执行参数&#xff0c;例如影响作业的配置…

python 基础知识点(蓝桥杯python科目个人复习计划24)

今日复习内容&#xff1a;基础算法中的模拟 1.模拟题 &#xff08;1&#xff09;定义&#xff1a;直接按照题目含义模拟即可&#xff0c;一般不涉及算法。 &#xff08;2&#xff09;注意&#xff1a;读懂题&#xff1a;理清楚题目流程&#xff1b; 代码和步骤一一对应&…

爷爷问:IPv6为什么还没有完全替换掉IPv4 ?区别是什么?

首先IPV6之所以提出&#xff0c;很大一部分原因是IPV4的地址不够用了&#xff0c;再出现新设备就没得地址分配&#xff0c;所以才会提出新的IP版本以满足分配需求。在对IPV6进行一个基本了解后来看看两者的区别。 IPV6基本了解 1.层次化的地址结构 地址长度为128bit&#xf…

鸿蒙ArkUI开发-实现增删Tab页签

场景介绍 部分应用在使用过程中需要自定义添加或删除标签的场景&#xff0c;比如在浏览器中的顶部标签栏中需要新打开或关闭网页页签&#xff0c;而这种场景与Tabs组件效果类似&#xff0c;但Tabs组件不提供增加或删除页签的功能&#xff0c;不能自由的增加删除页签&#xff0…

Java编程的利器:Pair和Triple无缝解决多值返回问题,助力编写高效代码

在实际编码中&#xff0c;经常会遇到一个方法需要返回多个值的情况&#xff0c;你编写一个方法&#xff0c;需要同时返回某个操作的结果和一些相关的附加信息。使用传统的方式&#xff0c;你可能需要创建一个包含这些信息的自定义类或者使用集合&#xff08;如 Map&#xff09;…

系统引导程序 Boot Loader——学习笔记

基于嵌入式Linux 的完整系统软件由三个部分组成&#xff1a;系统引导程序、Linux 操作系统内核和文件系统。 系统引导程序 Boot Loader 是系统加电后运行的第一段软件代码&#xff0c;它的作用是加载操作系统或者其他程序到内存中&#xff0c;并将控制权交给它们。 Boot Load…

代码随想录算法训练营第16天 | 104.二叉树的最大深度, 111.二叉树的最小深度 ,222.完全二叉树的节点个数

二叉树理论基础&#xff1a; https://programmercarl.com/%E4%BA%8C%E5%8F%89%E6%A0%91%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html#%E7%AE%97%E6%B3%95%E5%85%AC%E5%BC%80%E8%AF%BE 104.二叉树的最大深度 题目链接&#xff1a;https://leetcode.cn/problems/maximum-depth-…

Mediasoup Demo-v3笔记(三)——Mediasoup库介绍

Mediasoup基本概念 Worker &#xff1a; 每一个worker就是一个进程&#xff08;节点&#xff09;&#xff0c;进程和进程之间可以通信Router&#xff1a;每一个Router就是一个房间的概念Producer&#xff1a;每一个发出声音和视频的流都是一个ProducerConsumer&#xff1a;每一…

Confluence 的文章导入到 YouTrack KB 中

YouTrack 是有一个 KB 的&#xff0c;我们可以吧 Confluence 的文章全部导入到 YouTrack 的 KB 中。 首先&#xff0c;你需要具有管理员权限&#xff0c;然后选择导入。 然后可以在打开的界面中新增一个导入。 在新增导入中输入 Confluence 在随后的界面中输入你 Confluence …

浅谈ICMP协议

ICMP(Internet Control Message Protocol) 网络控制消息协议是网络层的协议&#xff0c;所谓控制&#xff0c;指的是通过下发指令来判断是否当前主机可达目标主机及不可达时的错误报告。通常使用ping命令和traceroute命令来使用。 ping命令:检测到目标主机是否可达、 tracerout…

SQL语句创建一个简单的银行数据库

目录 一、银行业务E-R图 二、数据库模型图 转换关系模型后&#xff1a; 三、创建数据库 3.1 创建银行业务数据库 四、创建表 4.1 创建客户信息表 4.2 创建银行卡信息表 4.3 创建交易信息表 4.4 创建存款类型表 结果如下&#xff1a; ​编辑 五、插入适量数据 5.1…

Linux中LVM实验

LVM实验&#xff1a; 1、分区 -L是大小的意思-n名称的意思 从vg0&#xff08;卷组&#xff09;分出来 2、格式化LV逻辑卷 LVM扩容 如果icdir空间不够了&#xff0c; 扩展空间lvextend -L 5G /dev/vg0/lv1 /dev/vg0/lv1(pp,vg,lv) 刷新文件系统xfs_growfs /lvdir VG扩容 …

选现货白银投资划不划算?

可以肯定的是选择现货白银投资是划算的&#xff0c;但投资者需要有足够的知识和经验&#xff0c;以及对市场的敏锐观察力。只有这样&#xff0c;投资者才能在现货白银投资中获取收益。在投资市场上&#xff0c;白银作为一种特殊的投资品种&#xff0c;一直以来都备受投资者们的…

01:云计算底层技术奥秘|虚拟化管理|公有云概述

云计算底层技术奥秘&#xff5c;虚拟化管理&#xff5c;公有云概述 虚拟化平台安装验证虚拟化支持 Linux虚拟机创建虚拟机磁盘虚拟机配置文件创建虚拟机 公有云简介 虚拟化平台安装 虚拟化&#xff1a;是一种技术 就是将不可拆分的实体资源变成可以自由划分的逻辑资源&#xf…

搭建Vite和Vue环境

​ 第一步&#xff1a;创建一个文件夹&#xff08;此处为新建文件夹&#xff09;&#xff0c;并通过vscode打开 第二步&#xff1a;鼠标右键新建终端&#xff0c;并在终端处输入代码npm create vuelatest ​第三步&#xff1a;输入该项目名称&#xff08;该项目名称并不是第一…

面向对象编程(进阶)(上)

文章目录 一. 关键字&#xff1a;this1.1 this是什么&#xff1f;1.2 什么时候使用this1.2.1 实例方法或构造器中使用当前对象的成员1.2.2 同一个类中构造器互相调用 1.3 练习 二. 面向对象特征二&#xff1a;继承(Inheritance)2.1 继承的概述2.1.1 生活中的继承2.1.2 Java中的…

乖乖,咱不用BeanUtil.copy了,咱试试这款神级工具(超详细)

引言 在现代Java应用程序开发中&#xff0c;处理对象之间的映射是一个常见而且必不可少的任务。随着项目规模的增长&#xff0c;手动编写繁琐的映射代码不仅耗时且容易出错&#xff0c;因此开发者们一直在寻找更高效的解决方案。比如基于Dozer封装的或者Spring自带的BeanUtil.…

C语言指针进阶之一字符指针

目录 1.指针知识回顾 2.字符指针 2.1字符指针的一般使用 2.2字符指针的另外一种使用 1.指针知识回顾 ①.指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识了一片空间。 内存会划分成一个个的内存单元&#xff0c;每个内存单元都有一个独立的编号&#xff0…