一、样式表
按照CSS 样式书写的位置（或者引入的方式）CSS 样式表可以分为三大类：
1.行内样式表（行内式）
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS 样式，适合于修改简单样式。
语法：
<div>
style="color:red; font-size:12px;"
<div/>
- style其实就是标签的属性，在双引号中间，要符合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
- 使用行内样式表设定CSS,通常也被称为行内引入
2.内部样式表（嵌入式）
内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的CSS 代码抽取出来，单独放到一个<style ><style />标签中。
语法：
<style>
div{
color:red;
font-size:12px;
}
<style/>- <style><style/>标签理论上可以放在HTML 文档的任何地方，但一般会放到文档的<head><head/>标签中。
- 通过此种方式，可以方便控制当前整个页面中的元素样式设置。
- 代码结构清晰，但是并没有实现结构与样式完全分离。
- 使用内部样式表设置CSS,通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。
3.外部样式表（链接式）
实际开发都是外部样式，适合于样式比较多的情况。核心是：样式单独写到CSS 文件中，之后把CSS 文件引入到HTML 页面中使用。
引入外部样式表分为两步
1.新建一个后缀名为.CSS的样式文件，把所有CSS 代码都放入此文件中
2在HTML 页面中，使用<link>标签引入这个文件
语法：
<link rel="stylesheet" href="CSS文件路径">- 1.行内样式表：书写方便、权重高、结构样式混写，使用较少，控制一个标签。
- 2.内部样式表：部分结构和样式分离，没有彻底分离，使用较多，控制一个页面。
- 3.外部样式表：完全实现结构和样式分离，需要引入，使用最多，强烈推荐，控制多个页面。
二、chrome 调试工具
- ctrl+滚轮，可以放大开发者工具代码大小。
- 左边是HTML元素结构，右边是CSS 样式。
- 右边CSS 样式可以改动数值（左右箭头或直接输入）和查看颜色。
- ctrl +o 复原浏览器大小。
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
- 如果有样式，但是样式少年有黄色感叹号提示，则是样式属性书写错误。
三、Emmet语法
1.简介
Emmet语法的前身是zen coding，它使用缩写来提高HTML/CSS的缩写速度，Vscode内部已经集成该语法。
1.1快速生成HTNL结构语法
- 生成标签直接输入标签名，按tab键即可，比如div然后按tab键，就可以生成<div><div/>。
- 如果有父子级关系的标签，就可以用>比如ul>li就可以了。
- 如果想要生成多个相同标签加上*就可以了，比如div*3就可以快速生成三个div。
- 如果有兄弟关系的标签，就可以用+，比如div+p。
- 如果生成带有类名或者id名字的，直接写.demo或者#two，tab键就可以了。
1.2快速生成CSS样式语法
CSS基本采取简写形式即可。
比如w200按tab就可以生成width:200px;。
比如lh26px按tab就可以生成line-height:26px;。
416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
