前端之CSS样式-优快云博客

本文详细介绍了CSS中的样式部分，包括字体颜色、大小、背景设置、单位选择、英文换行、背景图片、渐变、透明度、定位、阴影效果、动画和混合模式等内容，强调实践积累的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

我们来继续更新CSS的内容，往期的内容可以到前端专栏里去看，也可以点下面的链接

HTML常用内容：

https://blog.youkuaiyun.com/AWSDN/article/details/136112174spm=1001.2014.3001.5501
CSS前言：

前端之CSS前言-优快云博客

CSS选择器：

前端之CSS选择器-优快云博客

CSS盒子模型：

https://blog.youkuaiyun.com/AWSDN/article/details/136146708?spm=1001.2014.3001.5501

CSS布局：

https://blog.youkuaiyun.com/AWSDN/article/details/136168009?spm=1001.2014.3001.5501
我打算从4个部分来讲CSS的内容，分别是选择器、盒子模型、布局、style样式。那么本篇就来介绍CSS中样式部分。下面我们就对样式部分进行介绍。

二、内容

其实这部分更像是锦上添花，可以让页面变得更美观，没有必要死记硬背，做好笔记有需要的时候查一下就好。

/* 字体颜色大小背景 */
/* div{
 background:yellow; 字体背景颜色
 color: blue; 字体颜色
 font-size: 30px; 字体大小
 font-family: "宋体","黑体","等"; 字体
 //设置多个字体时按顺序读取，若有相应字体就用当前字体，没有扫描下一个
} */
/* 服务器字体：在不同电脑上访问页面字体风格统一 */
/* 定义：@font-face {
 font-family: name; 定义服务器字体名
 src: url("") format(fontformat); 设置字体资源路径以及格式
format字体格式（可以省略）根据市面上字体文件后缀定义（一般有TrueType(.tty)以及OpenType(.otf)格
式
 sRules定义其他样式但兼容性不好，一般不用
} */
/* 常用单位：px(绝对单位-像素点);vh（相对单位-视图窗口[屏幕大小]高度）；vw（相对单位-视图窗口
宽度度） */
/* 英文换行设置 */
/* div{
 word-break:break-all; 针对英文可自动换行
} */
/* div{
 word-break:keep-all; 针对英文保持完整不换行
} */
/* 背景图片及插入空间设置 */
/* div::before{
 content: "";
 width: 100px; 
 height: 100px; 调整插入空间大小
 display: block; 变成块级元素
 background: red; 背景颜色
 background-image: url(""); 背景图片
 background-size: 100px; 背景图片大小
 background-repeat:no-repeat 是否平铺no-repeat不平铺（不重复）；repeat平铺（重复）
} */
/* 行高
line-height: 8px;
可以让内容在内容区垂直居中：行高等于内容高度*/
/* 去掉下划线 */
/* text-decoration: none; */
/* 选中状态 */
/* input:checked{
 box-shadow: 2px 3px 4px red; 阴影特效
} */
/* 阴影特效
 box-shadow: 2px 3px 4px red; 盒子阴影
 text-shadow: 2px 3px 4px red; 文字阴影
 2px 3px 4px red inset;内阴影（多组值之间用逗号隔开）
横向偏移量 纵向偏移量 模糊度 颜色 */
/* width：80%; 根据比例调整所占当前页面宽度 */
/* 颜色表示 */
/* 1.用英文表示（red，green等） */
/* 2.用六个十六进制表示：#ff1100 （ff：红色，11:绿色，00：蓝色）（简化表示为（f10：对应元素相
同）） */
/* 3.rgb(red,green,blue)(范围：0~255)
 rgba(red,green,blue,alpha)(alpha取值0~1，0代表完全透明）（只规定颜色透明度 */
/* 透明度：opacity：1；（取值范围0~1）规定所属盒子所有元素的透明度 */
/* 渐变：linear-gradient(方向，颜色1，颜色2）；范围：0deg~360deg（0度为垂直向上） */
/* 重复渐变 repeating-linear-gradient(30deg,red,yellow 10px,yellow 10px,#0984e3 20px);*/
/* 锥形渐变：conic-gradient(red,yellow,green,blue,#f0f); */
/* 圆角边框：border-radius:5px
完整描述用八个值：横向半径4个/纵向半径4个（4个值默认为圆形即横纵半径相同） */
/* 点击后消失 */
/* 文本框边框设置border：none; 去掉未选中时边框
 outline：none; 去掉选中时边框 */
/* 控制图片不变形 */
/* object-fit:cover; */
/* 背景图片填满背景 */
/* background-size:cover; */
/* 去掉表格样式 */
/* list-style: none;
text-decoration: none; */
/* 字体粗细 */
/* font-weight:500;（一般用500和600） */
/* 颜色缓慢变化 */
/* transition:all ease 2s; */
/* 设置大小写格式 */
/* text-transform： */
/* 设置背景颜色覆盖区域 */
/* background-image:颜色或图片;
(-webkit-)background-clip:
只覆盖文字（文字渐变）：background-clip: text;(注意兼容性以及字体颜色透明）*/
/* 字体边框
text-stroke:7px #000;
但不一定兼容要加前缀，例如-webkit-text-stroke:：*/
/* 改变放上去鼠标样式（手指）（直接加）
cursor: pointer; */
/* 四种定位方式
position:static|relative|absolute|fixed;
static:静态（默认）模式
 top ，bottom等属性改变无作用,保留自己原来空间；
relative:相对模式:相对于原来位置进行移动
 top ，bottom等属性改变有作用,保留自己原来空间;
absolute:绝对模式:相对于浏览器进行移动,随浏览器滚动而滚动
 top ，bottom等属性改变有作用,释放自己原来空间;
fixed:固定模式:相对于浏览器进行移动,不会随浏览器滚动而滚动
 top ，bottom等属性改变有作用,释放自己原来空间; 
结合模式:父集用relative,自己用absolute
 相对于父级元素位置变化,释放自己原来空间,随浏览器滚动而滚动;
z-index:设置层级,(static对z-index不支持) 数字大的在上面; */
/* 模糊：filter */
/* 背部内容模糊：backdrop-filter */
/* 透明色：background:transparent;（完全透明）
 融入效果：渐变加透明 */
/* background复合属性
background-color设置背景颜色
background-image设置背景图片
back-ground-repeat:设置背景重复方式（repeat[默认重复],norepeat[不重复],repeat-x[横向重复],repeat-y[纵
向重复])
background-size:宽 高；设置背景图片大小(支持px，百分数，cover（图片不变形）等）
background-position:10px 10px；设置背景图片位置（距上10像素，距下10像素）[支持-x，-y]
background-attachment:设置背景图片是否固定（scroll[滚动默认]，fixed[固定]） */
/* 背景位置background-position: -55px -77px;
背景尺寸:background-size: 200% 200%;一般配合位置使用,防止背景设置重复覆盖
为background子选择器,必须放在background设置后面 */
/* 变形（transform）属性值：translate(位移);rotate(旋转);scale(缩放);skew(倾斜） */
/* translate(300px,200px)：表示右移300px，下移200px(负数表示相反方向）
 translateX(300px)：表示右移300px
 translateY(200px)：表示下移200px
 translateZ(200px)：三维空间（3D动画）效果表示沿移Z轴200px
 translate3d(300px,200px，100px) 3D效果，3个值都不能省略 */
/* transform: rotate(30deg):顺时针旋转30度，大于360度取余，默认为Z轴（XYZ三轴交点默认为中心点）
 transform: rotateX(30deg):平面效果为变矮（高度减少）
 transform: rotateY(30deg):平面效果为变瘦（宽度减少）
 transform: rotateZ(30deg):默认
 transform: rotate3d(x,y,z,30deg):3D效果，4个值都不能省略(xyz三值确认坐标轴）*/
/* scale(2 [2]):以中心点为中心，放大2倍
 scaleX(2):以中心点为中心，水平方向放大2倍
 scaleY(2):以中心点为中心，竖直方向放大2倍
 scaleZ(2):以中心点为中心，Z轴方向放大2倍
 scale(2 2 2):以中心点为中心，水平方向放大2倍,竖直方向放大2倍,Z轴方向放大2倍,3个值都不能省略 */
/* skew(30deg [30deg]):以中心点为中心，沿X轴倾斜30度，沿y轴倾斜30度
 skewX(30deg):以中心点为中心,沿X轴倾斜30度
 skewY(30deg):以中心点为中心,沿y轴倾斜30度*/
/* 同时使用多种变形，属性值之间空格隔开 */
/* 变形相关属性 */
/* 设置中心点：transform-origin:横向位置（left|center|right|数字[px]) 纵向位置(top|center|bottom|数字[px])
*/
/* 3d视距效果（近大远小）开启:perspective,其值越小3d效果越明显,该属性用于父集元素保证其所有子
元素都有透视元素 */
/* 3d嵌套效果：transform-style:flat(默认不保留)|perserve-3d(抱留3d效果),该属性用于父集元素保证其所有
子元素都有3d嵌套效果 */
/* 3d背面是否可见：backface-visibility:visibility(默认可见)|hidden(不可见) */
/* -webkit-mask-image:设置图像蒙板，支持渐变（linear-gradient） */
/* 过渡动画transition */
/* transition-propert 设置过渡动画变形属性 (all代表所有css属性) */
/* transition-duration 设置过渡动画持续时间 */
/* transition-funcyion 设置过渡动画变换方式
 linear:匀速
 ease：由慢到快，到最快时由快到慢
 ease-in：由慢到快
 ease-out：由快到慢
 ease-in-out:由快到慢，到最慢时由慢到快 */
/* transition-delay 设置过渡动画延迟时间或出现延迟时间 */
/* 支持多种属形变换:一套值之间用空格，多套值之间用, */
/* 帧动画animation */
/*属性值：
设置动画名称animation-name:
设置动画过度时间animation-duration:
设置动画变换方式animation-timing-function:
 linear:匀速
 ease：由慢到快，到最快时由快到慢
 ease-in：由慢到快
 ease-out：由快到慢
 ease-in-out:由快到慢，到最慢时由慢到快
设置动画延迟时间animation-delay:
设置动画执行次数animation-iteration-count:数字|infinite（无穷）
设置动画的方向animation-direction:主要用alternate（交替） */
/* 设置动画的播放：状态animation-play-state: paused; paused：暂停 */
/* 帧动画animation创建语法
@keyframes 动画名称{
 from|to|百分数{
 样式
 }
} */
/* 混合色彩模式mix-blend-mode:lighten(保留白色部分，去掉黑色部分） */
/* 盒子倒影：-webkit-box-reflect: below 15px linear-gradient(transparent 10%,rgba(255,255,255,0.3));
 位置 距离 颜色 */
/* 盒子渐变边框：border-image:颜色 完整度（1）
 加图片：border-image:url("") 完整度（1） */
/* 计算函数：width:calc(100% - 4px); 支持百分数与px的计算 */
表格边框形式：border-collapes:collapes(合并)/separate（分离/默认）