web前端-CSS引入方式

news2024/11/17 14:49:07

一、内部样式表

内部样式表(内嵌样式表)是写到html页面内部,是将所有的 CSS 代码抽取出来,单独放到一个<styie>标签中。

注意:
① <style>标签理论上可以放在 HTML文档的任何地方,但一般会放在文档的<head>标签中

② 通过此种方式,可以方便控制当前整个页面中的元素样式设置

③ 代码结构清晰,但是并没有实现结构与样式完全分离

④ 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是我们练习时常用的方式

二、行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS 样式。适合于修改简单样式

注意:

① style 其实就是标签的属性

② 在双引号中间,写法要符合CSS规范

③ 可以控制当前的标签设置样式

④ 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用

⑤ 使用行内样式表设定CSS,通常也被称为行内式引入

例如:

<!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>
    <div style="color: green;">十个勤天,做大做强</div>
</body>
</html>

三、外部样式表

实际开发都是外部样式表,适合于样式比较多的情况.核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML页面中使用

引入外部样式表分为两步:
1.新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。

2.在 HTML页面中,使用<link>标签引入这个文件。

使用外部样式表设定CSS,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

例如:

<!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="D:\JavaWeb\HTML\css\style.css">
</head>
<body>
    <div>十个勤天,做大做强</div>
</body>
</html>
div {
    color: green;
    font-size: 66px;
    font-style: italic;
}

四、总结

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

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

相关文章

【多样化的思想】基于执行档案的测试

下面我们讨论另一种关于多样性的观点。我们知道&#xff0c;对被测对象而言&#xff0c;测试输入空间代表的是各种可能的外部环境条件。如果两个测试输入点距离比较远&#xff0c;说明在这两个点上&#xff0c;被测对象所面对的外部环境条件很不一样&#xff0c;所以我们说&…

RabbitMQ的高级特性-消息确认机制

对于RabbitMQ发送消息到消费端的可靠性保障 引入&#xff1a;发送者发送消息后&#xff0c;到达消费端之后会出现一下两种情况&#xff1a; ①消息处理成功 ②消息处理异常 RabbitMQ向消费者发送消息之后, 就会把这条消息删掉, 那么第两种情况, 就会造成消息丢失&#xff0…

fmql之字符驱动设备(3)-并发与竞争

学会使用设备树后&#xff0c;要学习linux驱动编写中容易出现的”并发与竞争“。 代码是在之前代码的基础上进行修改。 并发与竞争 &#xff08;本部分来自于正点原子pdf&#xff09; 什么是并发与竞争&#xff0c;为什么会出现并发与竞争&#xff1a; 要保护的内容是&#…

基于TSN的实时通信网络延迟评估技术

论文标题&#xff1a;A TSN-based Technique for Real-Time Latency Evaluation in Communication Networks 作者信息&#xff1a; Alberto Morato, Claudio Zunino, Manuel Cheminod, Stefano Vitturi&#xff0c;来自意大利国家研究委员会&#xff0c;CNR-IEIIT。电子邮件:…

深度学习实战TT100K中国交通标志检测【数据集+YOLOv5模型+源码+PyQt5界面】

AI深度学习TT100k交通标志识别 文章目录 研究背景代码下载链接一、效果演示1.1 图像演示1.2 视频演示 二、技术原理2.1 整体流程2.2 TT100K中国交通标志数据集介绍2.3 YOLOV5 TT100K中国交通标志检测原理2.3.1 概述2.3.2 输入层2.3.3 Backbone层2.3.4 Backbone层2.3.5 Head层 2…

【人人保-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

【时时三省】(C语言基础)指针笔试题6

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 笔试题6 首先aa&#xff3b;2&#xff3d;&#xff3b;5&#xff3d;是二维数组 也就是说它有两行第一行是1 2 3 4 5 第二行是6 7 8 9 10 然后&aa取出的数组的地址 &aa1就直接跳到第…

第1章 C++初识

1.1 编写第一个C程序 1.打开Visual Studio点击"创建新项目" 2.点击"空项目"&#xff0c;并点击"下一步" 3.设置"项目名称"并"设置地址" 4.打开项目后&#xff0c;右击"源文件"并选择"添加"的"新建…

国产操作系统(统信UOS)网络安全等级保护基础安全加固

统一操作系统UOS是由多家企业共同打造的中文国产操作系统。 一、设置口令复杂度策略和有效期 首先安装libpam-pwquality依赖包 口令复杂度策略通过libpam-pwquality依赖包进行设置 依赖包的安装命令&#xff1a;sudo apt-get install libpam-pwquality。 依赖包的查看方式执…

新茶饮卷出海,本土化成胜败关键

爱扬格说&#xff1a;“在那海水酣睡的宫殿里&#xff0c;铺满了多少奇珍异宝。”如今&#xff0c;新茶饮品牌正掀起出海狂潮&#xff0c;挖掘来自海外市场的财富机会。 近日&#xff0c;茶百道股价实现十连涨。消息面上&#xff0c;公司在韩国首尔建大站新店正式对外营业。根…

复现 BEVfusion bug集合(4090d)

目录 写在前面的话Bug 汇总1. python版本2. cuda版本3. mmdet3d版本4. mmcv版本5. mmdet版本 后期工作&#xff08;看到numpy说明成功一半&#xff09;6. numpy版本7. timm安装8. yapf 版本 写在前面的话 主要的问题还是mmcv库的问题&#xff0c;这个版本维护太差了&#xff0…

Idea中的导出分包层次结构图(项目结构树)

导出分包层次结构图 在Terminal中, 输入命令&#xff1a;Get-ChildItem “项目地址” | Tree | Out-File -FilePath “输出地址” Get-ChildItem D:\work\workspace\test | Tree | Out-File -FilePath D:\test.txt

HCIP--以太网交换安全(一)

以太网交换安全概述&#xff1a;以太网交换安全是一系列技术和策略的集合&#xff0c;旨在保护以太网交换机免受各种网络攻击和威胁。 端口隔离 一、端口隔离概述&#xff1a; 作用&#xff1a;可以实现同一个VLAN内端口的隔离 优势&#xff1a; 端口隔离功能为用户提供了更…

央企办医布局智慧医康养,环球医疗(2666.HK)让养老有“医”靠

投资传奇查理芒格说&#xff1a;“我给自己设定的目标是追求平常人没有的常识。”只有挖掘出市场潜移默化的趋势&#xff0c;才能抓住投资机遇。 当下&#xff0c;资本市场一个被低估的产业趋势是&#xff0c;医疗健康行业大并购时代悄然开启&#xff0c;头部上市公司对并购产…

日本IT-正社员、契约社员、个人事业主该如何选?

正社員&#xff1a;就是「正规社员」的意思&#xff0c;按照公司的规定而直接雇用&#xff0c;而且没有制定雇用期间&#xff0c;基本上是以终身雇用至退休年龄&#xff08;70岁&#xff09;为前提。而被雇用的一方需要听从公司的业务命令&#xff0c;包括职位或职场的调迁&…

影响6个时序Baselines模型的代码Bug

前言 我是从去年年底开始入门时间序列研究&#xff0c;但直到最近我读FITS这篇文章的代码时&#xff0c;才发现从去年12月25号就有人发现了数个时间序列Baseline的代码Bug。如果你已经知道这个Bug了&#xff0c;那可以忽略本文&#xff5e; 这个错误最初在Informer&#xff0…

【C++】模板、宏、命名空间、

十五、C中的模板templates 本部分讨论C中的模板templates 在别的语言中&#xff0c;比如java、c、c#等托管语言中&#xff0c;模板类似泛型的概念&#xff0c;但模板比泛型要强大得多。模板有点像宏&#xff0c;而泛型却非常受限于类型系统以及其他很多因素。同时模板也是一个…

SQLite数据库管理:深入解析创建数据库、表、索引及用户权限与事务管理

目录 一、SQLite数据库创建 1.1 安装SQLite 1.2 创建数据库 1.3 验证数据库 二、创建表 2.1 基本语法 2.2 数据类型 2.3 创建表的示例 2.4 查看表结构 三、创建索引 3.1 创建索引的语法 3.2 创建索引的示例 3.3 索引的维护 四、管理用户权限 4.1 基于文件系统的权…

动态规划算法:12.简单多状态 dp 问题_打家劫舍_C++

目录 题目链接&#xff1a;LCR 089. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 一、题目解析 题目&#xff1a; 解析&#xff1a; 二、算法原理 1、状态表示 状态表示&#xff1a; 2、状态转移方程 状态转移方程推理&#xff1a; 3、初始化 dp表初始化: 特殊…

C++(学习)2024.9.25

目录 继承 概念 构造函数 1.派生类与基类构造函数的关系 2.解决方案 &#xff08;1&#xff09;补充基类的无参构造函数 &#xff08;2&#xff09;手动在派生类中调用基类构造函数 1.透传构造 2.委托构造 3.继承构造 3.对象的创建与销毁流程 4.多重继承 (1)概念 …