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

前端css介绍

news 2025/10/21 15:01:50

CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;}</style>
</head>

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

元素选择器

p {color: "red";}

ID选择器

#i1 {background-color: red;}

类选择器

.c1 {font-size: 14px;}p.c1 {color: red;
}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

通用选择器

* {color: white;}

组合选择器

后代选择器

/*li内部的a标签设置字体颜色*/li a {color: green;}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/div>p {font-family: "Arial Black", arial-black, cursive;}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/div+p {margin: 5px;}

弟弟选择器

/*i1后面所有的兄弟p标签*/#i1~p {border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/p[title] {color: red;}/*用于选取带有指定属性和值的元素。*/p[title="213"] {color: green;}

不怎么使用的选择器

/*找到所有title属性以hello开头的元素*/[title^="hello"] {color: red;}/*找到所有title属性以hello结尾的元素*/[title$="hello"] {color: yellow;}/*找到所有title属性中包含（字符串包含）hello的元素*/[title*="hello"] {color: red;}/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/[title~="hello"] {color: green;}

分组和嵌套

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

伪类选择器

/* 未访问的链接 */
a:link {color: #FF0000
}/* 鼠标移动到链接上 */
a:hover {color: #FF00FF
} /* 选定的链接 */ 
a:active {color: #0000FF
}/* 已访问的链接 */
a:visited {color: #00FF00
} /*input输入框获取焦点时样式*/
input:focus {outline: none;background-color: #eee;
}

伪元素选择器

before和after多用于清除浮动。它可以解决浮动中得父标签塌陷问题

伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter {font-size: 48px;color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {content:"*";color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {content:"[?]";color:blue;
}

选择器的优先级

比较选择器的优先级高低1. 选择器相同的情况下：  离谁越近，就听谁的，就近原则.2. 选择器不同的情况下： 行内选择器 >>>   id选择器  >>>   类选择器  >>>  标签选择器

CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

p {text-indent: 32px;
}

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*背景重复repeat(默认):背景图片平铺排满整个网页repeat-x：背景图片只在水平方向上平铺repeat-y：背景图片只在垂直方向上平铺no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/

边框

边框属性

border-width
border-style
border-color

#i1 {border-width: 2px;border-style: solid;border-color: red;
}

通常使用简写方式：

#i1 {border: 2px solid red;
}

边框样式

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {border-top-style:dotted;border-top-color: red;border-right-style:solid;border-bottom-style:dotted;border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

display属性
用于控制HTML元素的显示效果。

值	意义
display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS盒子模型

CSS盒子模型是指在网页布局中，每个元素都被看作是一个矩形盒子，包括内容区域、内边距、边框和外边距四个部分。每个盒子有四个边界：上边界、下边界、左边界和右边界。

以快递盒为例
1. 快递盒和快递盒之间的举例称为是外边距，用margin值表示
2. 快递盒和里面物品之间的举例称为是内边距，用padding来表示
3. 盒子的厚度我们称为是边框，用border来表示
4. 物品的实际大小称为是content

盒子模型在CSS中有两种模式：标准模式和怪异模式。标准模式中，元素的宽度和高度包括了内容区域、内边距和边框的宽度，而怪异模式中只包括内容区域的宽度和高度。可以通过设置box-sizing属性改变盒子模型的模式。

●margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
●padding: 用于控制内容与边框之间的距离；
●Border(边框): 围绕在内边距和内容外的边框。
●Content(内容): 盒子的内容，显示文本和图像。

看图吧：

CSS盒子模型

MAGIN(外边距)

BORDER(边框)

PADDING(内填充)

CONTENT(内容)

margin外边距

推荐使用简写：
顺序：上右下左
常见居中：
padding内填充
推荐使用简写：
顺序：上右下左

补充padding的常用简写方式

●提供一个，用于四边；
●提供两个，第一个用于上－下，第二个用于左－右；
●如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
●提供四个参数值，将按上－右－下－左的顺序作用于四边；

float浮动

三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动clear
clear属性规定元素的哪一侧不允许其他浮动元素。值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。清除浮动清除浮动的副作用（父标签塌陷问题）主要有三种方式：
● 固定高度
● 伪元素清除法
● overflow:hidden
伪元素清除法（使用较多）：
.clearfix:after {content: "";display: block;clear: both;
}

END

前端css介绍

CSS介绍 CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 CSS实例每个CSS样式由两个组成部分：选择器和…...

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

MySql创建索引

在MySQL中，可以使用CREATE INDEX语句来创建索引。以下是创建索引的基本语法： CREATE INDEX index_name ON table_name (column1, column2, ...);其中，index_name是索引的名称，可以自定义（也可以不指定索引名称&#x…...

编程日记 2023/11/1 10:41:09

前后端分离vue+springboot家庭理财账单财务管理系统

项目介绍： 该系统能够管理家庭收入支出，并且能直观得表现收支状态。主要功能包括用户管理、收支管理、财务管理、统计收支情况等功能。技术栈： 后端： SpringBoot，Sa-Token，MyBatis-Plus，MyB…...

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

LeetCode：2003. 每棵子树内缺失的最小基因值（C++）

目录 2003. 每棵子树内缺失的最小基因值题目描述： 实现代码与解析： dfs 启发式合并原理思路： 2003. 每棵子树内缺失的最小基因值题目描述： 有一棵根节点为 0 的家族树 ，总共包含 n 个节点，节点编…...

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

React Hooks之useContext使用

官方文档写道：在组件的顶层调用 useContext 来读取和订阅 context。我理解就是一个“全局变量”的概念。它可以用来声明一个变量，然后在各个组件中使用，避免了props一级一级往下传，当然使用场景有限，比如设置一个主题…...

编程日记 2023/11/1 10:38:07

多模态对比语言图像预训练CLIP：打破语言与视觉的界限

项目设计集合（人工智能方向）：助力新人快速实战掌握技能、自主完成项目设计升级，提升自身的硬实力（不仅限NLP、知识图谱、计算机视觉等领域）：汇总有意义的项目设计集合，助力新人快速实…...

编程日记 2023/11/1 10:36:05

使用s3cmd访问S3存储 -【真实案例】

背景项目中使用到了 S3 存储（基于华为云 OBS），并且在应用服务器上开通了到 S3 存储的防火墙。 👉 目标：在应用服务器上验证 S3 存储是否通畅可用。 👉 选型：经过分析，发现在 Linux 下可以使用 s3cmd 来访问 S3 存储。 s3cmd 简介 s3cmd 是一个开源免费的、基于 P…...

编程日记 2023/11/1 10:35:02

51单片机复位电容计算与分析（附带Proteus电路图）

因为iC x (dU/dt).在上电瞬间，U从0变化到U,所以这一瞬间就是通的，然后这就是一个直流回路，因为电容C直流中是断路的，所以就不通了。然后来分析一下这个电容的电压到底是能不能达到单片机需要的复位电压。这是一个线性电容&…...

编程日记 2023/11/1 10:32:59

前端性能瓶颈崩溃项目？Webpack助力解决！

🎬 江城开朗的豌豆：个人主页 🔥 个人专栏 :《 VUE 》《 javaScript 》 📝 个人网站 :《江城开朗的豌豆🫛 》 ⛺️ 生活的理想，就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言一、背…...

编程日记 2023/11/1 10:31:58

纷享销客BI，助力企业激活数据价值，科学企业决策

10月25日上午，国家数据局正式挂牌成立，这标志着我国数字经济发展将进入新的发展阶段，也将有力促进数据要素技术创新、开发利用和有效治理，以数据强国支撑数字中国的建设。伴随数据作为企业新的生产要素的意义不断凸显，…...

编程日记 2023/11/1 10:29:56

SpringBoot整合阿里云OSS对象存储

文章目录 1、OSS介绍及开通1.1、阿里云OSS简介1.2、开通OSS 2、创建存储空间bucket及密钥获取2.1、创建存储空间2.2、获取密钥 3、OSS快速入门案例4、在springboot项目中整合4.1、将oss配置放到yml文件中4.2、创建Oss属性类，接收yml文件中的属性4.3、封装文件上传功…...

编程日记 2023/11/1 10:26:51

【ES专题】ElasticSearch快速入门

目录前言从一个【搜索】说起阅读对象阅读导航笔记正文一、全文检索1.1 什么是【全文检索】1.2 【全文检索】原理1.3 什么是倒排索引二、ElasticSearch简介2.1 ElasticSearch介绍2.2 ElasticSearch应用场景2.3 数据库横向对比三、ElasticSearch环境搭建3.1 Windows下安装3.2…...

编程日记 2023/11/1 10:23:47

案例分析真题-质量属性

案例分析真题-质量属性 2009 年真题【问题1】【问题2】 2011 年真题【问题1】骚戴理解：首先要知道这样的题目没有可靠性，只有可用性，更没有容错性，这里我（3）写成了i，而不是f，仔…...

编程日记 2023/11/1 10:22:45

微信小程序面试题之理论篇

本文内容，来源于极客学院的分享，这里只做引用。说说你对微信小程序的理解?优缺点? 背景小程序与H5 优缺点优点：缺点： 说说微信小程序的生命周期函数有哪些？ 应用的生命周期页面的生命期组件的生命周期执行过程应…...

编程日记 2023/11/1 10:20:43

C++前缀和算法的应用：统计上升四元组

C前缀和算法的应用：统计上升四元组本文涉及的基础知识点 C算法：前缀和、前缀乘积、前缀异或的原理、源码及测试用例包括课程视频题目给你一个长度为 n 下标从 0 开始的整数数组 nums ，它包含 1 到 n 的所有数字，请你返回上…...

编程日记 2023/11/1 10:19:40

华泰证券：新奥能源：零售气待恢复，泛能与智家仍是亮点

来源：猛兽财经作者：猛兽财经猛兽财经获悉，由于新奥能源（02688）发布三季度经营数据： 1-3Q23：天然气零售量yoy-4.7%，燃气批发量yoy17.6%，综合能源销量yoy34.2%&#xff…...

编程日记 2023/11/1 10:18:39

FPGA与ASIC有什么差异？二者该如何选用？

前言对于一个数字电路的新手来说，这可能是会经常遇到的一个问题：FPGA和ASIC之间的区别是什么? 接下来本文将尝试讲解 “什么是FPGA？” 和 “什么是ASIC？”，然后讲述一些关于FPGA和ASIC的问题，例如它们之间…...

编程日记 2023/11/1 10:17:36

Kotlin run 用法

Kotlin 中的 .run 函数可以用于不同的场景，下面是一些常见的用法： 执行代码块并返回结果： val result run {// 在这里编写一些代码逻辑// 返回最后一个表达式的结果"Hello, Kotlin" }println(result) // 输出：Hello, …...

编程日记 2023/11/1 10:16:35

iZotope RX 10(音频修复和增强工具)

iZotope RX 10是一款音频修复和增强软件，主要特点包括： 声音修复：iZotope RX 10可以去除不良噪音、杂音、吱吱声等，使音频变得更加清晰干净。音频增强：iZotope RX 10支持对音频进行音量调节、均衡器、压缩器、限制器等…...

编程日记 2023/11/1 10:13:32

MES 价值点之数据追随

在现代制造业中，数据追溯已经越来越得到重视，特别是那些推行精益生产的企业重要性就更加突出了，而制造执行系统（MES）作为一种关键的生产管理工具，是能很好的为制造企业提供数据追溯功能。今天，和…...

编程日记 2023/11/1 10:12:29

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/10/20 23:54:51

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/10/19 13:38:00

前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12