css引入方式(样式表)

样式表

我们网页是html代码的,我们是需要一种方式把我们的css代码放入到html代码中,那么这个就是css的引入方式又叫做样式表。

css样式表

1.内部样式表

2.行内样式表

3.外部样式表

内部样式表(又称嵌入式引入)

本样式表是指,通过把所有的css代码放入到head部分的<style>标签中。

其实<style>放到哪里都可以,只不过潜规则是放到head标签中。

(通常是练习的时候使用)

范围:对整个页面进行编辑。

样式表如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#a {line-height: 10px;}#b {line-height: 20px;}#c {line-height: 30px;}</style>
</head>
<body><p id="a">i am amy</p><p id="b">i am tom</p><p id="c">i am daming</p>
</body>
</html>

所有的css代码都写在了style标签中。

行内样式表

描述:通常用于对一个特定标签进行编辑。也可以直接理解为给特定的这个标签添加个属性。

格式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p style="font-size: 10px; color: blueviolet;">i am amy</p>
</body>
</html>

跟属性一样,直接写到标签中。

外部样式表

描述:用于需要对大量样式进行修改的情况,更适合开发的时候使用。他就是把css写到一个独立的文件中,然后直接导入。

引入方法:

先创建后缀为css的文件,把所有的css代码写到这个文件中,再在这个html文件中用link标签引入这个标签。

link标签语法:

<link rel="stylesheet" href="css路径">

目录结构:

代码:

html中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="hhh.css">
</head>
<body><p>i am amy</p><p>i am a big cool man</p>
</body>
</html>

css中

p {font-size: 20px;color: blueviolet;font-weight: 800;
}

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

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

相关文章

pytorch实现胶囊网络(capsulenet)

胶囊网络在hinton刚提出来的时候小热过一段时间&#xff0c;之后热度并没有维持多久。vision transformer之后基本少有人问津了。不过这个模型思路挺独特的&#xff0c;值得研究一下。 这个模型的提出是为了解决CNN模型学习到的特征之间没有空间上的关系&#xff0c;从而对于各…

政安晨:【Keras机器学习实践要点】(二十六)—— 内卷神经网络

目录 简介 设置 卷积 演变 测试逆卷积层 图像分类 获取 CIFAR10 数据集 数据可视化 卷积神经网络 逆向传播神经网络 比较 损失图和准确率图 可视化卷积核 结论 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: TensorFlow与Ke…

open c UF_MODL_create_simple_hole 识别放置平面 UF_MODL_ask_face_data

在BLOCK上创建一个简单孔 UF_FEATURE_SIGN sign UF_NULLSIGN;double block_orig[3] { -25.0,-25.0,0.0 };char* block_len[3] { "50","50","30" };tag_t blk_obj;UF_MODL_create_block1(sign, block_orig, block_len, &blk_obj);tag_t bo…

LabVIEW无线快速存取记录器(WQAR)测试平台

LabVIEW无线快速存取记录器&#xff08;WQAR&#xff09;测试平台 随着民用航空业的迅速发展&#xff0c;航空安全的保障日益成为公众和专业领域的关注焦点。无线快速存取记录器&#xff08;WirelessQuick Access Recorder, WQAR&#xff09;作为记录飞行数据、监控飞行品质的…

HarmonyOS NEXT应用开发—在Native侧实现进度通知功能

介绍 本示例通过模拟下载场景介绍如何将Native的进度信息实时同步到ArkTS侧。 效果图预览 使用说明 点击“Start Download“按钮后&#xff0c;Native侧启动子线程模拟下载任务Native侧启动子线程模拟下载&#xff0c;并通过Arkts的回调函数将进度信息实时传递到Arkts侧 实…

Redis入门到通过之Redis安装

文章目录 Redis安装说明1.单机安装Redis1.1.安装Redis依赖1.2.上传安装包并解压1.3.启动1.3.1.默认启动1.3.2.指定配置启动1.3.3.开机自启 2.Redis客户端2.1.Redis命令行客户端2.2.图形化桌面客户端2.2.1.安装2.2.2.建立连接 Redis安装说明 大多数企业都是基于Linux服务器来部…

详解小度Wi-Fi内部芯片及电路原理图分析

小度随身WiFi是一款便携式USB路由器&#xff0c;它实现了用户跨终端联网&#xff0c;随身携带&#xff0c;可以在室内实现免费WiFi覆盖。外形美观&#xff0c;小巧便携。 这一款小度WiFi采用的主芯片是MT7601UN&#xff0c;一款高度集成的Wi-Fi单芯片&#xff0c;支持150 Mbp…

HarmonyOS实战开发-图片编辑、使用 TextArea 实现多文本输入

介绍 本示例使用 TextArea 实现多文本输入&#xff0c;使用 ohos.app.ability.common 依赖系统的图库引用&#xff0c;实现在相册中获取图片&#xff0c;使用 ohos.multimedia.image 生成pixelMap&#xff0c;使用pixelMap的scale()&#xff0c;crop()&#xff0c;rotate()接口…

计算两个时间段的差值

计算两个时间段的差值 运行效果&#xff1a; 代码实现&#xff1a; #include<stdio.h>typedef struct {int h; // 时int m; // 分int s; // 秒 }Time;void fun(Time T[2], Time& diff) {int sum_s[2] { 0 }; for (int i 0; i < 1; i) { // 统一为秒数sum_s[…

pandas(day10)

一. 各各品类产品交易指数对比 获取文件名 files glob.glob("./*.xlsx")# 读取数据&#xff0c;并改列名&#xff0c;增加一列 品牌 dfs [] for f in files:t f[2:4]df pd.read_excel(f)df["品牌"] tif t "拜耳":df.rename(columns{"…

在线课程平台LearnDash评测 – 最佳 WordPress LMS插件

在我的LearnDash评测中&#xff0c;我探索了流行的 WordPress LMS 插件&#xff0c;该插件以其用户友好的拖放课程构建器而闻名。我深入研究了各种功能&#xff0c;包括课程创建、测验、作业、滴灌内容、焦点模式、报告、分析和管理工具。 我的评测还讨论了套餐和定价选项&…

视频基础学习五——视频编码基础二(编码参数帧、GOP、码率等)

系列文章目录 视频基础学习一——色立体、三原色以及像素 视频基础学习二——图像深度与格式&#xff08;RGB与YUV&#xff09; 视频基础学习三——视频帧率、码率与分辨率 视频基础学习四——视频编码基础一&#xff08;冗余信息&#xff09; 视频基础学习五——视频编码基础…