1. 字体"font"
font 属性是一个 CSS 的简写属性，用于设置文字的字体、字号、字重和文字样式属性。它可以将 font-size、font-family、font-weight、font-style、line-height 等多个属性值合并为一个属性。
font 属性值可以包括以下内容：
font-style：指定文字样式，可以取值为 normal、italic 或 oblique。font-variant：指定小型大写字母的使用方式，可以取值为 normal 或 small-caps。(即所有小写字母会转换成大写字母，但转换后的大写字母的字体会小一点)font-weight：指定字体的粗细程度，可以取值为 normal、bold、bolder、lighter，或者是用 100 到 900 的数字表示不同的粗细程度。font-size/line-height：指定文字的大小和行高，两个值可以用斜线（/）分隔表示。font-family：指定文字所使用的字体，可以使用一个或多个字体名，用逗号隔开，浏览器会按照从左到右的顺序依次尝试使用这些字体。
例如，下面的代码展示了如何使用 font 属性设置文字样式：
font: italic small-caps bold 24px/36px "Helvetica Neue", Arial, sans-serif;
该样式将文字样式设置为斜体、小型大写字母、粗体，文字大小为 24 像素，行高为 36 像素，字体依次尝试使用 Helvetica Neue、Arial 和 sans-serif 字体。
注意:
- 标准顺序，
font: font-style font-variant font-weight font-size/line-height font-family;- font属性中也可省略一些属性，但必须有font-size和font-family属性，且顺序不变。即，
font: font-size font-family;- 在font属性中，font-style,font-variant,font-weight等属性可写可不写，而且顺序不用按标准顺序写，但必须写在font-size属性前面
2. 文本颜色"color"
color 属性用于设置文本的颜色。它可以接受多种形式的值，包括颜色名称、RGB 值、HEX 值、HSL 值、RGBA 值、HSLA 值等。其中，最常用的是颜色名称、RGB 值和 HEX 值。
以下是一些常见的值：
- 颜色名称：常用的颜色名称包括
red、green、blue、black、white等等，以及transparent透明色。- HEX 值：HEX 颜色值是一个六位的十六进制数，它将红、绿和蓝三种颜色混合在一起。例如，红色的 HEX 值为
#ff0000。- RGB 值：RGB 颜色值指定红、绿和蓝的亮度值。每一个值的范围是 0 ~ 255。例如，红色的 RGB 值为
rgb(255,0,0)。以及RGBA值，可以再设置一个透明度，rgba(255,0,0,0.8)。- HSL 值：HSL 颜色值指定色调、饱和度和亮度值。色调的范围是 0 ~ 360，饱和度和亮度都是百分比值。例如，
hsl(120,10%,20%)。以及HSLA值，可以再设置一个透明度，hsla(120,10%,20%,0.8)。
3. 文本阴影"text-shadow"
- 使用方法，
text-shadow: 1px 1px 4px #000;- 属性：水平方向阴影偏移，垂直方向阴影偏移，阴影模糊距离，阴影的颜色
4. 空格换行处理"white-space"
注意：在html中如果没有样式设置，多个空格会合并为一个空格
| 属性值 | 换行符 | 空格和 Tab | 文本超出容器宽度 |
|---|---|---|---|
| normal | 忽略(显示为空格) | 折叠(显示为空格) | 换行 |
| nowrap | 忽略 | 折叠 | 不换行 |
| pre | 换行 | 保持原样 | 不换行 |
| pre-wrap | 换行 | 保持原样 | 换行 |
| pre-line | 换行 | 折叠 | 换行 |
5. 背景"background"
属性：
background-color:red;背景色(与color的属性值一样)background-image:url("./img.png");背景图片
- 可不加引号，
background-image:url(./img.png);
background-repeat:repeat;背景图片重复
- 当背景图片宽或高小于其元素宽高时，设置图片平铺方式
- repeat 默认，以’平铺’的方式排列图片,背景图像超出的部分会被裁切
- repeat-x ，只在水平方向（X轴方向）进行平铺,背景图像超出的部分会被裁切
- repeat-y ，只在垂直方向（Y轴方向）进行平铺,背景图像超出的部分会被裁切
- round 平铺,图像不会被裁切，而是被平均缩放，正好完全覆盖整个背景区
- no-repeat ，使背景图片不平铺
background-position:left top;背景图像的定位(两个值：x轴位置,y轴位置)，也可分开写(background-position-x和background-position-y)
- 关键字属性：left，right，top，bottom，center
- 百分比属性：百分比数值，默认值为 0% 0%
//实际偏移量计算公式：(百分比偏移量是相对于背景区的,其基数为：背景区的尺寸减去背景图像的尺寸) (container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value)
- 数值属性：携带css单位的数值(50px)
4.1. 单值语法：此时对应设置一个属性值的情况，第二个值默认是center（50%）
background-position:left;相当于left centerbackground-position:center;相当于center centerbackground-position:50px;相当于50px centerbackground-position:40%;相当于40% center
4.2. 双值语法：此时对应设置两个属性值的情况，一个值定义X轴位置，另一个值定义Y轴位置，默认值为：left top （0% 0%）
- 两个值的顺序问题：如果两个值都为关键字，则顺序不重要，left top 和top left的效果相同；如果两个值中存在length或percentage，则顺序很重要，第一个值必然是定义X轴位置，第二个值必然是定义Y轴位置，left 20px与20px left效果不同，且第二个是无效的，因为第二个值应该定义Y轴位置
background-position:right bottom;设置背景图在元素内的“右下方”background-position:20px 20px;设置背景图对应数值偏移background-position:20% 20%;设置背景图对应百分比偏移background-position:left 20%;设置背景图对应偏移background-position:20px top;设置背景图对应偏移background-position:top 20%;设置错误(无效，设为默认值left top)
4.3. 三值语法：此时对应设置三个属性值的情况，这三个属性值只可能是两个关键字值和一个数值或百分比，两个关键字定义X轴和Y轴位置，一个数值或百分比定义其前面的那个关键字所定义轴上的偏移量
background-position:left 30px top;设置x轴偏左并偏移30px,y轴偏上background-position:left top 30px;设置x轴偏左,y轴偏上并偏移30pxbackground-position:30px top 30px;设置无效，设为默认值background-position:30px left top;设置无效，设为默认值
4.4. 四值语法：此时对应设置四个属性值的情况，属性值只可能是：关键字、数值或百分比、关键字、数值或百分比，这一种情况。第一个和第三个值是定义X轴和Y轴方向的关键字，先后顺序可颠倒，第二个值和第三个值则是表示其前面那个值定义的轴上的偏移量
background-position:left 20px top 30px;设置背景图对应偏移background-position:left 20px top 50%;设置背景图对应偏移background-position:left top 40% 50px;设置无效，设为默认值
background-attachment背景图固定
background-attachment:scroll;默认，背景图跟随元素滚动background-attachment:fixed;背景图固定，不跟随元素滚动
background-size背景图大小
background-size:auto auto;默认，背景图原尺寸显示(第一个为宽，第二个为高)background-size:100px auto;宽为100px,高按原比例缩放background-size:100% 100%;宽高为背景区元素的宽高background-size:cover;按背景图的短边缩放覆盖整个元素，多出部分被裁剪background-size:contain;按背景图的长边缩放至最大，可能无法覆盖整个元素
background-clip背景的绘制区域
background-clip:border-box;默认，覆盖到边框区域(不过，一般边框都有颜色，会遮挡底色，边框设有透明度时会看到)background-clip:padding-box;覆盖到padding区域，不包含borderbackground-clip:content-box;仅覆盖内容区域，不包含padding和border
background-origin背景的定位区域
background-origin:border-box;开始于边框区域background-origin:padding-box;默认，开始于padding区域，不包含borderbackground-origin:content-box;开始于内容区域，不包含padding和border- 在设置背景为纯色时，设置属性值为任意值，其表现结果都一致，都是相对于border-box区域，这是因为此时背景的绘制区域background-clip取默认值border-box，而且background-position属性对背景颜色无效，所以background-origin定义的定位区域并不会影响到背景颜色覆盖区域
- 背景组合值
background9.1. 在组合值中由于clip,origin的值是一样的，所以在前的表示背景图片的开始位置，在后的表示背景颜色裁剪终点。（只有一个值表示同时控制）
9.2. 在组合值中由于position,size 都可以使用像素值等来设置，所以设置他们两个时需要以/分割，而不是以空格分割，否则会报错。然后在前的表示position，在后的表示size
9.3. 组合值中可以设置所有的背景属性，而且顺序基本上可以任意切换（position/size必须是一个整体）
background: red url("./oa.jpg") no-repeat center/cover content-box padding-box;
- 背景渐变
10.1. 线性渐变
background:linear-gradient(red,blue);默认从上到下(to bottom)
- 可改变渐变方向，‘to bottom’,‘to top’,‘to left’,‘to right’
background:linear-gradient(to right,red,blue);//从左到右background:linear-gradient(to right bottom,red,blue);//从左上到右下background:linear-gradient(180deg,red,blue);默认从上到下background:linear-gradient(red 30px, blue 50px,yellow 70px ,purple 90px);多个渐变节点- 1.如果第一个颜色渐变节点位置大于0，那么之前就是纯色（第一个颜色）
- 2.如果最后一个颜色渐变节点位置小于最大大小，那么之后就是纯色（最后一个颜色）
- 3.渐变节点位置可以使用百分比进行设置
- 4.如果用角度设置方向，正上方为0deg，即从下到上，角度顺时针增大
10.2. 重复的线性渐变
background:repeating-linear-gradient(red,blue 20%);
- 从上到下线性渐变到20%，再向下重复这个渐变，直到铺满元素。工作方式类似于 linear-gradient()，但是在达到指定的结束点之后，图像会重复自己。
10.3. 径向渐变
background:radial-gradient(shape size at position, start-color, …, last-color);
值 描述 shape 确定圆的类型：
ellipse（默认）：指定椭圆形的径向渐变
cricle：指定圆形的径向渐变size 定义渐变的大小，可能值：
farthest-conner（默认）：指定径向渐变的半径长度为从圆心到离心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边position 定义渐变的位置，可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
left、rightstart-color, …, last-color 用于指定渐变的起止颜色
- 以上总结下来就是，radial-gradient() 参数的组成部分主要包括五大部分：形状 、大小 、圆心位置 、颜色 、颜色位置
1.传入颜色
background: radial-gradient(red 0,yellow 50%);- 以 矩形中心点 为 圆心，矩形宽高 为 横纵向直径，50%之后是纯黄色
2.传入渐变形状参数background: radial-gradient(circle,red 0,yellow 50%);background: radial-gradient(ellipse,red 0,yellow 100%);
3.传入渐变大小参数- 3.1. 具体数值
background: radial-gradient(60px,red 0,yellow 100%);只传入一个大小参数，该渐变形状为圆，并且半径为60pxbackground: radial-gradient(50% 60px,red 0,yellow 100%);若传入两个大小不同的参数，这表示该渐变形状为椭圆- 也可以在声明渐变形状的同时在其后紧跟渐变大小
background: radial-gradient(circle 60px,red 0,yellow 100%);background: radial-gradient(ellipse 50% 60px,red 0,yellow 100%);- 需要注意的是：如果渐变形状为圆形，而我们设置的渐变大小构不成圆形，或者是我们设置的大小无法确定圆的半径的时候，则该函数会失效
- 3.2. 大小声明
- closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）background: radial-gradient(circle closest-side,#f00 0,#ff0 100%);
4.传入渐变圆心位置参数background: radial-gradient(circle farthest-side at 0 0,red 0%,yellow 100%);background: radial-gradient(circle farthest-side at top left,red 0,yellow 100%);background: radial-gradient(circle closest-side at center,red 0,yellow 100%);
10.4. 重复的径向渐变
background: repeating-radial-gradient(circle at center,red 0,red 10%,yellow 10%,yellow 20%);
6. 过渡"transition"
transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。
这个属性包含四个值：
- transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等
- transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位
- transition-timing-function: 指定过渡效果的速度曲线。它可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等
- transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位
transition: all 0.3s ease;
7. 动画"animation"
语法 animation: name duration timing-function delay iteration-count direction fill-mode play-state;
值 描述 animation-name 指定要绑定到选择器的关键帧的名称 animation-duration 动画指定需要多少秒或毫秒完成 animation-timing-function 设置动画将如何完成一个周期 animation-delay 设置动画在启动前的延迟间隔。 animation-iteration-count 定义动画的播放次数。 animation-direction 指定是否应该轮流反向播放动画。 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-play-state 指定动画是否正在运行或已暂停。
使用@keyframes规则，创建动画
@keyframes animationname {keyframes-selector {css-styles;}}
@keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
div{
animation-name: mymove;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
//简写
animation: mymove 5s linear 2s infinite alternate;
}
1099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
