2026年4月28日Web前端课堂笔记

一、CSS文本外观属性汇总
本节课重点讲解了控制文本显示效果的核心CSS属性，这些属性直接影响网页文字的排版与可读性。
属性名 作用说明 常用取值
color 设置文本颜色 颜色名/十六进制/RGB值
letter-spacing 字符间距控制 像素值(px)/em
word-spacing 单词间距控制 像素值(px)/em
line-height 行高设置 数字/像素值/百分比
text-align 文本水平对齐 left/center/right/justify
text-transform 文本大小写转换 uppercase/lowercase/capitalize
text-decoration 文本修饰线 none/underline/overline/line-through
text-indent 首行缩进 像素值/em
white-space 空白与换行控制 nowrap/pre/normal
text-shadow 文本阴影效果 h-shadow v-shadow blur color
text-overflow 文本溢出处理 clip/ellipsis
word-wrap 长单词换行控制 normal/break-word

二、核心知识点1：文本折叠省略号效果

1. 单行文本省略号实现
   当文本超出容器宽度时，自动隐藏溢出部分并显示省略号，是列表、新闻标题的常用效果。
   /* 核心三属性+宽度约束 /
   .ellipsis-single {
   width: 200px; / 必须设置固定宽度 /
   white-space: nowrap; / 强制文本单行显示 /
   overflow: hidden; / 溢出内容隐藏 /
   text-overflow: ellipsis; / 溢出部分显示省略号 */
   }
2. 多行文本省略号实现（webkit兼容方案）
   .ellipsis-multi {
   display: -webkit-box;
   -webkit-line-clamp: 3; /* 限制显示行数 */
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   }
   三、核心知识点2：JS动态更改元素样式
   通过JavaScript控制DOM元素的类名或内联样式，实现点击切换颜色、状态变化等交互效果。
3. 基础示例：点击按钮切换背景色

点击按钮改变背景颜色

切换颜色

2. 实现原理
   • 通过getElementsByTagName获取DOM元素集合

• 利用className属性直接修改元素的类名，关联预定义的CSS样式

• 也可通过element.style.属性名直接修改内联样式，优先级更高
四、课堂代码片段整理
/* 全局样式重置 */

div {
margin: 0 auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
}

.red { background-color: red; }
.blue { background-color: blue; }

button { width: 100px; }