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

CSS（快速入门）

news 2025/9/16 8:19:23

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

点击这里了解更多内容

一、什么是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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2025/9/16 2:41:39

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/9/15 13:18:18

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...

编程新知 2025/9/2 17:48:08

Python Ovito统计金刚石结构数量

大家好，我是小马老师。本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/9/3 11:46:59

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/9/8 15:21:15

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...

编程新知 2025/9/7 8:49:50

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个新的版本 ，不用和RKNN的python版本保持一致使用 ./xxx.sh进行安装下面配置一下载源 # 清华大学源（最常用） conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2025/9/7 8:46:40

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型，它将权限分配给角色，再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

编程新知 2025/9/9 10:06:55

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ，其中 inorder 是二叉树的中序遍历， postorder 是同一棵树的后序遍历，请你构造并返回这颗二叉树。示例 1: 输入：inorder [9,3,15,20,7…...

编程新知 2025/9/9 10:06:46

目录

一、什么是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

相关文章：