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…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
基于ASP.NET+ SQL Server实现（Web）医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
)
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。 这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...