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

CSS（快速入门）

news 2025/7/8 15:51:31

                                         欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

一、什么是CSS?
二、基本语法规范
三、CSS选择器
- 3.1 标签选择器
- 3.2 id选择器
- 3.3 class选择器
- 3.4 通配符选择器
- 3.5 复合选择器
四、常用CSS样式
- 4.1 color
- 4.2 font-size
- 4.3 border
- 4.4 background-color
- 4.5 改变显示模式
- 4.6 padding
- 4.7 margin

一、什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式。

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

CSS 可以理解为"东方四大邪术" 之化妆术.
即对页面的展示进行"化妆“。

CSS前 VS CSS修饰后的效果展示：
在这里插入图片描述

二、基本语法规范

选择器 + {⼀条/N条声明}
• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥. (干啥)
• 声明的属性是键值对. 使用; 区分键值对, 使用: 区分键和值。

CSS 要写到 style 标签中

CSS有3种引入方式：
行内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.

<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>

在这里插入图片描述

内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用。

定义

    <style>div{color:red;</style>

3.外部样式，html和css实现了完全分离

    <link rel="stylesheet" href="style.css">

然后再创建一个CSS文件，然后在这个style.css文件里面写,代码如下：

 div{color:blue;}

上面三个的整体代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;</style><link rel="stylesheet" href="style.css">
</head>
<body>
<div style="color:green";>我是一个行内样式的div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
</body>
</html>

效果：
在这里插入图片描述

注意;这个里面的行内样式优先，相当于局部变量，所以显示的是绿色，其他的全局被设置变成了蓝色。

三、CSS选择器

CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性.。

3.1 标签选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title>
<!--    标签选择器--><style>div{color:red;}p{color:brown;}span{color:blue;}</style>
</head>
<body>
<div>我是一个div</div>
<p>我是一个段落</p>
<span>我是一个span</span>
</body>
</html>

这里的这些div,span,p等等标签，可以通过style然后定义选择他的颜色。

效果如下：

在这里插入图片描述

3.2 id选择器

在上面的标签选择器的基础上面，然后通过对标签再增加一个属性id（唯一）然后就可以根据id去选择,这个样子就叫做id选择器。

举个例子：我们先看一段代码和效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Document</title><style>div{color:red;}</style></head>
<body>
<div>我是一个div1</div>
<div>我是一个div2</div>
<div>我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
上面一段代码的效果如上图，我们如果想要第二个红色的字体变成蓝色字体这个要怎么办呢？那么就要用到id选择器。

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}</style></head>
<body>
<div id="div1">我是一个div1</div>
<div id="div2">我是一个div2</div>
<div id="div3">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述
可以看到现在已经变成蓝色了。

注意： 这个id要有独特性不能有相同的id,然后这个id选择器使用时候要在前面加# 。

3.3 class选择器

作用:可以把一些有关联起来的东西用同一个class名字,然后他们就会变成一组然后class选择器对一个整大组进行渲染。

举个例子，我们把第一个和第三个用class选择器进行渲染：

<html>
<head><title>Document</title><style>div{color:red;}#div2{color:blue;}.fun1{font-size:40px;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

注意：使用class渲染时候,语法格式如下：

.class的赋值 {
}

3.4 通配符选择器

对全部class进行渲染

语法：

*{}

效果同上。

3.5 复合选择器

可以多个选择器一起

举一个例子：把两个id选择器放在一起

<html>
<head><title>Document</title><style>div{color:red;}#div1,#div2{color:blue;}</style></head>
<body>
<div id="div1"class="fun1">我是一个div1</div>
<div id="div2"class="fun">我是一个div2</div>
<div id="div3"class="fun1">我是一个div3</div>
</body>
</html>

效果：
在这里插入图片描述

再举一个例子：想要上面的字体变成红色。

<html>
<head><title>复合选择器</title><style>ul li{color:red;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
<ol><li>有序 1</li><li>有序 2</li><li>有序 3</li><li>有序 4</li>
</ol>
</body>
</html>

效果：
在这里插入图片描述

复合选择器是由多个单选择器组合（id选择器、class选择器），多个选择器之间用空格隔开。

四、常用CSS样式

4.1 color

color设置颜色

• 英文单词,如red,blue

  div{color:red;}

• rgb代码的颜色如rgb(255,0,0)

  div{color:rgb(24,46,37);}

• 十六进制的颜色如#ff00ff

  div{color:#ff00ff;}

4.2 font-size

设置字体大小

     ul li{color:red;font-size:60px;}

效果：
在这里插入图片描述

4.3 border

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body><h1>border-style 属性</h1><p>此属性规定要显示的边框类型：</p><p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p></body>
</html>

效果：
在这里插入图片描述

border的复合属性：

     ul li{border:red 1px solid;}

在这里插入图片描述

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）/

<html>
<head>
<style>
p {border-top-style: dotted;border-right-style: solid;border-bottom-style: dotted;border-left-style: solid;
}
</style>
</head>
<body><h1>单独的边框</h1><p>两种不同的边框样式。</p></body>
</html>

在这里插入图片描述

border-color属性

<html>
<head>
<style>
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body><h1>border-color 属性</h1><p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p><p class="one">多色的实线边框</p></body>
</html>

效果：
在这里插入图片描述

4.4 background-color

设置背景颜色。

<html>
<head><title>边框</title><style>ul li{border:red 1px solid;background-color:blue;}</style>
</head>
<body><ul><li>无序1</li><li>无序2</li><li>无序3</li><li>无序4</li></ul>
</body>
</html>

在这里插入图片描述

4.5 改变显示模式

使用display 属性可以修改元素的显示模式。
• display: block 改成块级元素 [常用]
• display: inline 改成行内元素 [很少用]

行内元素不能使用width和height,比如pan标签：

<html>
<head><title>边框</title><style>#fun1{width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：

在这里插入图片描述

如果想要用width/height的话就要用到display。

<html>
<head><title>边框</title><style>#fun1{display:block;width:50px;height:100px;border:1px red solid;}</style>
</head>
<body><span id="fun1">我是一个span</span>
</body>
</html>

效果：
在这里插入图片描述

4.6 padding

padding 属性用于在任何定义的边界内的元素内容周围生成空间。
Padding - 单独的边
CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-botton
padding-left

所有内边距属性都可以设置以下值：
length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距
提示：不允许负值。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
</style>
</head>
<body><h1>使用单独的内边距属性</h1><div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div></body>
</html>

效果：
在这里插入图片描述

4.7 margin

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;
}
</style>
</head>
<body><h1>使用单独的外边距属性</h1><div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div></body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

欧耶！！！我学会啦！！

CSS（快速入门）

欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦~点击这里了解更多内容目录一、什么是CSS?二、基本语法规范三、CSS选择器3.1 标签选择器3.2 id选择器3.3 class选择器3.4 通配符选择器3.5 复合选择器四、常用CSS样式4.1 color4.2 font…...

编程日记 2025/1/30 18:14:08

使用 concurrently 实现前后端一键启动

使用 concurrently 实现前后端一键启动本文适合： 前后端分离项目（如 React Node.js），希望通过一条命令同时启动前端和后端服务。工具链： Node.js、npm、concurrently。耗时： 3 分钟。文章目录使用 c…...

编程日记 2025/1/30 18:00:38

常见端口的攻击思路

端口号端口说明攻击方向21/22/69FTP/TFTP文件传输协议匿名上传/下载、嗅探、爆破2049NFS服务配置不当139Sanba服务爆破、远程代码执行389Ldap目录访问协议注入、匿名访问、弱口令22SSH远程连接爆破、SSH映射隧道搭建、文件传输23Telnet远程连接爆破、嗅探、弱口令3389RDP远程桌…...

编程日记 2025/1/30 17:55:25

大数据治理实战：架构、方法与最佳实践

📝个人主页🌹：一ge科研小菜鸡-CSDN博客 🌹🌹期待您的关注 🌹🌹 1. 引言大数据治理是确保数据质量、合规性和安全性的重要手段，尤其在数据驱动决策和人工智能应用日益普及的背景下&…...

编程日记 2025/1/30 17:49:12

忘记宝塔的访问地址怎么找

在linux中安装宝塔面板后会生成网址、账号和密码如果网址忘记了那将进不去宝塔面板该怎么办呢？ bt命令我们输入 bt 命令的时候，是在根目录里面进行操作的。 / bt 我们根据自己的需要，选择对应的数字就可以了。 bt 14 输入 14 查看面板默…...

编程日记 2025/1/30 17:47:05

INSERT INTO 新增数据 INSERT INTO 数据表名 VALUES (值1,值2,值3,...) DELETE 删除数据 DELETE FROM 数据表名 WHERE 查询条件 UPDATE 修改数据 UPDATE 数据表名 SET 字段1 值1, 字段2值2, ... WHERE 查询条件 SELECT 查询数据 #查询数据 SELECT 字段1, 字段2, ... FROM 数…...

编程日记 2025/1/30 17:46:01

shell脚本批量修改文件名之方法（The Method of Batch Modifying File Names in Shell Scripts）

shell脚本批量修改文件名方法我们可以使用Shell脚本来实现这个功能。Shell脚本是一种用于自动化任务的编程语言，它可以在Unix/Linux操作系统上运行。在这个脚本中，我们将使用一个for循环来遍历目标目录下的所有文件，并使用mv命令将每个文件…...

编程日记 2025/1/30 17:44:58

组合模式 - 组合模式的实现

引言组合模式（Composite Pattern）是一种结构型设计模式，它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端可以统一地处理单个对象和组合对象，从而简化了代码的复杂性。本文将详细介绍如何在C中实…...

编程日记 2025/1/30 17:43:50

视频外绘技术总结：Be-Your-Outpainter、Follow-Your-Canvas、M3DDM

Diffusion Models专栏文章汇总：入门与实战前言：视频Inpaint的技术很火，但是OutPaint却热度不高，这篇博客总结比较经典的几篇视频Outpaint技术。其实Outpaint在runway等工具上很火，可是学术界对此关注比较少，博主从这三年的顶会中找到了最具代表性的三篇论文解读。目录 …...

编程日记 2025/1/30 17:42:48

【硬件测试】基于FPGA的QPSK+帧同步系统开发与硬件片内测试,包含高斯信道,误码统计,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 2.1QPSK 2.2 帧同步 3.Verilog核心程序 4.开发板使用说明和如何移植不同的开发板 5.完整算法代码文件获得 1.算法仿真效果本文是之前写的文章《基于FPGA的QPSK帧同步系统verilog开发,包含testbench,高斯信道,误码统计,可…...

编程日记 2025/1/30 17:41:46

c++面试：类定义为什么可以放到头文件中

这个问题是刚了解预编译的时候产生的疑惑。声明是指向编译器告知某个变量、函数或类的存在及其类型，但并不分配实际的存储空间。声明的主要目的是让编译器知道如何解析程序中的符号引用。定义不仅告诉编译器实体的存在，还会为该实体分配存储空间&#…...

编程日记 2025/1/30 17:40:43

PythonFlask框架

文章目录处理 Get 请求处理 POST 请求应用 app.route(/tpost, methods[POST]) def testp():json_data request.get_json()if json_data:username json_data.get(username)age json_data.get(age)return jsonify({username: username测试,age: age})从 flask 中导入了 Flask…...

编程日记 2025/1/30 17:30:26

Kotlin开发（六）：Kotlin 数据类，密封类与枚举类

引言想象一下，你是个 Kotlin 开发者，敲着代码忽然发现业务代码中需要一堆冗长的 POJO 类来传递数据。烦得很？别急，Kotlin 贴心的数据类能帮你自动生成 equals、hashCode，直接省时省力！再想想需要多种状…...

编程日记 2025/1/30 17:29:21

冬天适合养什么鱼？

各位鱼友们，冬天来了，是不是还在为养什么鱼而烦恼？别担心，今天就来给大家好好推荐一些适合冬天养的鱼，让你的水族箱在寒冷的冬天也能生机勃勃！ 一、金鱼：冬日里的“小暖男” 金鱼绝对是冬季养鱼…...

编程日记 2025/1/30 17:28:18

【C++动态规划状态压缩】2597. 美丽子集的数目|2033

本文涉及知识点 C动态规划 LeetCode2597. 美丽子集的数目给你一个由正整数组成的数组 nums 和一个正整数 k 。如果 nums 的子集中，任意两个整数的绝对差均不等于 k ，则认为该子数组是一个美丽子集。返回数组 nums 中非空且美丽的子集数目。…...

编程日记 2025/1/30 17:24:12

前端-Rollup

Rollup 是一个用于 JavaScript 的模块打包工具，它将小的代码片段编译成更大、更复杂的代码，例如库或应用程序。它使用 JavaScript 的 ES6 版本中包含的新标准化代码模块格式，而不是以前的 CommonJS 和 AMD 等特殊解决方案。ES 模块允许你自由…...

编程日记 2025/1/30 17:23:08

20【变量的深度理解】

一说起变量，懂点编程的都知道，但是在理解上可能还不够深变量就是存储空间，电脑上的存储空间有永久（硬盘）和临时（内存条）两种，永久数据重启电脑后依旧存在，临时数据只…...

编程日记 2025/1/30 17:20:54

大数据学习之Kafka消息队列、Spark分布式计算框架一

Kafka消息队列章节一.kafka入门 4.kafka入门_消息队列两种模式 5.kafka入门_架构相关名词 Kafka 入门 _ 架构相关名词事件记录了世界或您的业务中 “ 发生了某事 ” 的事实。在文档中也称为记录或消息。当您向 Kafka 读取或写入数据时，您以事件的形式执行…...

编程日记 2025/1/30 17:16:44

基于Flask的旅游系统的设计与实现

【Flask】基于Flask的旅游系统的设计与实现（完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统采用Python作为后端开发语言，结合前端Bootstrap框架，为用户提供了丰富…...

编程日记 2025/1/30 17:15:41

“AI视频智能分析系统：让每一帧视频都充满智慧

嘿，大家好！今天咱们来聊聊一个特别厉害的东西——AI视频智能分析系统。想象一下，如果你有一个超级聪明的“视频助手”，它不仅能自动识别视频中的各种元素，还能根据内容生成详细的分析报告，是不是感觉特别酷…...

编程日记 2025/1/30 17:14:39

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/7/8 11:06:54

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2025/6/17 2:24:14

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/6/21 0:42:19

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...

编程新知 2025/7/7 16:20:25

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/6/15 5:19:16

自然语言处理——循环神经网络

自然语言处理——循环神经网络循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM&#xff09…...

编程新知 2025/7/7 14:32:19

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...

编程新知 2025/6/19 6:02:19

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/7/6 20:15:08

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...

编程新知 2025/7/7 14:27:05

目录

一、什么是CSS?

二、基本语法规范

三、CSS选择器

3.1 标签选择器

3.2 id选择器

3.3 class选择器

3.4 通配符选择器

3.5 复合选择器

四、常用CSS样式

4.1 color

4.2 font-size

4.3 border

4.4 background-color

4.5 改变显示模式

4.6 padding

4.7 margin

相关文章：