最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了

基于黑马前端视频学习的CSS3笔记，每一天的知识点都放在一起，方便学习查阅

• ==CSS第一天==
• • 一、css简介
  • 二、css语法规范
  • 三、css代码风格
  • 四、css选择器的作用
  • 五、css基础选择器
  • • 1、标签选择器：
    • 2、类选择器
    • 3、多类名选择器
    • 4、id选择器：
    • 5、id选择器和类选择器的区别
    • 6、通配符选择器
    • 7、选择器总结
  • 六、css字体属性:
  • • 1、字体大小：
    • 2、字体粗细：
    • 3、字体样式：
    • 4、字体的综合写法
    • 5、字体总结：
  • 七、css文本属性：
  • • 1、文本颜色：
    • 2、文本对齐：
    • 3、修饰文本：
    • 4、文本缩进
    • 5、行间距：
  • 八、css样式表：
  • • 1、行内样式表（行内式）
    • 2、内部样式表（嵌入式）
    • 3、外部样式表（链接式）
  • 九、Chrome调试工具：
• ==CSS第二天==
• • 一、emmet语法
  • • 1、简介
    • 2、快速生成HTML结构语法
    • 3、快速生成CSS样式语法
    • 4、快速格式化代码
  • 二、css的复合选择器
  • • 1、什么是复合选择器？
    • 2、后代选择器 (重要）
    • 3、子选择器 (重要）
    • 4、并集选择器 (重要）
    • 5、伪类选择器
    • 6、链接伪类选择器
    • 7、:focus 伪类选择器
    • 复合选择器总结
  • 三、css的显示模式
  • • 1、什么是元素的显示模式
    • 2、元素显示模式的分类
    • • 2.1、块元素
      • 2.2、行内元素
      • 2.3、行内块元素
      • 2.4、元素显示模式总结
    • 3、元素显示模式的转换
    • 4、单行文字垂直居中的代码
  • 四、css的背景
  • • 1、背景颜色
    • 2、背景图片
    • 3、背景平铺
    • 4、背景图片位置
    • 5、背景图片固定
    • 6、背景样式合写
    • 7、背景色半透明
    • 8、背景总结
• ==CSS第三天==
• • 一、css三大特性
  • • 1、层叠性
    • 2、继承性
    • 3、优先级
    • • 3.1、权重叠加（重点）
  • 二、盒子模型
  • • 1、网页布局的本质
    • • 1.1、网页布局过程
      • 1.2、网页布局三大核心
    • 2、盒子模型（Box Model）组成
    • 3、边框（border）
    • • 3.1、边框的使用
      • 3.2、表格的细线边框
      • 3.3、边框会影响盒子实际大小
    • 4、内边距（padding）
    • • 4.1、内边距的使用方式
      • 4.2、内边距会影响盒子实际大小
    • 5、外边距（margin）
    • • 5.1、外边距的使用方式
      • 5.2、外边距典型应用
      • 5.3、外边距合并
      • 5.4、清除内外边距
  • 三、PS 基本操作
• ==CSS第四天==
• • 一、其他样式
  • • 1、圆角边框
    • 2、盒子阴影
    • 3、文字阴影
  • 二、浮动
  • • 1、传统网页布局的三种方式
    • 2、标准流（普通流/文档流）
    • 3、为什么需要浮动？
    • 4、什么是浮动？
    • 5、浮动特性
    • 6、浮动元素经常和标准流父级搭配使用
  • 三、常见网页布局
  • • 浮动布局注意点
  • 四、清除浮动
  • • 1、为什么需要清除浮动？
    • 2、清除浮动本质
    • 3、清除浮动样式
    • 4、清除浮动的多种方式
    • • 4.1、额外标签法
      • 4.2、父级添加 overflow 属性
      • 4.3、父级添加after伪元素
      • 4.4、父级添加双伪元素
    • 总结
  • 五、PS 切图
  • • 1、图层切图
    • 2、切片切图
    • 3、PS插件切图
• ==CSS第五天==
• • 1. PS 切图
  • • 1.1. 常见的图片格式
    • 1.2. 图层切图
    • 1.3. 切片切图
    • 1.4. 插件切图
    • • 1.4.1. 介绍
      • 1.4.2. 安装
  • 2. CSS属性书写顺序（重点）
  • 3. 学成在线页面制作
  • • 3.1. 前期准备素材
    • 3.2. 前期准备工作
    • 3.3. 页面布局整体思路
    • 3.4. 页面制作
    • • 3.4.1. header头部制作
      • 3.4.2. banner制作
      • • 3.4.2.1 subnav 侧导航栏 (左侧的)
        • 3.4.2.2 course课程表模块 (右侧的)
      • 3.4.3. 精品推荐小模块
      • 3.4.4. 精品推荐大模块
      • 3.4.5. 底部模块制作
• ==CSS第六天==
• • 1. 定位(position) 介绍
  • • 1.1 为什么使用定位
    • 1.2 定位组成
    • • 1.2.1 边偏移（方位名词）
      • 1.2.2 定位模式 (position)
    • 1.3 定位模式介绍
    • • 1.3.1. 静态定位(static) - 了解
      • 1.3.2. 相对定位(relative) - 重要
      • 1.3.3. 绝对定位(absolute) - 重要
      • • 1.3.3.1 绝对定位的介绍
        • 1.3.3.2 定位口诀 —— 子绝父相
      • 1.3.4. 固定定位(fixed) - 重要
      • 1.3.5 粘性定位(sticky) - 了解
      • 1.3.6 定位总结
  • 2. 综合案例：学成在线-hot 模块添加
  • • **2. 1 案例截图**：
    • 2.2 案例分析
    • 2.3 案例小结
  • 3. 定位(position)的应用
  • • 3.1. 固定定位小技巧： 固定在版心左侧位置。
    • 3.2. 堆叠顺序（z-index）
  • 4. 定位(position)的拓展
  • • 4.1 绝对定位的盒子居中
    • 4.2 定位特殊特性
    • 4.3 脱标的盒子不会触发外边距塌陷
    • 4.4 绝对定位（固定定位）会完全压住盒子
  • 5. 综合案例 - 淘宝轮播图(重点)
  • • 5.1 效果图
    • 5.2 布局分析
    • 5.3 步骤
    • 5.4 知识点：圆角矩形设置4个角
    • 5.5 代码参考
  • 6. 网页布局总结
  • • 6.1. 标准流
    • 6.2. 浮动
    • 6.3. 定位
  • 7. 元素的显示与隐藏
  • • 7.1. display 显示（重点）
    • 7.2. visibility 可见性 （了解）
    • 7.3. overflow 溢出（重点）
    • 7.4. 显示与隐藏总结
  • 8 综合案例：土豆网鼠标经过显示遮罩
  • • 8.1. 效果图
    • 8.2. 案例目标
    • 8.3. 核心原理
    • 8.4. 代码参考
• ==CSS第七天==
• • 1. 精灵图（重点）
  • • 1.1 为什么需要精灵图
    • 1.2 精灵图（sprites）的使用
    • 1.3 案例：拼出自己名字
    • • 1.3.1 案例效果
      • 1.3.2 代码参考
  • 2. 字体图标
  • • 2.1 字体图标的产生
    • 2.2 字体图标的优点
    • **2.3** **字体图标的下载**
    • **2.4** **字体图标的引入**
    • 2.5 字体图标的追加
    • 2.6 字体图标加载的原理：
  • 3. CSS 三角
  • • 3.1 介绍
    • 3.2 案例：京东三角
    • • 3.2.1效果图
      • 3.2.2 代码参考
  • 4. CSS 用户界面样式
  • • 4.1 鼠标样式 cursor
    • 4.2 轮廓线 outline
    • 4.3 防止拖拽文本域 resize
  • 5. vertical-align 属性应用
  • • **5.1** **图片、表单和文字对齐**
    • 5.2 解决图片底部默认空白缝隙问题
  • 6. 溢出的文字省略号显示
  • • 6.1 单行文本溢出显示省略号
    • 6.2 多行文本溢出显示省略号（了解）
  • 7. 常见布局技巧
  • • 7.1. margin负值运用
    • 7.2 文字围绕浮动元素
    • 7.3 行内块巧妙运用
    • 7.4. CSS 三角强化 案例
    • • **7.4.1 原理**
      • 7.4.2 案例效果
      • **7.4.3 代码参考**
  • 8. CSS 初始化
• ==目标==
• ==HTML5新特性==
• • 概述
  • 语义化标签 （★★）
  • 多媒体标签
  • • 视频标签- video（★★★）
    • • 基本使用
      • 兼容写法
      • video 常用属性
    • 音频标签- audio
    • • 基本使用
      • 兼容写法
      • audio 常用属性
    • 小结
  • 新增的表单元素 （★★）
• CSS3新特性
• • CSS3 的现状
  • CSS3 新增选择器
  • • 属性选择器（★★）
    • 结构伪类选择器
    • • E:first-child
      • E:nth-child(n)（★★★）
      • E:nth-child 与 E:nth-of-type 的区别
      • 小结
    • 伪元素选择器（★★★）
    • • 应用场景一： 字体图标
      • 应用场景二： 仿土豆效果
      • 应用场景三： 清除浮动
  • 盒子模型（★★★）
  • 其他特性（★）
  • • 图标变模糊 – CSS3滤镜filter
    • 计算盒子宽度 – calc 函数
  • CSS3 过渡（★★★）
  • • • 过渡练习
• 广义H5说法 了解
• • • 狭隘H5
    • 广义H5

CSS第一天

一、css简介

• CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
  有时我们也会称之为 CSS 样式表或级联样式表。
• CSS 是也是一种标记语言
• CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
• CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
• CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

二、css语法规范

• 使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。
• CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式

2. 属性和属性值以“键值对”的形式出现

3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

4. 属性和属性值之间用英文“:”分开

5. 多个“键值对”之间用英文“;”进行区分
   例如：
   所有的样式，都包含在

三、css代码风格

1. 样式格式书写
    
    - 紧凑格式   
          h3 { color: deeppink;font-size: 20px;}
    - 展开格式   
       h3 {
          color: pink;
          font-size: 20px;    
   }
      强烈推荐第二种格式， 因为更直观。

2. 样式大小写风格

• 小写格式
  h3 {
  color: pink;
  }
• 大写格式
  H3 {
  COLOR: PINK;

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

3. 样式空格风格

   • h3 {
     color: pink;
     }

   属性值前面，冒号后面，保留一个空格
   选择器（标签）和大括号中间保留空格

四、css选择器的作用

答：选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。

五、css基础选择器

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

1、标签选择器：

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：
标签选择器{
属性：属性值
…
}
作用：
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

2、类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
语法：
.类名 {
属性1: 属性值1;
…
}
结构需要用class属性来调用 class 类的意思

 <div class="类名"> 变红色 </div>

1. 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
2. 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
3. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
4. 可以理解为给这个标签起了一个名字，来表示。
5. 长名称或词组可以使用中横线来为选择器命名。
6. 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
7. 命名要有意义，尽量使别人一眼就知道这个类名的目的。
8. 命名规范：见附件（ Web 前端开发规范手册.doc）

3、多类名选择器

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签.
简单理解就是一个标签有多个名字.

多类名的具体使用：
1.

亚瑟

注意：
1.在标签class 属性中写 多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式

4、id选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
语法：
#id名 {
属性1: 属性值1;
…
}
注意：id 属性只能在每个 HTML 文档中出现一次

5、id选择器和类选择器的区别

1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2. id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
3. id 选择器和类选择器最大的不同在于使用次数上。
4. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

6、通配符选择器

语法：
* {
属性1: 属性值1;
…
}
通配符选择器不需要调用， 自动就给所有的元素使用样式
特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)

* {
   margin: 0;
   padding: 0;
} 

7、选择器总结

六、css字体属性:

1、字体大小：

CSS 使用 font-size 属性定义字体大小。
语法：
p {
font-size: 20px;
}
1.px（像素）大小是我们网页的最常用的单位
2.谷歌浏览器默认的文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4.可以给 body 指定整个页面文字的大小

2、字体粗细：

CSS 使用 font-weight 属性设置文本字体的粗细。
语法：
p {
font-weight: bold;
}

1.学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗
2.实际开发时，我们更喜欢用数字表示粗细

3、字体样式：

CSS 使用 font-style 属性设置文本的风格。
语法：
p {
font-style: normal;
}

4、字体的综合写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

body { font: font-style font-weight font-size/line-height font-family;}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

5、字体总结：

七、css文本属性：

1、文本颜色：

color 属性用于定义文本的颜色。
语法：
div {
color: red;
}

开发中最常用的是十六进制

2、文本对齐：

text-align 属性用于设置元素内文本内容的水平对齐方式。
语法：
div {
text-align: center;
}

3、修饰文本：

语法：
div {
text-decoration：underline；
}

重点记住如何添加下划线 如何删除下划线 其余了解即可.

4、文本缩进

语法：
div {
text-indent：20px；
}