MISY350 CSS3 复习笔记（代码版）

1. CSS 基础 & 三种写法（优先级：内联 > 嵌入 > 外部）

CSS 优势：分离内容与展示 | 全站统一风格 | 减少网络传输 | 跨设备适配 | 更好的可访问性

/* ① Inline（内联样式）——只作用于当前元素，最高优先级，不推荐 */
<!-- HTML 中写法：-->
<p style="font-size: 20pt; color: deepskyblue;">内联样式示例</p>

/* ② Embedded（嵌入样式）——写在 <head> 的 <style> 标签内，作用于整个页面 */
<head>
    <style>
        h1 { text-align: center; }
        p  { color: deepskyblue; }
    </style>
</head>

/* ③ External（外部样式表）——推荐！link 标签引入独立 .css 文件，可作用于整站 */
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

2. 选择器（Selectors）

/* 元素选择器：选中所有该类型元素 */
p { color: blue; }

/* 多元素选择器：同时作用于多个元素（逗号分隔） */
h1, p { font-family: Arial, Helvetica, sans-serif; }

/* 后代选择器：选中 ul 内所有 li（空格分隔） */
ul li { font-size: 18px; }

/* ID 选择器：# 前缀，唯一，一个页面一个 id */
#logo { width: 200px; height: 100px; }
#wholebread { font-size: smaller; }

/* Class 选择器：. 前缀，可复用，多个元素可共用同一 class */
.nodec { text-decoration: none; }   /* 无下划线 */
.desc  { font-size: 20px; color: #ffa600; }

/* 元素+类选择器：只选中带该 class 的特定元素 */
a.nodec { font-weight: bolder; }

/* 伪类选择器（Pseudo Class）：访问 HTML 未声明的信息
   常见：:hover（鼠标悬停）:visited（已访问链接）:link（未访问链接） */
a:hover        { text-decoration: none; }
a.nodec:hover  { text-decoration: none; }   /* 元素+类+伪类组合 */

3. 样式冲突解决（Cascading Rule）

优先级从高到低： 内联样式（inline） > 嵌入/外部样式中：ID 选择器 > class 选择器 > 元素选择器 > 作者（开发者）样式 > 用户样式 > 浏览器默认样式（user agent）

规则	说明
继承（Inheritance）	父元素的样式默认被子元素继承（如 font、color）
特异性（Specificity）	子元素自定义样式 > 继承自父元素的样式
作者 > 用户 > 浏览器	开发者写的样式优先于用户设置，再优先于浏览器默认
级联（Cascade）	多个样式来源合并，最终效果是多方样式叠加的结果

4. Font & Text 属性

/* font-weight：字体粗细 */
p {
    font-weight: bold;     /* bold / normal / bolder / lighter */
    font-weight: 700;      /* 数字 100-900，700 = bold，400 = normal */
}

/* font-family：字体，后备字体从左到右依次尝试 */
body {
    font-family: Arial, Helvetica, sans-serif;  /* 推荐（跨平台安全字体） */
    /* Times New Roman 已过时，不推荐 */
}

/* font-size：字体大小，推荐相对单位（更灵活） */
p {
    font-size: 20px;     /* 像素（绝对） */
    font-size: 1.5em;   /* em：相对于父元素字号（字母M的大小） */
    font-size: 1rem;    /* rem：相对于根元素（html）字号 */
    font-size: large;   /* 关键字：xx-small, x-small, small, medium, large, x-large, xx-large */
    font-size: smaller; /* smaller / larger：相对于父元素大小 */
    /* 单位：px | em | ex | in | cm */
    /* 格式：数字 + 单位之间无空格，如 0.4em，20pt */
}

/* font-style：斜体 */
em { font-style: italic; }   /* none | italic | oblique */

/* text-decoration：文字装饰 */
a      { text-decoration: underline; }    /* underline | overline | line-through | blink */
.nodec { text-decoration: none; }         /* 去掉链接下划线的常用技巧 */

/* color：文字颜色（多种写法） */
h1 {
    color: deepskyblue;           /* 关键字 */
    color: #ffa600;              /* 6位十六进制 */
    color: #06f;                 /* 3位十六进制，等于 #0066ff */
    color: rgb(255, 166, 0);     /* RGB整数 */
    color: rgb(100%, 65%, 0%);   /* RGB百分比 */
    color: rgba(215, 9, 222, 0.869);  /* RGBA：第4个参数是透明度 0~1 */
}

/* text-align：水平对齐 */
h1 { text-align: center; }   /* left | center | right */

/* text-indent：首行缩进 */
p { text-indent: 2em; }   /* 缩进2个字符宽度 */

Font/Text 属性演示

font-weight:bold + color:deepskyblue + font-size:18px

font-style:italic + color:#ffa600

text-decoration:line-through + font-family:Georgia

text-align:center + text-indent:2em

5. Box Model（盒模型）

Box Model 只适用于 Block-level 元素（body, p, h1~h6, div, table, form 等）。Inline 元素无盒模型，但可通过 display: block 转换。

/* Box Model 结构（从内到外）：
   ┌─────────────────────────────────┐
   │          margin（外边距）        │  ← 元素边框与外部其他内容的距离
   │  ┌───────────────────────────┐  │
   │  │        border（边框）      │  │  ← 元素边框
   │  │  ┌─────────────────────┐  │  │
   │  │  │    padding（内边距）  │  │  │  ← 内容与边框的距离
   │  │  │  ┌───────────────┐  │  │  │
   │  │  │  │  content（内容）│  │  │  │
   │  │  │  └───────────────┘  │  │  │
   │  │  └─────────────────────┘  │  │
   │  └───────────────────────────┘  │
   └─────────────────────────────────┘ */

.box {
    /* padding：内边距（内容到边框的距离），4种写法 */
    padding: 10px;                    /* 四边相同 */
    padding: 10px 20px;               /* 上下10px，左右20px */
    padding: 10px 20px 15px 5px;      /* 上 右 下 左（顺时针） */
    padding-top: 10px;                /* 单独设置某一边 */
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 5px;

    /* border：边框，分 width / style / color 三个子属性 */
    border-width: 2px;               /* 宽度：数值 or thin / medium / thick */
    border-style: solid;             /* none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset */
    border-color: #333;             /* 颜色 */
    border: 2px solid #333;          /* 简写：width style color */

    /* margin：外边距（元素边框到外部内容的距离），写法同 padding */
    margin: 20px auto;               /* auto 常用于水平居中块元素 */
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
}

Box Model 可视化

内容 content

← padding（粉红区域）→

红色实线 = border | 粉红背景区域 = padding | 元素外的间距 = margin

display: block 让 inline 元素表现为 block：

这里有个 span 变成了 block 元素的例子。

6. 定位（Positioning）

/* Relative Positioning（相对定位）
   元素相对于自身正常位置偏移，不脱离文档流
   HTML 元素默认从上到下、从左到右排列（就是相对定位的默认流） */
.relative-box {
    position: relative;
    top: 10px;    /* 向下偏移 10px（相对于原始位置） */
    left: 20px;   /* 向右偏移 20px */
}

/* Absolute Positioning（绝对定位）
   脱离文档流，其他元素当它不存在
   位置相对于最近的 positioned（非static）祖先元素 */
.absolute-box {
    position: absolute;
    top: 50px;     /* 距父元素上边 50px */
    left: 100px;   /* 距父元素左边 100px */
    /* 也可用 right / bottom */
}

/* z-index：控制重叠层叠顺序，数值越大越靠前 */
.front { position: absolute; z-index: 10; }   /* 显示在最前 */
.back  { position: absolute; z-index: 1;  }   /* 显示在后面 */

Positioning 可视化

absolute: top:10px left:10px

z-index:2（在前）

z-index:1（在后）

7. Background 属性

.hero {
    background-color: #e8f4fd;            /* 背景颜色 */

    background-image: url(image.png);      /* 背景图片 */

    background-repeat: no-repeat;          /* 不平铺（显示一张） */
    background-repeat: repeat;             /* 横竖都平铺（默认） */
    background-repeat: repeat-x;          /* 只横向平铺 */
    background-repeat: repeat-y;          /* 只纵向平铺 */

    background-position: center top;       /* 位置：top/bottom/center/left/right 组合 */
    background-position: 50% 20px;         /* 也可用长度值或百分比 */
}

背景演示

background-color + 图案背景

8. text-shadow & box-shadow

/* text-shadow：文字阴影
   语法：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色; */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.glow { text-shadow: 0 0 10px deepskyblue; }   /* 发光效果 */

/* box-shadow：块级元素阴影
   语法：box-shadow: 水平偏移 垂直偏移 模糊半径 颜色;
   也可加第4个长度值（spread radius 扩展半径）*/
h1 { box-shadow: 25px 25px 50px dimgrey; }
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }  /* 常见卡片阴影 */

阴影效果演示

text-shadow: 3px 3px 6px

box-shadow: 0 4px 12px（卡片阴影）

box-shadow: 25px 25px 50px dimgrey（PPT 示例）

9. CSS Animation

CSS 动画不需要 JavaScript 或 Flash。需要两部分配合：
① 元素上写 animation 属性（告诉浏览器什么动画、怎么播）
② 用 @keyframes 规则定义动画的具体过程

9.1 animation 属性

/* 语法：animation: name timing-function duration delay iteration-count direction;
   参数：   动画名  缓动函数         持续时长  延迟  循环次数            方向   */

.sliding-animation {
    animation: slideIn ease-in-out 2s 0.5s infinite alternate;
    /* name:             slideIn — 动画名称，对应 @keyframes 的名字
       timing-function:  ease-in-out — 缓动函数（其他：linear, ease, ease-in, ease-out, cubic-bezier 等）
       duration:         2s — 每次动画持续的时间
       delay:            0.5s — 页面加载后延迟多久才开始
       iteration-count:  infinite — 播放次数（也可以是具体数字，如 3）
       direction:        alternate — 方向（normal 正播一次，alternate 正反交替） */
}

9.2 @keyframes 规则

/* @keyframes 定义动画的各阶段状态
   from = 0%（起始状态）   to = 100%（结束状态）
   也可以用百分比来定义中间步骤 */

@keyframes slideIn {
    from { margin-left: 0px;   background-color: white; }
    to   { margin-left: 300px; background-color: deepskyblue; }
}

@keyframes colorChange {
    0%   { background-color: red; }
    100% { background-color: yellow; }
}

/* 多阶段动画：可在中间任意百分比位置插入关键帧 */
@keyframes bounce {
    0%   { top: 0px; }
    50%  { top: 100px; }
    100% { top: 0px; }
}

9.3 浏览器前缀（Vendor Prefixes）

某些 CSS 扩展只兼容特定浏览器，为兼容旧版浏览器需要加前缀：
-webkit- → Chrome、Safari、Android、iOS（Webkit 内核）
-moz- → Mozilla Firefox
-ms- → Microsoft IE / Edge（旧版）
标准写法放最后，确保新浏览器使用标准属性。

/* 浏览器前缀写法：标准属性放最后 */
.box {
    -webkit-animation: slideIn 2s infinite;   /* Chrome / Safari */
    -moz-animation:    slideIn 2s infinite;   /* Firefox */
    -ms-animation:     slideIn 2s infinite;   /* IE / Edge（旧版） */
    animation:         slideIn 2s infinite;   /* 标准写法 */
}

动画演示

slideIn：from → to，alternate 正反交替

slide

spin（旋转）+ bounce（弹跳）：

10. 综合速查表

属性	常用值	备注
font-weight	bold / normal / bolder / lighter / 100~900	700=bold, 400=normal
font-size	px / em / rem / % / small / large / smaller	推荐相对单位
font-style	normal / italic / oblique
font-family	Arial, Helvetica, sans-serif	逗号后备字体，泛类写最后
text-decoration	none / underline / overline / line-through / blink
color	keyword / #hex / rgb() / rgba()	#06f = #0066ff
text-align	left / center / right
text-indent	2em / 20px	仅缩进首行
padding	上右下左顺时针	内容到边框
margin	上右下左顺时针 / auto	边框到外部
border	width style color 简写	style必须存在
position	static / relative / absolute	absolute 脱离文档流
z-index	数字（越大越靠前）	需配合 position 使用
background-repeat	repeat / no-repeat / repeat-x / repeat-y
background-position	top/bottom/center/left/right 或 px/%
text-shadow	水平垂直模糊颜色
box-shadow	水平垂直模糊颜色	仅 block-level
animation	name timing duration delay count direction	配合 @keyframes
display	block / inline / inline-block / none	可改变元素展示方式