【前端 - CSS】第 10 课 - CSS 引入方式

news2024/12/29 10:18:04

        欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。


目录

1、缘起

2、CSS 引入方式

2.1、内部样式表

2.2、外部样式表

2.3、行内样式

3、总结 


1、缘起

        要想在 HTML 代码中写入 CSS 代码,要怎么做呢?有如下三种 CSS 引入方式,可以使得在 HTML 代码中使用 CSS 代码给元素添加 “花里胡哨” 的样式。


2、CSS 引入方式

2.1、内部样式表

        内部样式表 在学习时使用,其 CSS 代码写在 style 标签 里面。


2.2、外部样式表

外部样式表 开发使用 

<link  rel = "stylesheet"  href = "./test.css">

示例代码: 

①  test.css

p {
    /* 文字颜色 */
    color:red;

    /* 字号 */
    font-size:30px;
}

②  test.html 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- link 引入外部样式表;rel:关系,样式表 -->
        <link rel = "stylesheet" href = "./test.css">
    </head>

    <body>
        <p>这是 p 标签</p>
        <div>这是 div 标签</div>
    </body>
</html>


 

2.3、行内样式

行内样式表 配合 JavaScript 使用

CSS 写在标签的 style 属性值里

<div style = "color : red ; font-size : 20px;">这是 div 标签</div>  

示例代码: 

<body>
    <p>这是 p 标签</p>
    <div style="color:green; font-size: 30px;">这是 div 标签</div>
</body>


 

3、总结 

        本期的分享总结就到这里了,如果有疑问的小伙伴儿,我们在评论区交流嗷~~~,笔者必回,我们下期再见啦 !

前端 - CSS 专栏系列将持续更新 ,,,,,,

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

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

相关文章

English Learning - L3 作业打卡 Lesson5 Day33 2023.6.6 周二

English Learning - L3 作业打卡 Lesson5 Day33 2023.6.6 周二 引言&#x1f349;句1: And theres a student reading an English textbook.成分划分弱读连读语调 &#x1f349;句2: What do their choices say about them?成分划分连读爆破语调 &#x1f349;句3: Do you jud…

nodejs+vue+Express论坛网站34t91

本论坛网站有管理员&#xff0c;用户&#xff0c;普通管理员。管理员功能有个人中心&#xff0c;用户管理&#xff0c;普通管理员管理&#xff0c;论坛类别管理&#xff0c;交流论坛管理&#xff0c;系统管理等。用户功能有个人中心&#xff0c;交流论坛管理&#xff0c;我的收…

华为OD机试真题 JavaScript 实现【水仙花数】【2022Q4 100分】

一、题目描述 所谓水仙花数&#xff0c;是指一个n位的正整数&#xff0c;其各位数字的n次方和等于该数本身。 例如153是水仙花数&#xff0c;153是一个3位数&#xff0c;并且153 1^3 5^3 3^3。 二、输入描述 第一行输入一个整数n&#xff0c;表示一个n位的正整数。n在3到…

单容水箱建模(自衡单容水箱+无自衡单容水箱)

自衡单容水箱Simulink建模和PLC源代码请参看下面文章链接: 单容双容水箱建模(simulink仿真+PLC代码)_RXXW_Dor的博客-CSDN博客PLC通过伯努利方程近似计算水箱流量详细内容请参看下面的文章博客PLC通过伯努利方程近似计算水箱流量(FC)_怎么用伯努利方程求某水位流量_RXXW_Dor的…

基础汇编语言编程

目录 什么是汇编语言&#xff1f; 工程搭建 新建工程 环境设置 测试是否成功 正式学习汇编语言 数据处理指令 填充&#xff0c;加&#xff0c;减&#xff0c;乘 思考&#xff1a;我们可以看到R0寄存器可以存放8位十六进制数&#xff0c;那么0x12345678能不能用mov存入&am…

java SSM 摄影作品网站myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 摄影作品网站系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

会用Python做副业的人,有多豪横!

前两天一个朋友找到我吐槽&#xff0c;说工资一发交完房租水电&#xff0c;啥也不剩&#xff0c;搞不懂朋友圈里那些天天吃喝玩乐的同龄人钱都是哪来的&#xff1f; 确实如此&#xff0c;刚毕业的大学生工资起薪都很低&#xff0c;在高消费、高租金的城市&#xff0c;别说存钱…

浏览器跨域请求

跨域是浏览器的一种同源策略&#xff0c;所以该概念只存在于通过浏览器访问服务里。 如果缺少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的&#xff0c;浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的…

Vue3 ElementPlus Dialog封装 (二:使用provide inject)

引言 上一章Vue3 ElementPlus Dialog封装 &#xff08;一&#xff1a;使用props emit&#xff09; propemit实现的方法用于父子组件比较方便, 跨多层次组件比较麻烦 vue3 中 还提供了provide和inject方法供组件间通信(参考官网图片), 本篇使用该方法实现上章效果 实现原理 参考…

K8S之Ingress 对外暴露应用(十四)

• Ingress为弥补NodePort不足而生 • Pod与Ingress的关系 • Ingress Controller • Ingress 规则配置 一&#xff0c;Ingress为弥补NodePort不足而生 NodePort存在的不足&#xff1a; • 一个端口只能一个服务使用&#xff0c;端口需提前规划 • 只支持4层负载均衡二&#x…

九耶丨阁瑞钛伦特-大型计算机硬件组成(二)

TSO&#xff1a; TSO是Time Sharing Option的缩写&#xff0c;用户可以通过TSO命令和系统进行交互式工作。TSO命令直接使用并不方便&#xff0c;所以IBM又在TSO下开发了程序产品ISPF/PDF&#xff08;Interactive System Productivity/Program Development Facility)其中ISPF支…

VAPS XT4.2 与 VS2013 安装

VAPS XT4.2 与 VS2013 安装 安装顺序 安装 VS2013安装 License tool安装 VAPS XT4.2VS2013 的安装 安装 VS2013,安装内容全选,安装路径选择D盘;VS2013 激活,网上找密钥,比如:【BWG7X-J98B3-W34RT-33B3R-JVYW9】;电脑重启;Win+R,sysdm.cpl,打开环境变量,查看VS相关的…

Linux SSH命令实战教程,提升你的服务器管理基本功!

前言 大家好&#xff0c;又见面了&#xff0c;我是沐风晓月&#xff0c;本文是专栏【linux基本功-基础命令实战】的第62篇文章。 专栏地址&#xff1a;[linux基本功-基础命令专栏] &#xff0c; 此专栏是沐风晓月对Linux常用命令的汇总&#xff0c;希望能够加深自己的印象&am…

java生成、识别条形码和二维码

一、概述 使用 zxing 开源库 Zxing主要是Google出品的&#xff0c;用于识别一维码和二维码的第三方库主要类:BitMatrix 位图矩阵MultiFormatWriter 位图编写器MatrixToImageWriter 写入图片 可以生成、识别条形码和二维码 内置三种尺寸&#xff1a;enum Size {SMALL, MIDDLE, …

【习题】习题 2 - 编写程序求当前机器的字节序

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、字节序影响 3、示例代码 4、总结 1、缘起 在计算机中&#xff0c;字节序&#xff08;Byte Order&#xff09;指定了…

一文带你彻底掌握Java 中的Stream流(详细)

本文目录 学习目标中间操作Filter(过滤)Map(转换)Sorted(排序)Distinct(去重)Limit(限制)Skip(跳过)Peek(展示) 终止操作forEach(循环)Collect(收集)Count(计数)Reduce(聚合)AnyMatch(任意匹配)AllMatch(全部匹配)NoneMatch(无匹配) 使用Stream流的优缺点&#xff1a;优点&…

投票活动小程序开发搭建

由于小程序是基于微信开发者工具编写的&#xff0c;因此我先介绍一下需要使用的工具和技术&#xff1a; - 微信开发者工具&#xff1a;用于开发、调试和发布小程序。 - 小程序云开发&#xff1a;用于存储数据和进行后端逻辑处理。 - uni-app框架&#xff1a;uni-app 是一个使…

组件更新的底层逻辑

第一种更新&#xff1a;组件更新的逻辑&#xff0c;当修改了相关状态&#xff0c;组件会更新 1.触发shouldComponentUpdate 周期函数:是否允许更新 shouldComponentUpdate(nextProps, nextState) { // nextState: 存储要修改的最新状态 // this. state:存储的还是修改前的状态…

分布式系统常见的数据分区算法

文章目录 顺序分区轮询分区算法时间片轮转分区算法数据块分区算法业务主题分区算法 哈希分区节点取模分区算法一致性哈希分区算法&#xff08;重点&#xff09;1.Hash环2.容错性和可扩展性3.数据倾斜4.带有限负载的一致性哈希算法5.带虚拟节点的一致性哈希算法 虚拟槽分区算法&…

个人开发者或学生必备的100元云服务器大全

100元以内云服务器配置大全&#xff0c;预算100元可以买到什么配置的云服务器&#xff1f;100元可以选到腾讯云2核2G3M带宽轻量服务器、阿里云2核2G3M带宽轻量应用服务器、UCloud香港轻量应用云主机30M带宽、华为云HECS云服务器2核4G配置等&#xff0c;阿腾云分享预算100元可选…