CSS3速成

---

本文主要是狂神CSS3视频的笔记。

一、CSS是什么？

如何学习

• CSS是什么
• CSS怎么用（快速入门）
• CSS选择器（重点+难点）
• 美化网页（文字、阴影、超链接、列表、渐变…）
• 盒子模型
• 浮动
• 定位
• 网页动画（特效效果）

推荐学习网站

• FreeCodeCamp（强推👍）
• 菜鸟教程
• W3school

推荐素材网站    (很多情况下直接找现成的网页模板就行)

• Element组件库
• 飞冰组件库

1 什么是CSS

• Cascading Style Sheet层叠级联样式表
• CSS：表现（美化网页）
• 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

2 发展史

• CSS1.0
• CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
• CSS2.1 浮动、定位
• CSS3.0 圆角，阴影，动画… 浏览器兼容性~

3 快速入门

可以直接在html文件的head下style中写CSS代码

还可以把css分离出来（建议用这种）

CSS优势

• 内容和表现分离
• 网页结构表现统一，可以实现复用
• 样式十分丰富
• 建议使用独立于html的css文件
• 利用SEO，容易被搜索引擎收录

4 CSS的三种导入方式

行内样式、内部样式、外部样式
多种样式同时存在时，是就近原则：（谁离body中h1标签更近就用哪个样式）

• 如果有用行内样式，就用行内样式

• 如果没用行内样式，内部样式和外部样式在head中的位置谁更靠下（靠近body）就用谁
  
  

二、选择器

• 作用：选择页面上某个或者某类元素

1 基本选择器 – 重要

• 优先级：id选择器 > 类选择器 > 标签选择器
• 如果有多个同种类选择器，效果会覆盖

（1）标签选择器

（2）类选择器

（3）id选择器

2 层次选择器

• 后代选择器
• 子选择器
• 相邻兄弟选择器
• 通用兄弟选择器

3 结构伪类选择器

• 带冒号的是伪类
• 参考菜鸟教程

4 属性选择器 – 重要

三、美化网页元素

1 为什么要美化网页

• 有效传递页面信息
• 美化网页吸引用户
• 凸显页面主题
• 提高用户体验

span标签：重点要突出的字用span套起来

2 字体样式

• 参考菜鸟教程
• 参考W3school

常用：

属性名	含义	可选值
font	字体所有属性	举例：italic bold 12px/30px Georgia, serif (12px/30px表示字高12px，字和行间距高共30px)
font-family	字体	黑体、宋体等
font-size	字体大小	单位可取px、em、%
font-style	是否斜体	normal：正常 italic：斜体
font-wight	字体粗细	lighter：更细体 normal：正常 bold：粗体 bolder：更粗体

3 文本样式

• 参考菜鸟教程
• 参考W3school

常用：

属性名	含义	可选值
color	文本颜色	颜色名称表示法如：red、blue 十六进制表示法如：# FF0000 RGB表示法如：rgb(255,0,0) RGBA表示法(A:透明度(0~1)) HSL表示法 HSLA表示法
text-align	对齐方式	left、center、right：左、居中、右 justify：均匀分布，左右外边距对齐
text-indent	首行缩进	缩进宽度单位：px、em、% inherit：继承父类
line-height	行高	行高度单位：px、em、% inherit：继承父类
text-decoration	文本修饰	none：无(用来删除链接的下划线) overline：上划线 line-through：删除线 underline：下划线
text-shadow	文本阴影	举例：2px 2px 2px #ff0000 水平偏移、垂直偏移、阴影粗细、阴影颜色

注意：把行高和块高设置为同样的值时，就可以实现文本在块中上下居中

4 列表样式

仿照淘宝的导航栏

小图标是从iconfont找的。方法参照HTML中使用IconFont图标

5 背景

• 纯色
• 渐变色
  - 相关笔记参考
  - 渐变图片网站——支持在线调渐变方向等后复制CSS代码
• 图片
  

四、盒子模型

1 什么是盒子模型

• margin：外边距
• border：边框
• padding：内边距
  

2 边框

常用：

属性名	含义	可选值
border	边框所有属性	举例：5px solid red (粗细、样式、颜色)
border-width	边框粗细	用关键字thick、medium、thin 或指定某值(单位是px、pt、cm、em等)
border-color	边框颜色	十六进制、RGB、RGBA、HSL、HSLA方法
border-style	边框样式	none：无边框(默认值) solid：实线框    dotted：点框 dashed：虚线框    double: 两个边框 groove: 3D沟槽边框   ridge: 3D脊边框 inset:3D嵌入边框   outset: 3D突出边框
border-radius	边框圆角	单位是px、pt、cm、em等 当圆角大小为正方形框边长的一半时是圆形
box-shadow	盒子阴影	与text-shadow类似 举例：2px 2px 2px #ff0000 水平偏移、垂直偏移、阴影粗细、阴影颜色 阴影很粗时有发光效果

注意：边框还可以四个边分别设置（参考菜鸟教程）

3 内外边距

• 菜鸟教程-外边距
• 菜鸟教程-内边距

五、浮动

1 显示(Display)

• 块级元素(block)、行内元素(inline)可以通过display互相转换
• 另外还有种行内-块级类型(inline-block)

这种是行内列表

2 浮动(float)

3 父级边框塌陷问题

（1）增加父级元素高度
（2）添加一个空div标签清除浮动
（3）overflow
（4）父类添加一个伪类:after

六、定位

1 相对定位

2 绝对定位

3 z-index

七、动画