前端工程师————CSS学习
选择器分类
选择器分为基础选择器和复合选择器
基础选择器包括:标签选择器,类选择器,id选择器,通配符选择器
标签选择器
类选择器
语法:.类名{属性1: 属性值;} 类名可以随便起
多类名使用方式:
在下面用class调用即可
id选择器
#id名{属性1: 属性值1;}
通配符选择器
* {属性1; 属性值;}
*这里把body div spen 等等标签都变为相同的属性
字体背景
CSS字体序列
文本外观属性
letter-spacing属性:用于定义字间距,默认normal.
word-spacing属性:定义英文单词之间的间距。
line-height属性:设置行间距
text-transform属性:用于控制英文字符的大小写。none:不转换;capitalize:首字母大写;uppercase:全部字符转换为大写;lowercase:全部字符转换为小写
text-decoration属性:设置文本的下划线,上划线,删除线。none:没有;underline:下划线;overline:上划线;line-through:删除线。
text-align:设置文本内容水平对齐.left;right;center
text-indent属性:设置首行文本缩进
white-space属性:设置空白符的处理方式。normal:默认,到达便捷和制动换行;pre:按文档的书写格式保留空格,空行原样显示;nowrap:空格无效,不换行,增加进度条
优先级
CSS背景
盒子模型
border 边框 content 内容 padding 内边框 margin 外边框
边框(border)
border : border-width/border-style/border-color
border-width 定义边框粗细,单位是px
border-style 边框样式
border-color 边框颜色
soild 实线
dashed 虚线
dotted 点线
border-radius 圆角
transparent 透明色
复合写:
border: 1px solid red; 没有顺序
分开写法:
border-top: 1px solid red; 只设定上边框,其余同理
border-bottom: 10px dashed pink; 只设定下边框
弹性盒子
垂直方向
水平方向
可以写成flex/flex-grow
表格细线边框:
折叠边框,变成单边框
border-collapse: collapse;
collapse 单词合并的意思
内边框(padding)表示边框和内容之间的距离
padding-right 右内边框
padding-top 上内边框
padding-bottom 下内边框
例:padding-left: 5px;像这种分开写
padding: 5px 10px 20px 30px; 见图所示
解释:
padding: 5px 10px 20px 30px;
是CSS中用来设置元素内边距(padding)的属性,它表示分别设置了上、右、下、左四个方向的内边距值。
具体解释如下:
- 第一个值(5px)表示上边距(top padding)
- 第二个值(10px)表示右边距(right padding)
- 第三个值(20px)表示下边距(bottom padding)
- 第四个值(30px)表示左边距(left padding)
如果只指定了一个值,那么四个方向的内边距都会设置为这个值;如果指定了两个值,第一个值会应用于上下内边距,第二个值会应用于左右内边距;如果指定了三个值,第一个值会应用于上内边距,第二个值会应用于左右内边距,第三个值会应用于下内边距;如果指定了四个值,分别应用于上、右、下、左四个方向的内边距。
margin 外边距
margin-left 左边距
margin-right 右边距
margin-top 上边距
margin-bottom 下边距
解释:margin
- 如果只指定一个值,那么四个方向的外边距都会设置为这个值;
- 如果指定了两个值,第一个值会应用于上下外边距,第二个值会应用于左右外边距;
- 如果指定了三个值,第一个值会应用于上外边距,第二个值会应用于左右外边距,第三个值会应用于下外边距;
- 如果指定了四个值,分别应用于上、右、下、左四个方向的外边距。
举例来说:
margin: 5px;
将会将所有外边距设置为 5 像素;margin: 5px 10px;
将会将上下外边距设置为 5 像素,左右外边距设置为 10 像素;margin: 5px 10px 15px;
将会将上外边距设置为 5 像素,左右外边距设置为 10 像素,下外边距设置为 15 像素;margin: 5px 10px 15px 20px;
将会将上外边距设置为 5 像素,右外边距设置为 10 像素,下外边距设置为 15 像素,左外边距设置为 20 像素。
外边距可以让盒子水平居中
1.盒子必须指定宽度
2.盒子左右的外边距都设置为auto
.header{ width:90px; margin:0 auto;}
常见写法:
margin-left:auto; margin-right:auto;
margin:auto;
解释:
margin:0 auto;
margin: 0 auto;
是一种常见的 CSS 样式,通常用于水平居中元素。具体含义如下:
0
:表示在上下方向上不设置外边距,即上下外边距为 0。auto
:表示在左右方向上自动计算外边距,使得元素在其父元素中水平居中。
圆角边框
borde-radius: length;
radius半径
borde-radius: 100px;圆形
圆角矩形设置为高度的一半:
阴影
盒子阴影:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必须,水平阴影的位置。可以是负值
v-shadow 必须,垂直阴影的位置,允许负值
blur 可选,模糊距离
spread 可选,阴影的尺寸
color ,可选。阴影的颜色
inset 可选,将外部阴影outset改为内部阴影
例:
box-shadow: 11px 10px 34px 10px black;
解释:
- 水平方向偏移量为 11px;
- 垂直方向偏移量为 10px;
- 模糊半径为 34px;
- 扩散半径为 10px;
- 阴影颜色为黑色。
原先盒子没有影子,当我们的鼠标经过盒子时就添加阴影效果
div:hover { 11px 10px 34px 10px black;}
文字阴影
text-shadow: h-shadow v-shadow blur color;
同上
新增文本外观属性
text-overflow属性:用于标识文本对象内溢出的文本。clip:修剪溢出的文本,不显示...;ellipsis:多出的部分用...标识
浮动(float)
选择器 {float: 属性值;}
none 元素不浮动
left 元素向左浮动
right 元素向右浮动
link标签的使用:
就是在header标签中
插件使用的网址:
Font Awesome,一套绝佳的图标字体库和CSS框架
Flex交互式布局
基础语法如下:
Flex 布局教程:语法篇 - 阮一峰的网络日志
position四个属性详解
1. position:static;
这个属性让元素使用正常的布局(元素在文档常规流中当前的布局位置)。
2. position:relative;:相对定位
在元素原有的位置基础上,根据设置的top,left调整元素位置
不会改变页面布局,不影响其他元素的偏移,因此会在此元素未添加定位时所在位置留下空白
3. position:absolute:绝对定位
4.position:fixed;:固定定位
添加这个属性的元素会相对于屏幕视口(viewport)来定位
在滚动屏幕位置的时候元素位置不会改变。在固定顶部导航栏的时候可以使用这个属性。
fixed 属性会创建新的层叠上下文
相对定位:
绝对定位:
固定定位:(不管如何滑动页面,都不动)
display常用属性值
1. none:隐藏对象
2. inline: 指定对象为行内元素
3. block: 指定对象为块元素,显示信息
4. inline-block:指定对象为行内块元素
5. table-cell:指定对象为表格单元格
6. flex:弹性盒
7. inline转块级元素
outline属性
outline-color:用于设置一个元素轮廓的颜色。
属性值:1.轮廓颜色,规则同color;2.invert:反色,用于确认轮廓的显示。注意不是所有浏览器都支持该属性,若不则该属性无效。
outline-style 被用于设置一个元素轮廓的样式。
属性值:
1.none:无轮廓
2.dotted:轮廓为一系列点
3.dashed:轮廓为一系列短线
4.solid:轮廓为实线
5.double:轮廓为两根有空隙的线。outline-width 为线与空间的总和。
6.groove:轮廓呈凹下状
7.ridge:与 groove相反:轮廓呈凸起状。
8.inset:轮廓呈嵌入状
9.outset:与 inset 相反:轮廓呈突出状
outline-width 用于设置一个元素的轮廓的厚度。
animation属性
animation-name 属性,指定元素要进行的一系列动画名称,每个名称对应是 @keyframes 定义的动画序列名称。
@keyframes
@keyframes (关键帧),根据规则用于定义动画关键帧的样式,来控制CSS动画的中间步骤。
定义动画时,使用 % 或 关键字from和to,来设置动画中间步骤的变化。from相当于0%,to相当于100%
为了获得最佳的浏览器支持,您应该始终定义 0%和100% 的选择器。
animation-duration:属性指定动画持续时间。默认值为 0,意味着没有动画效果。
动画周期的时长,单位为秒(s)或者毫秒(ms),无单位或负值无效。
animation-timing-function:属性控制CSS动画执行的节奏。
animation-delay:定义动画于何时开始,即延迟动画执行时间。
animation-iteration-count:定义动画在结束前运行的次数 可以是1次 无限循环,默认值为1
animation-direction 属性指示动画是否反向播放。
normal 每个动画循环结束,动画重置到起点重新开始,这是默认属性。
alternate 每个动画循环结束,动画重结束点反向开始。
reverse 从结束点,反向开始执行动画。
alternate-reverse 从结束点,反向开始执行动画,到起始点反向执行到结束点,一直重复。
animation-fill-mode 属性,用于设置动画在执行之前和之后是否保留关键帧对应的样式。
默认值 none 不修改任何样式。
forwards 当动画结束后,修改元素样式为最后一帧的样式。
backwards 当动画开始时,修改元素样式为第一帧样式。比如设置了等待时间,等待时间中也会修改元素样式为第一帧样式。
both 遵循 forwards和backwards 的规则,开始后结束都修改样式。
animation-play-state 属性定义一个动画是否运行或者暂停。
值 paused 规定动画已暂停。running 规定动画正在播放。一般是通过js来给元素设置这个属性控制动画。
视频插入
音频插入
新增伪类选择器
转换transfrom
1.语法:
transform: translate(x,y);或者分开写
例:transform: taranlate(100px,200px);
transform: translateX(n);
transform: translateY(n);
让一个盒子水平居中:
transform:translate(-50%,-50%);
rotate旋转
2.语法:transform:rotate(度数),单位deg
3.设置旋转中心点transform-origin
语法:transform-origin: x y;
scale缩放
4.语法:transform: scale(x,y);
鼠标特效
动画
opacity:0.2表示透明度可以加入到keyframes中
3D
perspective透视需要写在父级上
3D旋转rotate3d:
transform:rotateX(45deg);表示沿着x轴方向旋转45度
transform:rotateY(45deg);表示沿着y轴方向旋转45 度
transform:rotateZ(45deg);表示沿着Z轴方向旋转45度
transform:rotate3d(x,y,z,deg);表示沿着定义轴旋转deg角度
媒体查询
雪碧图
[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
版权声明:本文为博主「南栀北夏」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.jinghan.site
时光清浅处,一步一安然!
---致随遇而安的者
相关文章:

前端工程师————CSS学习
选择器分类 选择器分为基础选择器和复合选择器 基础选择器包括:标签选择器,类选择器,id选择器,通配符选择器标签选择器 类选择器 语法:.类名{属性1: 属性值;} 类名可以随便起 多类名使用方式&am…...

C# 登录界面代码
背景 MVVM 是一种软件架构模式,用于创建用户界面。它将用户界面(View)、业务逻辑(ViewModel)和数据模型(Model)分离开来,以提高代码的可维护性和可测试性。 MainWindow 类是 View&a…...
点云的Python均值采样
一、代码 Python import numpy as np import open3d as o3ddef mean_sampling(point_cloud, num_samples=None, depth=None, method=knn, k=10):"""对点云进行均值下采样。:param point_cloud: Open3D PointCloud对象:param num_samples: (仅当method=knn时使…...

xss-labs 11-13通关记录
前言 最近复习xss知识,整理一下xss的绕过思路。 level11 观察测试: 1.四个隐藏参数标签 2.全部get传参一遍发现t_sort可赋值,使用的是get传参 3.针对t_sort测试过滤的字符 t_sort< > & ; " 检测到他除了<>,别的全部过滤。 因为…...

Unity类银河恶魔城学习记录12-2 p124 Character Stats UI源代码
Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili UI_Statslot.cs using System.Collections; using System.Collections.Gen…...

技术揭秘:如何打造完美互动的充电桩硬件与服务平台?
充电桩平台全套源码地址 https://gitee.com/chouleng/cdzkjjh.git 这张图像是一个系统或服务的架构图。以下是对图中各个部分的描述: 前端: 位于图像的顶部,颜色为浅绿色。用户服务端: 紧邻前端,颜色为淡黄色。设备服…...

【Django学习笔记(四)】JavaScript 语言介绍
JavaScript 语言介绍 前言正文1、JavaScript 小案例2、代码位置2.1 在当前 HTML 文件中2.2 在其他 js 文件中 3、代码注释3.1 HTML的注释3.2 CSS的注释3.3 Javascript的注释 4、变量 & 输出4.1 字符串4.2 数组4.3 对象(python里的字典) 5、条件语句6、函数7、DOM7.1 根据 I…...
IO和NIO的主要区别在哪里?
Java 中的 IO(输入/输出)和 NIO(新输入/输出)都是处理输入和输出操作的方式,它们的主要区别在于如何处理数据的读写。 阻塞与非阻塞: IO是阻塞的,这意味着当一个线程调用read()或write()时,该线…...

爬虫部署平台crawlab使用说明
Crawlab 是一个基于 Go 语言的分布式网络爬虫管理平台,它支持 Python、Node.js、Jar、EXE 等多种类型的爬虫。 Crawlab 提供了一个可视化的界面,并且可以通过简单的配置来管理和监控爬虫程序。 以下是 Crawlab 的一些主要优点: 集中管理&am…...

uniapp uni.scss中使用@mixin混入,在文件引入@include 样式不生效 Error: Undefined mixin.(踩坑记录一)
问题: 在uni.scss文件定义mixin 2. 在vue文件引入: 3. 出现报错信息: 4. 问题思考: 是不是需要引入uni.scss ? 答案不需要 uni.scss是一个特殊文件,在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的…...

Redis的5大常见数据类型的用法
上一篇文章我们讲了Redis的10大应用场景,这一篇文章就针对Redis的常用数据结构进行一个说明,通过示例的形式演示每一种数据结构如何使用。 当涉及Redis的数据操作时,不同数据类型对应的不同数据结构,如下就对5大常用的数据类型进行…...

刘小光本就疑心赵本山与他媳妇李琳有染,赵本山为证实清白便想起蛋糕上的字,结果呢?
刘小光本就疑心赵本山与他媳妇李琳有染,赵本山为证实清白便想起蛋糕上的字,结果呢? ——小品《生日快乐》(中5)的台词 (接上) 赵本山:噢!对对!那谁,老四,是…...

Unity之PUN实现多人联机射击游戏的优化(Section 2)
目录 🎮一、准备工作 🎮二、实现手雷投掷动作 🎮三、手雷投掷同步 💤3.1 photonView.RPC 🎮四、同步手雷伤害 这几周都给我布置任务了,最近可忙。现在终于有机会更新了,也谢谢大家的阅读&a…...

多叉树题目:N 叉树的层序遍历
文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题:N 叉树的层序遍历 出处:429. N 叉树的层序遍历 难度 4 级 题目描述 要求 给定一个 N 叉树的根结点 root \texttt{root} root…...

时序数据库IoTDB:功能详解与行业应用
一文读懂时序数据库 IoTDB。 01 为什么需要时序数据库 解释时序数据库前,先了解一下何谓时序数据。 时序数据,也称为时间序列数据,是指按时间顺序记录的同一统计指标的数据集合。这类数据的来源主要是能源、工程、交通等工业物联网强关联行业…...

信息系统项目管理师——第18章项目绩效域管理(一)
本章节内容属于第四版新增知识,为PMBOK第七版专有,选择、案例、论文都会考,属于比较重要的章节。 选择题,稳定考3分左右,新教材基本考课本原话,需要多读课本,多刷题。 案例题,考的概…...

WebSocket用户验证
在WebSocket中,如何携带用户的验证信息 一、在OnMessage中进行验证 客户端在连接到服务器后,客户端通过发送消息,服务器端在OnMessage方法中,进行信息验证,这种方式需要将用户身份验证及接收用户消息进行混合处理&am…...
NOSQL(非关系型数据库)的优缺点有哪些?
优点: 高度灵活且可扩展:NoSQL数据库不受固定数据模型的限制,可以根据应用需求灵活设计数据结构,轻松应对大规模数据集。此外,它支持分布式架构,具有出色的水平扩展能力,能够高效地处理大量数据…...
个人推荐Redis比较好的一种使用规范
随着对个人项目的不断开发、迭代和重构,博主在这个过程中总结出了一套使用redis的较好的规范。主要包含Redis的key命名规范和Redis代码规范。 主要内容 主要包含以下几个内容: 同一应用的key在最前面添加统一的前缀,如应用名; 案…...

【教程】宝塔default.db占用空间几十g解决方法|宝塔占用磁盘空间特别大解决方法|宝塔磁盘被占满怎么清理
目录 一、前言二、排查问题三、解决方法 一、前言 用过宝塔创建网站,大家应该都非常熟悉,但是用随着用的时间越来越多,宝塔所占用的空间也越来越多,不停的加大数据盘都没有用,我原先买了30G够用了,随着时间…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...

DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...

HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...