CSS的概念和基本用法
CSS的作用:
页面美化和布局控制。
1.概念:
Cascading Style Sheets 层叠样式表。
层叠:多个样式可以作用在同一个html的元素上,同时生效。
2.好处:
(1).功能强大
(2).将内容展示和样式控制分离
* 降低耦合度,解耦。
* 让分工协作更容易。
* 提高开发效率。
3.CSS的使用:CSS与html结合方式。
(1).内联样式
* 在标签内使用style属性指定css代码。
* 如:<div style="color:red;">hello css</div>
(2).内部样式
* 在head标签内,定义style标签,style标签的标签体内容就是css代码。
* 如:
<style>
div{
color:blue;
}
</style>
(3).外部样式
1).定义css资源文件。
2).在head标签内,定义link标签,引入外部的资源文件
* 如:
a.css文件:
div{
color:green;
}
在head标签内,用link引入外部资源文件
<link rel="stylesheet" href="css/a.css">
总结:
* (1),(2),(3)种方式 css作用范围越来越大。
第(1)种方式作用于单个标签。
第(2)种方式作用于单个页面。
第(3)种方式作用于多个页面,哪个页面引入样式,就会有相应的效果。
* 第(1)种方式不常用,后期常用方式(2)和(3).
* 第(3)种格式还可以写为:
<style>
@import "css/a.css";
</style>
示例:
第(1)种内联样式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联样式</title>
</head>
<body>
<!--
内联样式* 在标签内使用style属性指定css代码
--><div style="color:red;">hello css</div></body>
</html>
第(2)种内部样式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内部样式</title><style>div{color:blue;}</style>
</head>
<body>
<!--
内部样式* 在head标签内,定义style标签,style标签的标签体内容就是css代码
--><div>hello css</div><div>hello css</div>
</body>
</html>
第(3)种外部样式:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部样式</title><!--第1种引入外部文件的方式--><!-- <link rel="stylesheet" href="css/a.css">--><!--第2种引入外部文件的方式--><style>@import "css/a.css";</style>
</head>
<body><!--外部样式1. 定义css资源文件。2. 在head标签内,定义link标签,引入外部的资源文件
--><div>hello css</div><div>hello css</div>
</body>
</html>
相关文章:
CSS的概念和基本用法
CSS的作用: 页面美化和布局控制。 1.概念: Cascading Style Sheets 层叠样式表。 层叠:多个样式可以作用在同一个html的元素上,同时生效。 2.好处: (1).功能强大 (2).将内容展示和样式控制分离 * 降低耦合度…...
万字详解Java的三大特性:封装 | 继承 | 多态
前言:面向对象程序设计的三大特征就是:封装,继承,多态。在前文介绍了类和对象后,我们就可以继而学习什么是封装,怎么用类的子类来实现继承和多态 目录 一.面向对象的特性 1.封装性 2.继承性 3.多态性…...
TensorFlow学习笔记--(1)张量的随机生成
张量的生成 如何判断一个张量的维数:看张量的中括号有几层 0 1 2 :零维数列 [2 4 6] : 一维向量 [ [1 2 3] [4 5 6] ] : 二维数组 两行三列 第一行数据为 1 2 3 第二行数据为 4 5 6 以此类推 n维张量有n层中括号 tf.zeros(%指定一个张量的维数%) 生成一…...
如何防止IP和账户关联?
在当今信息时代,个人隐私安全变得尤为重要。保护个人IP地址和账户的隐私是防止隐私泄露、信息泄漏以及支付安全等问题的关键。VMLogin虚拟浏览器作为一种隐私工具,可以帮助您解决问题。本文将为您介绍如何使用它来保护隐私安全和防止IP和账户关联。 一、…...
进入网络安全行业有哪些大公司推荐
随着互联网的普及和数字化进程的加速,网络安全问题日益凸显。从个人信息的泄露到国家基础设施的被攻击,网络安全已经不再只是一个技术问题,而是关乎到每个人、每个企业和国家的核心利益。在这场没有硝烟的战争中,一些大公司凭借其…...
OpenHarmony 社区运营报告(2023 年 10 月)
● 截至 2023 年 10 月,OpenHarmony 社区共有 51 家共建单位,累计超过 6200 名贡献者产生 24.2 万多个 PR,2.3 万多个 Star,6.1 万多个 Fork,59 个 SIG。 ● OpenHarmony 4.0 版本如期而至,开发套件同步升级…...
Mybatis二级缓存源码整理
添加配置mybatis-plus.configuration.cache-enabledtrue在mapper.xml文件中添加cache标签<cache size"10240" eviction"LRU"/>同一个事务中二级缓存不生效,会使用一级缓存,因为事务未提交。 执行流程部分 Configuration创建…...
如何在 HarmonyOS 对数据库进行备份,恢复与加密
数据库备份与恢复 场景介绍 当应用在处理一项重要的操作,显然是不能被打断的。例如:写入多个表关联的事务。此时,每个表的写入都是单独的,但是表与表之间的事务关联性不能被分割。 如果操作的过程中出现问题,开发者可…...
js实现向上、向下、向左、向右无缝滚动
向左滚动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, ini…...
6 Hive引擎集成Apache Paimon
更多Paimon数据湖内容请关注:https://edu.51cto.com/course/35051.html 在实际工作中,我们通查会使用Flink计算引擎去读写Paimon,但是在批处理场景中,更多的是使用Hive去读写Paimon,这样操作起来更加方便。 前面我们…...
发布版本自动化记录版本功能方法
# 安装commitizennpm install --save-dev commitizen# 初始化Conventional Commits规范适配器npx commitizen init cz-conventional-changelog --save-dev --save-exact最后一步,需要在package.json中添加一个script"scripts": {..., // 此处省略其它配置…...
Elastic Stack 8.11:引入一种新的强大查询语言 ES|QL
作者:Tyler Perkins, Ninoslav Miskovic, Gilad Gal, Teresa Soler, Shani Sagiv, Jason Burns Elastic Stack 8.11 引入了数据流生命周期、一种配置数据流保留和降采样(downsampling) 的简单方法(技术预览版)…...
wx:for-item wx:for-index wx:for-key
wx:for-item wx:for-item , 数组当前项的变量名,默认为 item 作用:使用 (当前项变量名.属性名) 取得属性值每一项 <view wx:for"{{array}}"><view>{{item.name item.age }}</view> </view>等同于 &…...
老师还不会评课?这里有你需要的解决方案
优点: 1.课件制作: 老师的PPT设计得很新颖,插入的音乐视频都非常贴合课堂内容,看得出老师非常用心地进行了设计。 2.教师素养:老师的语言丰富、朗读能力很出色、板书设计很工整。 3.教师风格: xx老师上课激情澎湃/非常有亲和力…...
Talk | 马里兰大学博士生吴曦旸:分布式多智能体强化学习在复杂交通轨迹规划中的应用
本期为TechBeat人工智能社区第545期线上Talk! 北京时间11月09日(周四)20:00,马里兰大学博士生—吴曦旸的Talk已准时在TechBeat人工智能社区开播! 他与大家分享的主题是: “分布式多智能体强化学习在复杂交通轨迹规划中的应用”,介…...
2023年下半年架构案例真题及答案
案例的考点: 大数据架构 Lambda架构和Kappa架构 jwt特点 数据持久层,Redis数据丢失,数据库读写分离方案 Hibernat架构 SysML七个关系,填需求图 大数据的必选题: 某网作为某电视台在互联网上的大型门户入口&#…...
Java必考面试题,谈谈你对 Spring AOP 的理解
大家好,我是伍六七。 今天我们来学习 Spring 框架中最重要的概念之一:AOP。 这是一个 Java 程序员必考的面试题,大家好好理解。我们开始正文。 AOP 的概念 Spring AOP 是 Java 程序员们面试经常被问到的一个问题,但 AOP&#…...
BERT和ChatGPT简单对比
OpenAI发布了第一个版本的GPT(Generative Pretrained Transformer)模型在2018年6月。 谷歌的BERT模型(Bidirectional Encoder Representations from Transformers)是在2018年10月发布的。 BERT和ChatGPT都是由人工智能研究实验室…...
又一重要合作,创邻科技华为云联营产品正式发布
近日,创邻科技旗下的“Galaxybase高性能图平台”正式入驻华为云云商店联营商品,创邻科技成为华为云在数据库与缓存领域的联营联运合作伙伴。通过联营联运模式,双方合作能够深入产品、生态、解决方案等多个领域,助力各行业用户数字…...
PHP+Swoole应用示例
**Swoole是一个C编写的基于异步事件驱动和协程的并行网络通信引擎,为PHP提供高性能网络编程支持** ## ⚙️ 快速启动 可以直接使用 [Docker](https://github.com/swoole/docker-swoole) 来执行Swoole的代码,例如: bash docker run --rm php…...
保姆级教程:用Vector Configurator Pro配置AUTOSAR Dem模块的通用参数(附避坑清单)
保姆级教程:用Vector Configurator Pro配置AUTOSAR Dem模块的通用参数(附避坑清单) 在汽车电子领域,诊断事件管理(Dem)模块是AUTOSAR架构中至关重要的组成部分,负责处理故障诊断相关功能。对于刚…...
**发散创新:基于Rust实现的轻量级游戏物理引擎设计与实战**在现代游戏
发散创新:基于Rust实现的轻量级游戏物理引擎设计与实战 在现代游戏开发中,物理引擎是构建真实感交互体验的核心组件之一。传统的物理引擎如Box2D、Bullet虽然功能强大,但往往体积庞大、依赖复杂配置,难以灵活嵌入到小型项目或原型…...
别让输入法偷走你的快捷键!手把手教你用OpenArk排查Windows热键冲突(附搜狗/微软拼音排查法)
别让输入法偷走你的快捷键!手把手教你用OpenArk排查Windows热键冲突(附搜狗/微软拼音排查法) 每次按下CtrlShiftF准备全局搜索代码时,却发现输入法弹出了符号面板——这种突如其来的快捷键冲突,就像咖啡洒在键盘上一样…...
晶体谐振器基础原理
在现代电子世界中,从智能手机到卫星导航,从工业控制到消费电子,所有精密电子设备都离不开一个核心基础元件 —— 晶体谐振器。它如同电子系统的 “频率基准”,凭借石英晶体独特的压电效应,为电路提供稳定、精准的频率信…...
从BUCK到BOOST:手把手教你搞定DCDC电感与电容的选型计算(附公式与避坑点)
从BUCK到BOOST:手把手教你搞定DCDC电感与电容的选型计算(附公式与避坑点) 在电源设计领域,DCDC转换器的无源器件选型往往是决定整体性能的关键环节。许多工程师在初次接触BUCK或BOOST电路设计时,面对琳琅满目的电感和电…...
Qt状态机实战:用QStateMachine为你的嵌入式设备UI设计一个状态清晰的交互流程
Qt状态机在嵌入式UI设计中的工程实践:从理论到落地的完整解决方案 在工业控制面板、医疗设备操作界面或智能家居中控系统等嵌入式场景中,用户界面的状态管理往往比桌面应用复杂数倍。当设备需要处理自检流程、用户输入验证、多任务调度等复杂交互时&…...
LeCun和文心同发现:原生多模态是个偏科生
创新点 本文核心创新在于彻底摒弃基于预训练语言模型微调的范式,采用从 0 开始的统一多模态预训练方案,基于 Transfusion 框架将文本自回归预测与视觉流匹配扩散目标融合。揭示视觉与语言的缩放不对称性并给出架构解法,通过 IsoFLOP 分析发现…...
Sockeye:基于硬件手册的SoC安全验证工具解析
1. Sockeye:基于硬件手册的SoC安全验证革命在处理器安全领域,我们正面临一个尴尬的现实:现代SoC(系统级芯片)的参考手册平均包含超过3000页的技术描述,而其中关键的安全机制说明往往分散在不同章节…...
零代码也能上手:非技术团队也能搭建的企业级智能体完整方案 —— 2026年企业级AI Agent落地实战指南
2026年,企业数字化转型已进入“智能体普惠”的关键节点。 根据最新行业数据显示,超过80%的非IT型企业正试图通过AI Agent(智能体)重塑业务流程。 然而,传统的AI开发模式往往受限于高昂的技术门槛,导致业务部…...
3小时重构旧代码库:用C++26反射替代Boost.Hana的4步安全迁移法(附clangd语义补全配置清单)
第一章:C26 反射特性在元编程中的应用 避坑指南C26 引入的静态反射(Static Reflection)核心提案(P1240R4、P2637R2 等)为元编程带来了范式级变革——但其当前实现状态仍处于编译器实验阶段,需警惕语言特性与…...
