技巧与特性
CSS 技巧与特性
以下为学习过程中的极简提炼笔记，以供重温巩固学习
学习路线&目的
- 掌握 emmet 语法，有技巧地码字
- 掌握内部、行内、外部，3 种 CSS 样式表的引入使用
- 掌握 CSS 特性
- 掌握浏览器调试技巧
emmet 语法
Emmet 语法的前身是 Zen coding
它使用缩写来提高 html/css 的编写速度，Vscode 内部已经集成该语法
- 快速生成 HTML 结构语法
- 快速生成 CSS 样式语法
快速生成 HTML 结构语法
前提条件： 在当前编辑的是 *.html 文件情况下，vscode 编译器中输入才有效
- 输入正确的情况下，vscode 编译器会有提示
- 生成标签对 直接输入标签名 按
tab键即可(或在出现提示后选中按回车) - 如果想要生成多个相同标签 加上
*即可，如 div*3 就可以快速生成 3 个 div - 如果有父子级关系的标签，可以用
>，如输入 ul > li tab/回车 - 如果有兄弟关系的标签，可以用
+，如输入 div + p tab/回车 - 如果生成带有类名的标签，直接
.加类名 tab/回车，如 .demo tab 键即可 - 如果生成带有 id 名字的标签，直接
#加 id tab/回车，如 #two tab 键即可 - 如果生成的 div 类名是有顺序的， 可以用 自增符号
$ - 如果想要在生成的标签内部写内容可以用
{ }表示
快速生成 CSS 样式语法
CSS 基本采取简写形式即可
- 比如 w200 按 tab 可以 生成 width: 200px
- 比如 lh26px 按 tab 可以生成 line-height: 26px
快速格式化代码
vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1）文件 ------.>【首选项】---------->【设置】；
2）搜索emmet.include;
3）在settings.json下的【工作区设置】中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true
CSS 的 3 种 CSS 样式表
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
行内样式表
行内样式表（内联样式表）是在 元素标签内部的 style 属性 中设定 CSS 样式
- style 其实就是标签的属性
- 在双引号中间，写法要符合 CSS 规范
- 只控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，不推荐大量使用
- 特点：只有对当前元素添加简单样式的时候，可以考虑使用
语法格式案例
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>内部样式表
内部样式表（内嵌样式表）是写到html页面内部
是将所有的 CSS 代码抽取出来，单独放到*.html页面中的一个 <style> 标签中
<style>标签理论上可以放在*.html文档的任何地方，但一般会放在文档的<head>标签中- 控制当前整个页面中的元素样式设置
- 代码结构相对行内清晰，但是并没有实现结构*.html与样式*.css完全分离
- 使用内部样式表设定 CSS，通常也被称为嵌入式引入，临时用/练习用居多，不需要跨文档
语法格式案例
<head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>外部样式表
实际开发都是外部样式表，适合于样式比较多的情况
核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用
引入外部样式表分为两步：
- 新建一个后缀名为 *.css 的样式文件，把所有 CSS 代码都放入此文件中。
- 在 HTML 页面中，使用
<link>标签引入这个文件 <link>标签通常在<head>标签对中
语法格式案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>来呀~快活呀,反正有大把时间...</div>
</body>引入方式总结
| 样式表引入类型 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 权重高，准确性高 | html与css，结构与样式混写在同一个*.html | 较少 | 控制当前标签 |
| 内部样式表 | 实现*.html文件页内结构样式相分离 | html与css，结构与样式还是混写在同一个*.html | 较多 | 控制当前页面 |
| 外部样式表 | 完全实现结构样式相分离 | 需要额外引入，对引入页面整个生效 | 极多 | 多页面可同时引用套用 |
CSS 的 3 大特性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级
层叠性
给同一个选择器设置相同的样式，此时其中一个样式就会覆盖（层叠）另一个冲突的样式，层叠性质解决了冲突问题
层叠原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
- 后面的覆盖前面的
语法格式案例
<head>
<style>
div {
/* 颜色被叠，不生效 */
color: blue;
font-size: 12px;
}
div {
/* 生效 */
color: pink;
}
</style>
</head>
<body>
<div>长江后浪推前浪,前浪死在沙滩上</div>
</body>继承性
子标签会继承父标签的某些样式，如文本颜色和字号
继承原则：
- 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高的继承案例:
行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为 1.5
此时子元素的行高是：当前子元素的文字大小 * 1.5
body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
body {
font:12px/1.5 Microsoft YaHei；
}语法格式案例
<head>
<style>
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */
font-size: 14px;
}
p {
/* 1.5 * 16 = 24 当前的行高 */
font-size: 16px;
}
/* li 么有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所以 li 的文字大小为 12px */
/*当前li 的行高就是 12 * 1.5 = 18*/
</style>
</head>
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>我没有指定文字大小</li>
</ul>
</body>优先级
当同一个元素/标签指定多个不同选择器，就会有优先级的产生，以在元素/标签上应用不同选择器的效果样式
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器的权重如下
| 选择器 | 权重 |
|---|---|
继承 或 通配符选择器* | 0，0，0，0 |
| html 元素/标签选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| id选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| !important | 无穷大 |
选择器权重注意点
- 权重是有4组数字组成，但是不会有进位。
- 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器,以此类推..
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为0,，标签选择器为1，类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
- 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0
权重叠加注意点：
如果是复合选择器，则会有权重叠加，需要计算权重
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
语法格式案例
<head>
<style>
.test {
color: red;
}
div {
color: pink!important;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>语法格式案例
<head>
<style>
/* 父亲的权重是 100 */
#father {
color: red!important;
}
/* p继承的权重为 0 */
/* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
p {
color: pink;
}
body {
color: red;
}
/* a链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;}*/
a {
color: green;
}
</style>
</head>
<body>
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
</body>语法格式案例
<head>
<style>
/* 复合选择器会有权重叠加的问题 */
/* 权重虽然会叠加,但是永远不会有进位 */
/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li 的权重是 0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>语法格式案例
<head>
<style>
.nav {
color: red;
}
/* 继承的权重是0 */
li {
color: pink;
}
</style>
</head>
<body>
<ul class="nav">
<li>人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>语法格式案例
<head>
<style>
/* .nav li 权重是 11 */
.nav li {
color: red;
}
/* 需求把第一个小li 颜色改为 粉色加粗 ? */
/* .pink 权重是 10 .nav .pink 20 */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>CSS注释
简单使用 ctrl + / 快速整行注释，可得知当前语言下的注释符规则
掌握基本的浏览器调试技巧
现代浏览器，以及electron等开发的软件，都提供了非常好用的调试工具，可以用来调试 HTML 结构和 CSS 样式
Edge/Firefox/Firefox nightly/QQ/360极速/ 浏览器：
按下F12键或者右击页面空白处>检查
Chrome/Opera/opera GX/360安全 浏览器：ctrl+shift+i键或者右击页面空白处>检查ctrl+shift+c
调试工具的使用：
- 点左上角指针，选定页面元素，可以定位元素源代码
- Ctrl+滚轮 可以放大开发者工具代码大小。
- 左边是 HTML 元素结构，右边是 CSS 样式。
- 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
- Ctrl + 0 复原浏览器大小。
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。