CSS-进阶

CSS-进阶

Wreckloud_雲之残骸 Lv4
  2025-04-18 12:13:32 2025-04-18 12:13:32 创建   2025-04-19 20:31 2025-04-19 20:31 更新    2.4k 字  9 分钟  

CSS 网页实战入门

1
2
3
4
5
6
7
8
9
study（网站根目录）
├── images
│   ├── logo.png        # 固定素材（logo等）
│   └── ...
├── uploads             # 非固定素材（商品图片等）
├── css
│   ├── base.css       # 基础公共样式
│   └── index.css      # 首页样式
└── index.html         # 首页文件

网页制作三大步骤

布局思路

  • 先整体后局部 → 从外到内 → 从上到下 → 从左到右

CSS 实现步骤

  1. 画盒子：设置宽高、背景色定位元素范围
  2. 定位盒子：使用 flex 布局/边距调整位置
  3. 填充内容：控制文字/图片样式

对齐属性

属性 适用场景 示例值
justify-content 主轴对齐（flex 容器） space-between / center
align-items 交叉轴对齐（flex 容器） center / stretch
align-self 单个元素交叉轴对齐（flex 子项） center / flex-start
vertical-align 行内/表格元素垂直对齐 middle / top

实用技巧

  1. 清除默认样式（base.css 示例）：
1
2
3
4
5
6
7
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul { list-style: none; }
a { text-decoration: none; color: #333; }
  1. flex 布局速记：
1
2
3
4
5
6
.container {
  display: flex;
  justify-content: space-between; /* 主轴两端对齐 */
  align-items: center;   /* 交叉轴居中 */
  flex-wrap: wrap;       /* 允许换行 */
}
  1. 图片处理原则：
  • 固定尺寸使用<img>标签
  • 背景图使用 CSS 背景属性
  • 重要图片必须添加 alt 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 网页SEO核心标签详解 -->

<head>
  <!-- 网页标题 → 搜索结果显示的第一行 -->
  <title>品牌名-核心服务/产品 | 副标题（≤30字）</title>

  <!-- 网页描述 → 搜索结果展示的摘要 -->
  <meta name="description"
        content="网站主要服务说明，包含2-3个关键词，建议≤150字">

  <!-- 网页关键词 → 搜索引擎分类依据 -->
  <meta name="keywords"
        content="主关键词,次级关键词,长尾词（8个以内，逗号分隔）">
</head>

SEO 优化

搜索引擎优化（SEO）通过技术手段提升网站在自然搜索结果中的排名。
其中标签语义化是基础策略，要求开发者根据内容含义选择 HTML 标签（例如用<h1>表示主标题而非仅用<div>），这能帮助爬虫快速理解网页结构。

三大核心元标签

  • 标题标签<title>

作为网页身份标识，应简明突出核心信息。
避免堆砌关键词，保持品牌与主题的平衡。例如电商网站可采用<title>小米商城-小米手机|红米电视官网直营</title>的结构。

  • 描述标签description
    如同网页简历，需用自然语言概括内容价值。优质描述能提升点击率，例如：
1
2
<meta name="description"
      content="小米商城直营小米手机、红米电视、智能家居等全系产品，正品保障，7天无理由退货">
  • 关键词标签keywords
    建议选择用户搜索概率高的词汇，注意避免：
1
2
3
4
5
<!-- 错误示例 → 关键词堆砌 -->
<meta name="keywords" content="手机,智能手机,小米手机,便宜手机">

<!-- 正确示例 → 逻辑关联词 -->
<meta name="keywords" content="小米12S,旗舰手机,骁龙处理器,徕卡影像">

关联优化技巧

  • 文件扩展名优化：采用.html后缀而非.php等动态页面标识
  • 内容与标签一致性：确保页面实际内容包含元标签声明的关键词
  • 移动端适配：添加viewport元标签提升移动搜索排名
1
2
<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

SEO 标签需与页面内容高度契合，避免为优化而牺牲用户体验。

CSS 动画

平面转换效果

transform 一般配合过渡效果使用. 能改变盒子在平面内的形态.

属性值 效果
translate (X 轴距离,Y 轴距离) 位移效果 (百分比取值参照自身取值)
rotate (旋转角度 $deg$) 旋转效果
scale(缩放倍数)
scale(X 缩放倍数,Y 缩放倍数)		 缩放效果, 取值大于 1 为放大, 反之缩小
skew (倾斜角度 $deg$) 倾斜效果

改变转换原点

默认情况下, 转换原点是盒子中心点.

transform-Origin : 水平原点位置 垂直原点位置;

取值:

  • 方位名词(left, top, right, bottom, center)
  • 像素单位数值
  • 百分比

渐变

渐变是多个颜色逐渐变化的效果, 一般用于设置盒子背景.

  • 线性渐变
1
2
3
4
5
6
background-image: linear-gradient(
    渐变方向(to 方位名词/角度度数 deg),
    颜色1 终点位置(百分比),
    颜色2 终点位置,
    ......
);
  • 径向渐变
1
2
3
4
5
6
7
8
background-image: radial-gradient(
    半径 at 圆心位置(像素单位数值/百分比/方位名词),
    (半径两条为椭圆),
    颜色1 终点位置,
    颜色2 终点位置,
    ......
);

动画效果

从坐标轴角度定义了 X, Y 和 Z 三条坐标轴构成了一个立体空间,
Z 轴方向与视线方向相反.x 轴方向向右,y 轴向下.

形式上讲, 动画效果就是加强版的 transation 过度属性.

视距属性

perspective

指定了观察者与 z=0 平面的距离, 为元素添加透视效果.
属性添加给父级, 取值范围 800-1200.

空间转换

transform
能改变盒子在空间内的形态.

属性值 效果
translate3d (X 轴距离,Y 轴距离,Z 轴距离)
translate[X/Y/Z]		 位移效果 (百分比取值参照自身取值)
小括号三个数据必须一个不差, 否则不生效.
rotate (旋转角度 $deg$)
rotate[X/Y/Z]		 旋转效果
scale(缩放倍数)
scale(X 缩放倍数,Y 缩放倍数,Z 轴距离)
scale[X/Y/Z]		 缩放效果, 取值大于 1 为放大, 反之缩小
skew (倾斜角度 $deg$) 倾斜效果

动画

animation

动画能实现多个状态间的变化过程, 动画过程可控(重复, 最终画面, 是否暂停)

@keyframes 创建动画

1
2
3
4
5
6
7
8
9
10
11
@keyframes 动画的名称 {
 from|0%{
 css样式
    }
 多个百分比值{
 css样式
    }
 to|100%{
 css样式
    }
 }

animation 执行动画

1
animation: 动画名称 持续时间 动画速率 开始延迟 循环次数(infinite-无限循环) 播放方向 播放状态( running-播放 | paused-暂停 );
动画速率可选值 描述
ease 逐渐变慢(默认)
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速

播放方向可选值 | 描述
normal|向前播放(默认)
alternate|动画播放在第偶数次向前播放, 第奇数次向反方向播放

立体呈现

transform-style
设置元素的子元素是位于 3D 空间还是平面.

属性值 效果
flat 子级处于平面中
preserve-3d 子级处于 3D 空间
  1. 父元素添加 transform-style: preserve-3d
  2. 子级定位
  3. 调整盒子的位置(位移或选择)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 网页SEO核心标签详解 -->

<head>
  <!-- 网页标题 → 搜索结果显示的第一行 -->
  <title>品牌名-核心服务/产品 | 副标题（≤30字）</title>

  <!-- 网页描述 → 搜索结果展示的摘要 -->
  <meta name="description"
        content="网站主要服务说明，包含2-3个关键词，建议≤150字">

  <!-- 网页关键词 → 搜索引擎分类依据 -->
  <meta name="keywords"
        content="主关键词,次级关键词,长尾词（8个以内，逗号分隔）">
</head>

SEO 优化基本原理

搜索引擎优化（SEO）通过技术手段提升网站在自然搜索结果中的排名。其中标签语义化是基础策略，要求开发者根据内容含义选择 HTML 标签（例如用<h1>表示主标题而非仅用<div>），这能帮助爬虫快速理解网页结构。

三大核心元标签

标题标签<title>作为网页身份标识，应简明突出核心信息。避免堆砌关键词，保持品牌与主题的平衡。例如电商网站可采用<title>小米商城-小米手机|红米电视官网直营</title>的结构。

描述标签description如同网页简历，需用自然语言概括内容价值。优质描述能提升点击率，例如：

1
2
<meta name="description"
      content="小米商城直营小米手机、红米电视、智能家居等全系产品，正品保障，7天无理由退货">

关键词标签keywords建议选择用户搜索概率高的词汇，注意避免：

1
2
3
4
5
<!-- 错误示例 → 关键词堆砌 -->
<meta name="keywords" content="手机,智能手机,小米手机,便宜手机">

<!-- 正确示例 → 逻辑关联词 -->
<meta name="keywords" content="小米12S,旗舰手机,骁龙处理器,徕卡影像">

关联优化技巧

  • 文件扩展名优化：采用.html后缀而非.php等动态页面标识
  • 内容与标签一致性：确保页面实际内容包含元标签声明的关键词
  • 移动端适配：添加viewport元标签提升移动搜索排名
1
2
<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

核心实践原则：SEO 标签需与页面内容高度契合，避免为优化而牺牲用户体验。定期通过百度搜索资源平台检测标签有效性。

不同设备自适应

适配方案
宽度适配：宽度自适应
□百分比布局
□Flex布局
等比适配：宽高等比缩放
□rem
□vw

视口
视口：显示 HTML 网页的区域，用来约束 HTML 尺寸

Document width=device-width：视口宽度=设备宽度 initial-scale=1.0:缩放1倍（不缩放）

设置 meta 标签

使用设备的宽度作为视图宽度并禁止初始的缩放.
在 <head> 标签里加入这个 meta 标签:

1
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  • width = device-width 宽度等于当前设备的宽度
  • initial-scale 初始的缩放比例（默认设置为 1.0）
  • maximum-scale 允许用户缩放到的最大比例（默认设置为 1.0）
  • user-scalable 用户是否可以手动缩放（默认设置为 no）

例如, 要设置不同尺寸设备下网页样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
    }
 }

@media screen and (max-width: 992px) and (min-width: 768px) {
 /* 设备小于768px但小于992px加载样式  */
    body{
        background-color: pink;
    }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
        background-color: green;
    }
}

rem 适配方案

rem
rem单位，是相对单位
rem单位是相对于HTML标签的字号计算结果
1rem=1HTML字号大小

媒体查询
思考
手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
□媒体查询
媒体查询能够检测视口的宽度，然后编军差异化的CSS样式
当某个条件成立，执行对应的CSS样式

@media（媒体特性）
选择器
CSS属性

思考
设备宽度不同，HTML标签字号设置多少合适？
设备宽度大，元素尺寸大
口设备宽度小，元素尺寸小

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10

rem - flexible.js
flexible.js是手淘开发出的一个用来适配移动端的js库。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

### less

Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性计算能力
注意：浏览器不识别LeSs代码，目前阶段，网页要引I入对应的CSS文件
VSCode插件：EasyLESS，保存less文件后自动生成对应的CSS文件

less-运算
运算：
●加、减、乘直接书写计算表达式
除法需要添加小括号或.

less-嵌套
作用：快速生成后代选择器

.父级选择器{
//父级样式
.子级选择器{
//子级样式

less-变量
概念：容器，存储数据
1/定义变量
作用：存储数据，方便使用和修改@myColor: pink;
语法：使用变量
》定义变量：@变量名：数据；.box{
color:@myColor;

使用变量：CSS属性：@变量名；
color:@mycolor;

less-导入
作用：导入less公共样式文件
语法：导入：@import“文件路径”；
提示：如果是less文件可以省略后缀
@import ‘./base.less’;
@import’./common’;

less-导出
写法：在less文件的第一行添加//out:存储URL
提示：文件夹名称后面添加/
2out:./index.css
out:./css/

less-禁止导出
base.lesscommon.lessindex.less
写法：在les
s文件第一行添加：//out:false
1/1out:false

  • 标题: CSS-进阶
  • 作者: Wreckloud_雲之残骸
  • 创建于 : 2025-04-18 12:13:32
  • 更新于 : 2025-04-19 20:00:31
  • 链接: https://www.wreckloud.com/2025/04/18/猎识印记-领域/软件工程/前端/CSS-进阶/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
CSS-进阶
  1. CSS 网页实战入门
    1. 对齐属性
    2. 实用技巧
  • SEO 优化
    1. 三大核心元标签
    2. 关联优化技巧
  • CSS 动画
    1. 平面转换效果
    2. 渐变
    3. 动画效果
    4. 视距属性
    5. 空间转换
  • 动画
    1. @keyframes 创建动画
    2. animation 执行动画
    3. 立体呈现
    4. SEO 优化基本原理
    5. 三大核心元标签
    6. 关联优化技巧
  • 不同设备自适应
    1. rem 适配方案