行内样式、内部样式、外部样式

news2024/11/25 16:34:21
行内样式:

该元素的所在本行中使用style标记来写样式

内部样式:

在head标签中使用style标记来写样式

外部样式:

在head标签中使用link标记引用外部样式

注意优先级:

行内样式>内部样式>外部样式


代码举例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文字水平居中与垂直居中</title>
        <link rel="stylesheet" href="style.css"> <!--外部样式:在head标签中使用link标记引用外部样式-->
        <style>
            /*内部样式:在head标签中使用style标记来写样式*/
            .box1{
                width: 1000px;
                height: 300px;
                background-color: blue;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <!--行内样式:该元素的所在本行中使用style标记来写样式-->
            <div class="box2" style="color: pink; font-size: 91px;text-align: center;"><p>hello world</p></div>
        </div>
    </body>
</html>

该网页效果图:

 

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

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

相关文章

ChatGPT简介及基本概念

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列点击跳转>ChatGPT和AIGC &#x1f449;关于作者 专…

传输层——— UDP协议

文章目录 一.传输层1.再谈端口号2.端口号范围划分3.认识知名端口号4.两个问题5.netstat与iostat6.pidof 二.UDP协议1.UDP协议格式2.UDP协议的特点3.面向数据报4.UDP的缓冲区5.UDP使用注意事项6.基于UDP的应用层协议 一.传输层 在学习HTTP等应用层协议时&#xff0c;为了便于理…

JMeter JDBC请求---操作MySql数据库

准备&#xff1a; 1、MySql的驱动jar包&#xff1a;mysql-connector-java-5.1.28.jar&#xff0c; 2、jmeter安装目录中修改编码格式&#xff1a;\bin\jmeter.properties &#xff1a;sampleresult.default.encodingUTF-8 3、连接数据库的连接地址、用户名、密码以及操作s…

在test用户下创建test1表并插入数据,然后将tes1t表的查询权限授予test2用户

文章目录 1、以 test 用户登录2、创建 test1 表3、插入数据4、查看数据5、授予权限创建用户test2以 test 用户登录并授予权限&#xff1a;使用test2用户登录查询&#xff0c;测试结果 1、以 test 用户登录 首先&#xff0c;您需要以 test 用户登录到数据库 sqlplus test/1232…

RocketMQ 分布式事务消息实战指南:确保数据一致性的关键设计

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任 Java 开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&…

【数据结构】树与二叉树(十七):二叉树的基础操作:删除指定结点及其左右子树(算法DST)

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…

【软考篇】中级软件设计师 第四部分(三)

中级软件设计师 第四部分&#xff08;三&#xff09; 三十四. 结构化开发方法34.1 内聚34.2 耦合 三十五. 测试基础知识三十六. 面向对象36.1 UML图36.2 设计模式36.3 数据流图 读前须知&#xff1a; 【软考篇】中级软件设计师 学前须知 上一章节&#xff1a; 【软考篇】中级软…

在rt-thread中使用iperf触发断言卡死

问题触发 最近在适配sdio device驱动&#xff0c;CP芯片与AP芯片对接&#xff08;RK3399&#xff09;&#xff0c;准备使用iperf测试下能否AP与CP能否正常通信。CP芯片跑的是rt-thread系统&#xff0c;在使用sdio_eth_dev_init命令初始化后&#xff0c;使用iperf -c 192.168.1…

Uniapp连接iBeacon设备——实现无线定位与互动体验(理论篇)

目录 前言&#xff1a; 一、什么是iBeacon技术 二、Uniapp连接iBeacon设备的准备工作 硬件设备&#xff1a; 三、Uniapp连接iBeacon设备的实现步骤 创建Uniapp项目&#xff1a; 四、Uniapp连接iBeacon设备的应用场景 室内导航&#xff1a; 五、Uniapp连接iBeacon设备的未来…

MQTT协议详解及在Android上的应用

MQTT协议详解及在Android上的应用 一、MQTT协议简介二、MQTT工作原理三、MQTT协议特点四、MQTT在Android上的应用4.1 准备工作4.2 示例代码 五、结论 本博客将全面介绍MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;协议的基本概念、工作原理、特点以及在An…

网工内推 | 国企、上市公司售前,CISP/CISSP认证,最高18K*14薪

01 中电福富信息科技有限公司 招聘岗位&#xff1a;售前工程师&#xff08;安全&#xff09; 职责描述&#xff1a; 1、对行业、用户需求、竞争对手等方面提出分析报告&#xff0c;为公司市场方向、产品研发和软件开发提供建议&#xff1b; 2、负责项目售前跟踪、技术支持、需…

01Urllib

1.什么是互联网爬虫&#xff1f; 如果我们把互联网比作一张大的蜘蛛网&#xff0c;那一台计算机上的数据便是蜘蛛网上的一个猎物&#xff0c;而爬虫程序就是一只小蜘蛛&#xff0c;沿着蜘蛛网抓取自己想要的数据 解释1&#xff1a;通过一个程序&#xff0c;根据Url(http://www.…

基于边缘智能网关的冬季管网智能监测应用

随着我国北方全面进入到冬季&#xff0c;多日以来严寒、降雪天气频发&#xff0c;民生基础设施也迎来冬季考验。尤其是民众生活仰赖的水、电、气管网&#xff0c;面临极端冰雪天气时易存在各种风险&#xff0c;包括管道水/气泄露损耗、低温冻裂、积雪压塌压损、冻结受阻等。 针…

广州华锐互动VRAR:VR教学楼地震模拟体验增强学生防震减灾意识

在当今社会&#xff0c;地震作为一种自然灾害&#xff0c;给人们的生活带来了巨大的威胁。特别是在学校这样的集体场所&#xff0c;一旦发生地震&#xff0c;后果将不堪设想。因此&#xff0c;加强校园安全教育&#xff0c;提高师生的防震减灾意识和能力&#xff0c;已经成为了…

Ubuntu22.04离线安装uwsgi问题记录

GCC4.8安装 1、报错信息1&#xff1a; 由于缺少gcc4.8环境导致的无法安装uwsgi 解决方案&#xff1a; 离线安装GCC4.8环境, GCC4.8.5离线安装步骤如下&#xff1a; 1、下载gcc的离线安装包及其依赖包&#xff0c;链接如下&#xff1a; https://download.csdn.net/download/…

vue源码分析(八)—— update分析(首次渲染)

文章目录 前言一、update首次渲染的核心方法__path__二、__path__方法详解1. 文件路径2. inBrowser的解析&#xff08;1&#xff09;noop 的空函数定义&#xff1a;&#xff08;2&#xff09;patch 的含义 3. createPatchFunction 的解析4. path 方法解析&#xff08;1&#xf…

医美三季报内卷,华熙生物、爱美客、昊海生科混战双11

双十一落幕&#xff0c;据天猫大美妆数据统计&#xff0c;被称为“医美三剑客”的华熙生物(688363.SH&#xff09;、爱美客(300896.SZ)、昊海生科(688366.SH)的医美产品均未进入天猫双11美容护肤类目TOP10榜单。 与此同时&#xff0c;其业绩承压困局也写在最新的三季报里。 「…

M系列 Mac安装配置Homebrew

目录 首先&#xff0c;验证电脑是否安装了Homebrew 1、打开终端输入以下指令&#xff1a; 2、如图所示&#xff0c;该电脑没有安装Homebrew &#xff0c;下面我们安装Homebrew 一、官网下载 &#xff08;不建议&#xff09; 1、我们打开官网&#xff1a;https://brew.sh/ …

freeRTOS--任务通知

一、什么是任务通知 使用任务通知可以替换二值信号量、计数信号量、事件标志组&#xff0c;可以替代长度为1的队列&#xff0c;任务通知速度更快、使用的RAM更少。 任务通知值的更新方式&#xff1a; 发消息给任务&#xff0c;如果有通知未读&#xff0c;不覆盖通知值。发消…

成功解决:com.alibaba.druid.support.logging.JakartaCommonsLoggingImpl.

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 前言 使用Spring 整合 mybatis的时候 报错…