内容 Content
- Lorem ipsum dolor sit.
- Aperiam beatae odit consectetur?
- Consectetur amet repellat error?
- Cum, delectus deserunt? Magni.
- Atque illum reiciendis ut.
#ff4400 #FF4400 #f40
. 不带透明色
rgb(255, 68, 0)
. 带透明色
rgb(255, 68, 0, 1) rgb(255, 68, 0, .8) rgb(255, 68, 0, 0.8)
padding
padding-top
padding-right
padding-bottom
padding-left
. 1个数值：上 右 下 左都是10px
padding: 10px;
. 2个数值：上下 10px；左右 20px
padding: 10px 20px;
. 3个数值：上 10px；左右 20px； 下 10px
padding: 10px 20px 10px;
. 4个数值：上 10px；右 20px；下 10px；左 20px
padding: 10px 20px 10px 20px;
border
border-top
border-right
border-bottom
border-left
border:border-width border-style border-color;
border-left-width
border-left-style
border-left-color
margin
margin-top
margin-right
margin-bottom
margin-left
| item | desc |
|---|---|
| font-family | 字体家族；通常为一个系列 英文优先；先写英文字体，再写中文字体 |
| font-size | 字体大小 |
| font-weight | 字体重量/加粗；关键字，如 light 300、normal 400、bold 600；推荐使用数字 100 - 900 |
| font | 以上3个属性的复合写法 |
| color | 字体颜色 |
| line-height | 行高；通常指定1.5倍行高，易于阅读；PC端通常指定为字体大小+8px的行高；可用于单行文本的垂直方向居中 |
| letter-spacing | 字符间距；通常使用 em 单位；对中文有效 |
| word-spacing | 字间距；通常使用 em 单位；适用于英文，对中文影响较小 |
| hyphens | 对英文来说，添加连字符的方式，一般选择 auto，更为紧密 |
| text-indent | 文本缩进；2em |
| text-align | 文本对齐：默认left；right | center | justify |
| text-align-last | 末尾文本对齐方式；特别适合单行时，字符个数不同时的两端对齐 |
| text-transform | 文字变化，首字大写 capitalize | 大写 uppercase | 小写 lowercase；适用于英文 |
| text-decoration | 线条修饰：下划线 underline、上划线 overline、删除线 line-through；<del>也可以实现删除效果 |
| text-overflow | 文字溢出处理 |
| white-space | 空白字符处理，换号、不换行等 |
| vertical-align | 行内文本对齐方式：baseline | middle | top | bottom |
| writing-mode | 文字方向，如古文的从右到左 vertical-rl |
| text-shadow | 文字阴影，默认是文字颜色；可以多次叠加，以逗号,区分；更多阴影使用，请访问 盒阴影、滤镜 |
| text-stroke | 文字描边颜色和宽度；部分浏览器不支持；建议使用 SVG 实现 |
font-family: "Poppins", "Microsoft YaHei", "微软雅黑", Helvetica, sans-serif;
input,
textarea,
select,
button {
font: inherit;
}
@font-face {
font-family: font_name;
src: url(font_url);
font-weight: normal;
font-style: normal;
font-display: swap;/*先默认字体显式，当字体加载完毕再切换*/
}
| item | desc |
|---|---|
| column-width | 最小列宽，由浏览器决定分成多少列；不能使用% |
| column-count | 最大列数/栏数 |
| columns | 复合属性：column-width column-count；根据宽度或列数布局；顺序任意 |
| column-span | 分列元素的跨度，all 通栏，如标题 |
| column-gap | 列间隔；默认是16px |
| column-rule | 分隔符样式，同 border |
| column-fill | 填充模式，默认是平均填充 balance，也可以指定 auto，逐列填充；通常需指定容器高度 |
.ellipsis {
width: 250px;/*容器宽度*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.gran-txt {
font-size: 3.4rem;
text-align: center;
background-image: linear-gradient(90deg, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee);
background-clip: text;
color: transparent;
width: max-content;
margin: 0 auto;
}