总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是T型人才
学习这个是为了成为更好ai驾驶员
css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛
欢迎来我的网站观赏听歌：铃仙酱
建议用电脑打开，手机不会适配。
一、CSS 基础与选择器
1. CSS 的引入方式
在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了外链式，配合少量的行内式。
引入方式语法示例特点适用场景外链式结构与样式分离，代码清晰，可复用正式项目开发行内式权重高，但代码混乱，难以维护临时测试或极少量的样式修正 (如 Footer)内嵌式写在 head 中，不推荐用于大项目单页面练习2. 选择器 (Selectors)
为了精准地控制页面上的元素，需要用到选择器。
选择器类型符号示例说明权重 (优先级)标签选择器无body {}, img {}选中页面所有同名标签低 (1)类选择器..theInf {}选中所有 的元素 (最常用)中 (10)ID 选择器##ND {}选中唯一 id="ND" 的元素 (如那张特写的图)高 (100)后代选择器空格.theInf img {}选中 .theInf 内部所有的 img叠加计算伪类选择器::hover鼠标悬停时的状态-二、布局
这是今天最大的收获。以前排版可能需要用 float 清除浮动，现在用 Flex 可以轻松实现从左到右、从上到下的排列。
1. 开启 Flex 布局
只要给父盒子加上 display: flex;，它就变成了“弹性容器”。
2. 关键属性详解
我在 .theInf (个人信息区) 和 .theMusic (音乐区) 中使用了不同的排列方式。
属性名作用常用值我的代码应用flex-direction决定主轴方向 (排列方向)row (默认，横向) column (纵向) row-reverse (反向).theInf: 默认 row (左图右字) .theMusic: column (垂直居中)justify-content主轴上的对齐方式flex-start (靠左/上) center (居中) space-between (两端对齐).theInf: center (整体居中)align-items侧轴上的对齐方式center (垂直居中) stretch (拉伸).theMusic: center (防止子元素宽度占满)代码实战分析：- /* 音乐区：垂直排列，所有内容居中 */
- .theMusic {
- display: flex; /* 开启弹性布局 */
- flex-direction: column; /* 变成竖着排 */
- align-items: center; /* 左右居中 */
- }
为了让网页不只是“能看”，而是“好看”，我使用了以下高级属性。
1. 盒子阴影 (Box-Shadow)
给图片添加发光效果（如代码中的 #ND 诺登图），我使用了多层阴影叠加技术。
语法： box-shadow: h-shadow v-shadow blur spread color;
参数位置参数含义作用第 1 个水平偏移正数向右，负数向左第 2 个垂直偏移正数向下，负数向上第 3 个模糊半径值越大，边缘越模糊 (羽化)第 4 个扩展半径值越大，阴影面积越大第 5 个颜色支持 rgba(r, g, b, alpha) 透明度实战代码 (霓虹灯发光效果)：- #ND {
- box-shadow:
- 0 0 10px 2px rgba(0, 255, 127, 0.8), /* 第一层：高亮核心 */
- 0 0 30px 10px rgba(0, 255, 127, 0.5), /* 第二层：中间光晕 */
- 0 0 60px 20px rgba(0, 255, 127, 0.2); /* 第三层：外部氛围 */
- }
不再使用单一的 background-color，而是使用 linear-gradient。
- 语法：background: linear-gradient(方向, 颜色1, 颜色2);
- 应用：
- body: to right bottom (右下角方向) 的粉色渐变。
- .theMusic: 使用了 rgba(255,255,255,0) 实现了半透明渐变背景。
3. 过渡与动画 (Transition & Transform)
给 .theInf img 添加了鼠标悬停互动的效果。
- Transition (过渡)：transition: all 0.3s; (让变化过程持续 0.3秒，而不是瞬间完成)。
- Transform (变换)：
- translateY(-5px): 向上位移 5 像素。
- 配合 box-shadow 变化，产生“浮起”的立体感。
四、进阶难点：CSS 遮罩与负边距
这是本次代码中最复杂的部分，用于实现音乐歌词的“文字重叠与渐变消失”效果。
1. CSS Mask (遮罩)
利用 -webkit-mask-image 实现文字“渐隐”。
属性说明原理-webkit-mask-image设置遮罩图片或渐变遮罩层中：黑色/不透明 = 显示内容 透明 = 隐藏内容实战逻辑：
- .txt-up: 遮罩从黑色到透明 (to bottom) -> 下半部分消失。
- .txt-down: 遮罩从透明到黑色 (to bottom) -> 上半部分消失。
2. 负边距 (Negative Margin)
为了让两行文字看上去像是一个整体被切开了，需要让它们重叠。
- 技巧：margin-top: -35px;
- 作用：强行将下方的元素向上拉动，覆盖在上方元素的区域内。
- 注意：使用负边距时，通常需要配合 position: relative 和 z-index 来确保层级正确，防止被覆盖无法显示。
五、常用样式属性速查表
在今天的代码中，我还使用了大量的排版属性，整理如下：
类别属性名含义示例值字体font-family字体族'Courier New', monospacefont-weight粗细bold (粗), 100 (极细)letter-spacing字间距10px (拉开字母距离)line-height行高1.5 (倍数), 50px (垂直居中常用)图片object-fit图片填充模式cover (裁剪铺满), contain (完整显示)border-radius圆角50% (正圆形), 20px (圆角矩形)盒模型padding内边距内容与边框的距离margin外边距盒子与其他盒子的距离width / height宽/高100%, 300px, 100vh (视口高度)学习心得
html是一个复杂的东西，虽然有ai在，但是如果不彻底学习的话，是永远做不出我想象的东西
作为一名开发者，创造即是核心，如果全部丢给ai，终归是泯然众人
css学习才刚入门，还有更多的东西等待我去发掘，理想中的东西就是难做啊
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
