当前位置： 首页 > news >正文

CSS的概念和基本用法

news 2026/4/24 2:34:59

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的作用&#xff1a; 页面美化和布局控制。 1.概念&#xff1a; Cascading Style Sheets 层叠样式表。 层叠&#xff1a;多个样式可以作用在同一个html的元素上&#xff0c;同时生效。 2.好处&#xff1a; (1).功能强大 (2).将内容展示和样式控制分离 * 降低耦合度&#xf…...

编程日记 2023/11/10 13:57:28

万字详解Java的三大特性：封装 | 继承 | 多态

前言&#xff1a;面向对象程序设计的三大特征就是&#xff1a;封装&#xff0c;继承&#xff0c;多态。在前文介绍了类和对象后&#xff0c;我们就可以继而学习什么是封装&#xff0c;怎么用类的子类来实现继承和多态 目录 一.面向对象的特性 1.封装性 2.继承性 3.多态性…...

编程日记 2023/11/10 13:56:27

TensorFlow学习笔记--（1）张量的随机生成

张量的生成 如何判断一个张量的维数&#xff1a;看张量的中括号有几层 0 1 2 &#xff1a;零维数列 [2 4 6] : 一维向量 [ [1 2 3] [4 5 6] ] : 二维数组 两行三列 第一行数据为 1 2 3 第二行数据为 4 5 6 以此类推 n维张量有n层中括号 tf.zeros(%指定一个张量的维数%) 生成一…...

编程日记 2023/11/10 13:55:26

如何防止IP和账户关联？

在当今信息时代&#xff0c;个人隐私安全变得尤为重要。保护个人IP地址和账户的隐私是防止隐私泄露、信息泄漏以及支付安全等问题的关键。VMLogin虚拟浏览器作为一种隐私工具&#xff0c;可以帮助您解决问题。本文将为您介绍如何使用它来保护隐私安全和防止IP和账户关联。 一、…...

编程日记 2023/11/10 13:54:25

进入网络安全行业有哪些大公司推荐

随着互联网的普及和数字化进程的加速&#xff0c;网络安全问题日益凸显。从个人信息的泄露到国家基础设施的被攻击&#xff0c;网络安全已经不再只是一个技术问题&#xff0c;而是关乎到每个人、每个企业和国家的核心利益。在这场没有硝烟的战争中&#xff0c;一些大公司凭借其…...

编程日记 2023/11/10 13:53:25

OpenHarmony 社区运营报告（2023 年 10 月）

● 截至 2023 年 10 月&#xff0c;OpenHarmony 社区共有 51 家共建单位&#xff0c;累计超过 6200 名贡献者产生 24.2 万多个 PR&#xff0c;2.3 万多个 Star&#xff0c;6.1 万多个 Fork&#xff0c;59 个 SIG。 ● OpenHarmony 4.0 版本如期而至&#xff0c;开发套件同步升级…...

编程日记 2023/11/10 13:52:23

Mybatis二级缓存源码整理

添加配置mybatis-plus.configuration.cache-enabledtrue在mapper.xml文件中添加cache标签<cache size"10240" eviction"LRU"/>同一个事务中二级缓存不生效&#xff0c;会使用一级缓存&#xff0c;因为事务未提交。 执行流程部分 Configuration创建…...

编程日记 2023/11/10 13:49:20

如何在 HarmonyOS 对数据库进行备份，恢复与加密

数据库备份与恢复 场景介绍 当应用在处理一项重要的操作&#xff0c;显然是不能被打断的。例如&#xff1a;写入多个表关联的事务。此时&#xff0c;每个表的写入都是单独的&#xff0c;但是表与表之间的事务关联性不能被分割。 如果操作的过程中出现问题&#xff0c;开发者可…...

编程日记 2023/11/10 13:48:19

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…...

编程日记 2023/11/10 13:47:17

6 Hive引擎集成Apache Paimon

更多Paimon数据湖内容请关注&#xff1a;https://edu.51cto.com/course/35051.html 在实际工作中&#xff0c;我们通查会使用Flink计算引擎去读写Paimon&#xff0c;但是在批处理场景中&#xff0c;更多的是使用Hive去读写Paimon&#xff0c;这样操作起来更加方便。 前面我们…...

编程日记 2023/11/10 13:46:14

发布版本自动化记录版本功能方法

# 安装commitizennpm install --save-dev commitizen# 初始化Conventional Commits规范适配器npx commitizen init cz-conventional-changelog --save-dev --save-exact最后一步&#xff0c;需要在package.json中添加一个script"scripts": {..., // 此处省略其它配置…...

编程日记 2023/11/10 13:45:13

Elastic Stack 8.11：引入一种新的强大查询语言 ES|QL

作者&#xff1a;Tyler Perkins, Ninoslav Miskovic, Gilad Gal, Teresa Soler, Shani Sagiv, Jason Burns Elastic Stack 8.11 引入了数据流生命周期、一种配置数据流保留和降采样&#xff08;downsampling&#xff09; 的简单方法&#xff08;技术预览版&#xff09;&#xf…...

编程日记 2023/11/10 13:44:12

wx:for-item wx:for-index wx:for-key

wx:for-item wx:for-item , 数组当前项的变量名,默认为 item 作用&#xff1a;使用 &#xff08;当前项变量名.属性名&#xff09; 取得属性值每一项 <view wx:for"{{array}}"><view>{{item.name item.age }}</view> </view>等同于 &…...

编程日记 2023/11/10 13:42:11

老师还不会评课？这里有你需要的解决方案

优点&#xff1a; 1.课件制作: 老师的PPT设计得很新颖&#xff0c;插入的音乐视频都非常贴合课堂内容&#xff0c;看得出老师非常用心地进行了设计。 2.教师素养&#xff1a;老师的语言丰富、朗读能力很出色、板书设计很工整。 3.教师风格: xx老师上课激情澎湃/非常有亲和力…...

编程日记 2023/11/10 13:41:10

Talk | 马里兰大学博士生吴曦旸：分布式多智能体强化学习在复杂交通轨迹规划中的应用

本期为TechBeat人工智能社区第545期线上Talk&#xff01; 北京时间11月09日(周四)20:00&#xff0c;马里兰大学博士生—吴曦旸的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “分布式多智能体强化学习在复杂交通轨迹规划中的应用”&#xff0c;介…...

编程日记 2023/11/10 13:40:09

2023年下半年架构案例真题及答案

案例的考点&#xff1a; 大数据架构 Lambda架构和Kappa架构 jwt特点 数据持久层&#xff0c;Redis数据丢失&#xff0c;数据库读写分离方案 Hibernat架构 SysML七个关系&#xff0c;填需求图 大数据的必选题&#xff1a; 某网作为某电视台在互联网上的大型门户入口&#…...

编程日记 2023/11/10 13:39:08

Java必考面试题，谈谈你对 Spring AOP 的理解

大家好&#xff0c;我是伍六七。 今天我们来学习 Spring 框架中最重要的概念之一&#xff1a;AOP。 这是一个 Java 程序员必考的面试题&#xff0c;大家好好理解。我们开始正文。 AOP 的概念 Spring AOP 是 Java 程序员们面试经常被问到的一个问题&#xff0c;但 AOP&#…...

编程日记 2023/11/10 13:38:06

BERT和ChatGPT简单对比

OpenAI发布了第一个版本的GPT&#xff08;Generative Pretrained Transformer&#xff09;模型在2018年6月。 谷歌的BERT模型&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是在2018年10月发布的。 BERT和ChatGPT都是由人工智能研究实验室…...

编程日记 2023/11/10 13:37:04

又一重要合作，创邻科技华为云联营产品正式发布

近日&#xff0c;创邻科技旗下的“Galaxybase高性能图平台”正式入驻华为云云商店联营商品&#xff0c;创邻科技成为华为云在数据库与缓存领域的联营联运合作伙伴。通过联营联运模式&#xff0c;双方合作能够深入产品、生态、解决方案等多个领域&#xff0c;助力各行业用户数字…...

编程日记 2023/11/10 13:36:03

PHP+Swoole应用示例

**Swoole是一个C编写的基于异步事件驱动和协程的并行网络通信引擎&#xff0c;为PHP提供高性能网络编程支持** ## ⚙️ 快速启动 可以直接使用 [Docker](https://github.com/swoole/docker-swoole) 来执行Swoole的代码&#xff0c;例如&#xff1a; bash docker run --rm php…...

编程日记 2023/11/10 13:35:03

RISC-V IDE混战，我为什么最终选择了Segger Embedded Studio？

RISC-V IDE选型实战&#xff1a;为何Segger Embedded Studio成为我的最终选择&#xff1f; 当兆易创新GD32V103开发板静静躺在桌面上时&#xff0c;我意识到这个预算有限的物联网网关项目正面临关键抉择——在碎片化的RISC-V生态中&#xff0c;如何选择一款既符合团队技术栈又能…...

编程新知 2026/4/24 2:34:54

【2026内存安全编码白皮书】：C语言开发者必须立即落地的7项零成本接入策略

第一章&#xff1a;现代 C 语言内存安全编码规范 2026 如何实现快速接入现代 C 语言内存安全编码规范 2026&#xff08;简称 MSC-2026&#xff09;是一套面向工业级嵌入式与系统软件的轻量级、可增量集成的内存安全实践集合&#xff0c;聚焦于编译时约束、运行时防护与静态分析…...

编程新知 2026/4/24 2:24:24

从Cmd到PowerShell：一个Windows老鸟的十年命令行工具演进史与效率翻倍心得

从Cmd到PowerShell&#xff1a;一个Windows老鸟的十年命令行工具演进史与效率翻倍心得 第一次在Windows XP上敲下dir /s命令时的兴奋感至今难忘——那是我与Cmd结缘的开始。作为从DOS时代走过来的老用户&#xff0c;我们这代人总带着对黑色命令窗口的特殊情感&#xff0c;就像程…...

编程新知 2026/4/24 2:15:51

终极DeepL Chrome翻译插件完整指南：如何实现高效跨语言浏览

终极DeepL Chrome翻译插件完整指南&#xff1a;如何实现高效跨语言浏览 【免费下载链接】deepl-chrome-extension A DeepL Translator Chrome extension 项目地址: https://gitcode.com/gh_mirrors/de/deepl-chrome-extension 在当今全球化的数字时代&#xff0c;浏览外…...

编程新知 2026/4/24 0:48:03

基于反步法的AUV水下机器人轨迹跟踪控制(圆形+直线)[仿真+说明文档]

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/4/24 0:48:02

避开蓝桥杯DS1302时钟的坑：按键调整时间时的数据转换与防错处理

避开蓝桥杯DS1302时钟的坑&#xff1a;按键调整时间时的数据转换与防错处理 在蓝桥杯单片机竞赛中&#xff0c;DS1302实时时钟模块的应用几乎是必考项目。许多参赛选手能够轻松完成基础的时钟读写功能&#xff0c;却在实现按键调整时间时频频踩坑——明明代码逻辑看似正确&…...

编程新知 2026/4/24 0:39:47

从B站视频保存难题到Java下载神器：BiliDownload的完整解决方案

从B站视频保存难题到Java下载神器&#xff1a;BiliDownload的完整解决方案 【免费下载链接】BiliDownload B站视频下载工具 项目地址: https://gitcode.com/gh_mirrors/bil/BiliDownload 作为一名B站内容创作者&#xff0c;你是否曾遇到过这样的困境&#xff1a;精心收藏…...

编程新知 2026/4/24 0:20:46

从E·M·福斯特的《英国人性格的笔记》看技术文档写作：如何写出像英国人一样“冷静”又“高效”的代码注释？

技术文档的英伦美学&#xff1a;如何用克制与精准提升代码注释的沟通效率 在开源协作的世界里&#xff0c;代码注释常常成为开发者之间无声的对话。当我们在GitHub上阅读一个陌生项目的源码时&#xff0c;那些穿插在函数与逻辑之间的文字段落&#xff0c;往往比代码本身更能揭示…...

编程新知 2026/4/23 21:29:27

华为防火墙实战：用IP-Link和HealthCheck给你的企业多线外网做个“体检”

华为防火墙双链路健康监测实战&#xff1a;IP-Link与HealthCheck的高效联动方案 1. 企业多线外网面临的运维挑战 现代企业网络架构中&#xff0c;多ISP线路接入已成为保障业务连续性的标配方案。某中型电商企业运维负责人曾分享过这样的经历&#xff1a;在一次大促活动中&#…...

编程新知 2026/4/23 20:09:26

揭秘AI教材生成秘诀！掌握低查重技巧，用AI高效完成教材写作！

在编写教材之前&#xff0c;选择合适的工具简直就像是一场“纠结的盛宴”&#xff01;如果使用常见的办公软件&#xff0c;其实功能非常有限&#xff0c;框架搭建和格式设置都需要我们自己手动去弄。而如果选择那些专业的AI写教材工具&#xff0c;操作又会显得复杂&#xff0c;…...

编程新知 2026/4/23 19:49:10