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

css书写方式

news 2026/3/26 5:25:39

目录标题

    • 一、css是什么？
    • 二、css的书写方式
      • 1、行内样式【不推荐使用，太固定】
      • 2、页面样式（又叫内联样式）
      • 3、外联样式【店家推荐】
      • 4、import与link标签的区别

一、css是什么？

css(cascade style sheet)是用来装饰和装扮页面的。

二、css的书写方式

1、行内样式【不推荐使用，太固定】

它写在html代码里面的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css书写方式</title>
</head>
<body><div style="color:red;font-size: 30px;">这里是</div><!--样式颜色为红色，字体大小为30像素  -->
</body>
</html>

在这里插入图片描述

2、页面样式（又叫内联样式）

【可以共用样式，但是多个页面就比较麻烦】
它是单独写在style标签里面的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css书写方式</title><style>div {color: darkred;}</style>
</head>
<body><div style="color:red;font-size: 30px;">这里是</div><!--样式颜色为红色，字体大小为30像素  --><div>这些都是</div><div>这些都是</div>
</body>
</html>

在这里插入图片描述

3、外联样式【店家推荐】

这个就是有单独的css文件，在css文件中把样式写好，在导进html页面中

div {color: darkred;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css书写方式</title><link rel="stylesheet" href="css文件/index.css"><!-- 使用link标签，引入需要的css文件 -->
</head>
<body><div>这些都是</div><div>这些都是</div>
</body>
</html>

在这里插入图片描述

4、import与link标签的区别

@import url(xxx.css)
<link rel="stylesheet" href="css文件/xxx.css">

前者是css指令，后者是html标签。前者实现css资源共享，就是css里面导入css；后者是将css导入页面。

相关文章：

css书写方式

目录标题一、css是什么&#xff1f;二、css的书写方式1、行内样式【不推荐使用&#xff0c;太固定】2、页面样式&#xff08;又叫内联样式&#xff09;3、外联样式【店家推荐】4、import与link标签的区别一、css是什么&#xff1f; css(cascade style sheet)是用来装饰和装扮页…...

编程日记 2023/2/15 7:03:00

Python网络爬虫 学习笔记（2）BeaufitulSoup库

文章目录BeautifulSoup库的基本介绍HTML标签的获取和相关属性HTML文档的遍历prettify()方法使用BeautifulSoup库对HTML文件进行内容查找信息的标记的相关概念&#xff08;非重点&#xff09;find_all()方法&#xff08;重点&#xff09;综合实例&#xff1a;爬取软科2022中国大…...

编程日记 2023/2/15 7:01:50

JavaScript------内建对象

一、解构赋值 1、数组的解构 1.1、解构赋值 const arr ["孙悟空", "猪八戒", "沙和尚"];let a, b, c;[a, b, c] arr; // 等同于 [a, b, c] ["孙悟空", "猪八戒", "沙和尚"] 1.2、声明同时解构 let [d, e…...

编程日记 2023/2/15 7:00:43

React + Redux 处理异步请求

redux 处理异步请求 方式一：在 componentDidmount 中直接进⾏请求，在将数据同步到 redux 创建 Store 仓库 import {createStore } from redux;const defaultState = {banners: [] }const reducer =...

编程日记 2023/2/15 6:59:37

揭秘涨薪50%经验：从功能测试到自动化测试，我是如何蜕变的？

本人在今年互联网大环境如此严峻的情况下&#xff0c;作为一个刚毕业不到一年的初级测试&#xff0c;赶在“金三银四”依然拿到了一些面试机会&#xff0c;并且成功拿下4家公司的offer&#xff0c;其中不乏互联网大厂&#xff0c;而且最高总包给到了接近double&#xff08;无炫…...

编程日记 2023/2/15 6:58:30

【论文速递】MMM2020 - 电子科技大学提出一种新颖的局部变换模块提升小样本分割泛化性能

【论文速递】MMM2020 - 电子科技大学提出一种新颖的局部变换模块提升小样本分割泛化性能 【论文原文】&#xff1a;A New Local Transformation Module for Few-shot Segmentation 【作者信息】&#xff1a;Yuwei Yang, Fanman Meng, Hongliang Li, Qingbo Wu,Xiaolong Xu an…...

编程日记 2023/2/15 6:57:20

补充前端面试题（二）

#$set数据变化视图不更新问题, 当在项目中直接设置数组的某一项的值&#xff0c;或者直接设置对象的某个属性值&#xff0c;这个时候&#xff0c;你会发现页面并没有更新。这是因为 Object.defineProperty()限制&#xff0c;监听不到变化。解决方式&#xff1a;this.$set(你要改…...

编程日记 2023/2/15 6:56:16

JavaScript原型、原型链、原型方法

文章目录原型和原型链prototype、 __ proto __ 、constructor原型链原型方法instanceOfhasOwnPropertyObject.create()、new Object()总结原型和原型链 prototype、 __ proto __ 、constructor 首先我们看下面一段代码 // 构造函数Personfunction Person(name, age) {this.na…...

编程日记 2023/2/15 6:55:12

linux篇【14】：网络https协议

目录 一.HTTPS介绍 1.HTTPS 定义 2.HTTP与HTTPS &#xff08;1&#xff09;端口不同&#xff0c;是两套服务 &#xff08;2&#xff09;HTTP效率更高&#xff0c;HTTPS更安全 3.加密&#xff0c;解密&#xff0c;密钥 概念 4.为什么要加密&#xff1f; 5.常见的加密方式…...

编程日记 2023/2/15 6:54:05

1.9实验9：配置虚链路

1.4.4实验9：配置虚链路 实验目的(1） 实现OSPF 虚链路的配置 (2） 描述虚链路的作用 实验拓扑配置虚链路实验拓扑如图1-19所示。[1] 图1-19 配置虚链路 实验步骤...

编程日记 2023/2/15 6:53:00

三次握手-升级详解-注意问题

TCP建立连接的过程就是三次握手&#xff08;Three-way Handshake&#xff09;&#xff0c;在建立连接的过程实际上就是客户端和服务端之间总共发送三个数据包。进行三次握手主要是就是为了确认双方都能接收到数据包和发送数据包&#xff0c;而客户端和服务端都会指定自己的初始…...

编程日记 2023/2/15 6:51:55

软件架构知识3-系统复杂度-高可用性、可扩展性、低成本、安全、规模

高可用性 系统无中断地执行其功能的能力&#xff0c;代表系统的可用性程度&#xff0c;是进行系统设计时的准则之一。 高可用的“冗余”解决方案&#xff0c;单纯从形式上来看&#xff0c;和之前讲的高性能是一样的&#xff0c;都是通过增加更多机 器来达到目的&#xff0c;但…...

编程日记 2023/2/15 6:50:45

SpringCloud学习笔记 - 自定义及解耦降级处理方法 - Sentinel

1. SentinelRecourse配置回顾 通过之前的学习&#xff0c;我们知道SentinelRecourse配置的资源定位可以通过两种方式实现&#xff1a;一种是URL&#xff0c;另一种是资源名称。这两种限流方式都要求资源ID唯一 RestController public class RateLimitController {GetMapping(…...

编程日记 2023/2/15 6:49:40

Redis之搭建一主多从

搭建redis一主多从的过程 1.在相应位置创建一个文件夹存放redis配置文件 mkdir myredis2.复制redis配置文件到此文件夹中 cp /opt/redis/redis/bin/redis.conf /opt/myredis/redis.conf3.新建三个配置文件 touch redis6379.conf touch redis6380.conf touch redis6381.conf4…...

编程日记 2023/2/15 6:48:34

Transformer机制学习笔记

学习自https://www.bilibili.com/video/BV1J441137V6 RNN&#xff0c;CNN网络的缺点 难以平行化处理&#xff0c;比如我们要算b4b^4b4&#xff0c;我们需要一次将a1a^1a1~a4a^4a4依次进行放入网络中进行计算。 于是有人提出用CNN代替RNN 三角形表示输入&#xff0c;b1b^1b1的…...

编程日记 2023/2/15 6:47:22

1、第一个CUDA代码：hello gpu

目录第一个CUDA代码&#xff1a;hello gpu一、__global__ void GPUFunction()二、gpu<<<1,1>>>();三、线程块、线程、网格知识四、核函数中的printf();五、cudaDeviceSynchronize();第一个CUDA代码&#xff1a;hello gpu #include <stdio.h>void cpu(…...

编程日记 2023/2/15 6:46:17

UG二次开发装配篇 添加/拖动/删除组件方法的实现

我们在UG装配的过程中&#xff0c;经常会遇到需要调整组件目录位置&#xff0c;在软件设计过程中可以通过在目录树里面拖动组件来完成。 那么&#xff0c;如果要用程序实现组件的移动/拖动&#xff0c;我们要怎么做呢&#xff1f; 本节就完成了添加/拖动/删除组件方法的实现&…...

编程日记 2023/2/15 6:45:09

【ros bag 包的设计原理、制作、用法汇总】

ros bag 包的设计原理 序列化和反序列化 首先知道Bag包就是为了录制消息，而消息的保存和读取就涉及到一个广义上的问题序列化和反序列化，它基本上无处不在，只是大部分人没有注意到，举个简单的例子，程序运行的时候，是直接操作的内存，也就是一个结构体或者一个对象，但内…...

编程日记 2023/2/15 6:44:01

Linux网络：聚合链路技术

目录 一、聚合链路技术 1、bonding作用 2、Bonding聚合链路工作模式 3、Bonding实现 一、聚合链路技术 1、bonding作用 将多块网卡绑定同一IP地址对外提供服务&#xff0c;可以实现高可用或者负载均衡。直接给两块网卡设置同一IP地址是不可以的。通过 bonding&#xff0c…...

编程日记 2023/2/15 6:42:53

2023年数据安全的下一步是什么？

IT 预算和收入增长领域是每个年度开始时的首要考虑因素&#xff0c;在当前的世界经济状况下更是如此。 IT 部门和数据团队正在寻找确定优先级、维护和构建安全措施的最佳方法&#xff0c;同时又具有成本效益。 这是一个棘手的平衡点&#xff0c;但却是一个重要的平衡点&#…...

编程日记 2023/2/15 6:41:48

ClearerVoice-Studio语音处理效率实测：1分钟音频平均处理耗时18秒

ClearerVoice-Studio语音处理效率实测&#xff1a;1分钟音频平均处理耗时18秒 1. 测试背景与工具介绍 ClearerVoice-Studio是一个开箱即用的语音处理工具包&#xff0c;集成了多种先进的AI语音处理功能。这个工具最大的特点就是简单易用&#xff0c;不需要用户具备深度学习背…...

编程新知 2026/3/26 5:15:51

BEV感知算法实战：从Mono3D到PointPillars的自动驾驶3D目标检测全解析

BEV感知算法实战&#xff1a;从Mono3D到PointPillars的自动驾驶3D目标检测全解析 自动驾驶技术的核心挑战之一是如何让车辆准确理解周围环境。在众多感知方案中&#xff0c;鸟瞰图&#xff08;BEV&#xff09;感知因其独特的空间表示优势&#xff0c;正在成为行业主流技术路线。…...

编程新知 2026/3/26 4:27:28

Vivado GUI隐藏技巧：如何手动修改OOC模式IP的时钟频率（附200MHz实战案例）

Vivado GUI隐藏技巧&#xff1a;如何手动修改OOC模式IP的时钟频率&#xff08;附200MHz实战案例&#xff09; 在FPGA开发中&#xff0c;Vivado的IP核(IP Catalog)功能极大提升了设计效率&#xff0c;但OOC(Out-of-Context)模式下IP核的时钟频率设置却常常让初学者困惑。当你在G…...

编程新知 2026/3/26 3:33:19

Qwen3-Coder-Next-Base：800亿参数编码AI重磅登场

Qwen3-Coder-Next-Base&#xff1a;800亿参数编码AI重磅登场 【免费下载链接】Qwen3-Coder-Next-Base 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3-Coder-Next-Base 导语&#xff1a;Qwen3-Coder-Next-Base正式发布&#xff0c;这款拥有800亿总参数的开源…...

编程新知 2026/3/26 2:43:07

机场接送机哪个APP便宜？2026年实测告诉你答案

作品声明&#xff1a;个人观点、仅供参考。深夜落地浦东机场&#xff0c;拖着行李箱走向网约车候车区&#xff0c;抬头一看——溢价2.3倍&#xff0c;排队人数67人。这是今年3月初一位旅客的真实经历&#xff0c;在社交媒体上引发了不少共鸣。随着2026年民航出行持续升温&#…...

编程新知 2026/3/26 2:31:03

OpenClaw+Qwen3.5-9B组合创新：AI绘画描述词自动优化与批量生成

OpenClawQwen3.5-9B组合创新&#xff1a;AI绘画描述词自动优化与批量生成 1. 为什么需要AI绘画描述词优化 去年我开始尝试用Stable Diffusion进行艺术创作时&#xff0c;最头疼的就是提示词&#xff08;prompt&#xff09;的编写。每次都要反复调整形容词、风格修饰词、艺术家…...

编程新知 2026/3/26 1:40:55

从物流仓库到游戏背包：三维装箱问题（3D-BPP）如何影响你的日常生活？

从物流仓库到游戏背包&#xff1a;三维装箱问题如何塑造我们的数字生活 清晨打开手机里的策略游戏&#xff0c;你发现背包格子又不够用了——那些珍贵的装备和药水总是无法完美摆放&#xff1b;周末搬家时&#xff0c;面对满屋的家具和纸箱&#xff0c;你突然意识到小货车可能装…...

编程新知 2026/3/26 0:10:19

杰理之内置触摸拓扑结构【篇】

低功耗内置触摸检测模块&#xff0c;简称lp_ctmu模块&#xff0c;是利用检测人体分布电容对触摸按键电容的影响&#xff0c;通过检测该电容变化&#xff0c;达到按键识别的功能...

编程新知 2026/3/25 23:42:08

AWPortrait-Z人像美化效果展示：科哥版WebUI实测，让普通人像变专业级

AWPortrait-Z人像美化效果展示&#xff1a;科哥版WebUI实测&#xff0c;让普通人像变专业级 1. 效果总览&#xff1a;从普通到专业的蜕变 1.1 什么是真正的人像美化&#xff1f; 传统美颜软件往往采用"一刀切"的处理方式&#xff1a;过度磨皮、夸张大眼、强行瘦脸…...

编程新知 2026/3/25 23:15:54

GTE文本向量模型快速上手：无需深度学习基础，一键部署多任务NLP分析工具

GTE文本向量模型快速上手&#xff1a;无需深度学习基础&#xff0c;一键部署多任务NLP分析工具 你是不是觉得自然语言处理&#xff08;NLP&#xff09;听起来很高深&#xff1f;是不是看到“文本向量”、“模型微调”这些词就头疼&#xff1f;别担心&#xff0c;今天我要带你体…...

编程新知 2026/3/25 21:02:01