8个硬核技巧带你迅速提升CSS技术 | 掘金直播总结

前言

前段时间笔者收到可爱漂亮的小册姐姐的邀请,做了人生首次直播分享。分享主题是《玩转CSS的艺术之美》,跟笔者在9月底发布的掘金小册同名。

9月底发布的玩转CSS的艺术之美,首日预售就达到709本,预售仅三日就破1000本。这也让笔者感到惊讶,没想到CSS技术还是那么受倔友们的欢迎,让笔者觉得熬夜半年写这本小册还是值得的,毕竟能将自己的学习心路分享出去,让更多同学学到更多东西,也是一件值得开心的事情。

由于首次做直播分享,感觉比较紧张,家里网络不是特别好,还有其他原因,导致认真准备的内容未在预料时间内完成分享,因此通过本文将来不及分享的内容整理出来。

8个硬核技巧带你迅速提升CSS技术 | 掘金直播总结_第1张图片

目录

对分享内容感兴趣的同学可关注笔者的公众号IQ前端,回复CSSPPT下载分享PPT。分享内容包含历史背景概念原理开发技巧三节。第一二节比较无聊,可自行查看PPT,在此就不多说了。主要是第三节的干货,是笔者认真准备了好几天的内容,每个主题都会有对应的源码及其效果。

8个硬核技巧带你迅速提升CSS技术 | 掘金直播总结_第2张图片

笔者选择了一些常用甚至有些小册都未提及到的干货作为分享内容,相信这些内容能帮助同学们在短期内提升CSS编码素质,实现一些看似只能由JS才能实现的效果。

  • 神奇的选择器
  • 浅谈布局那些事
  • 绘制三角的原理
  • 完美极致的变量
  • 添油加醋的伪元素
  • 灵活多变的障眼法
  • 意向不到的内容插入
  • 无所不能的模拟点击事件
准备工作

整个分享过程不搞那些乱七八糟的环境搭建。既然只玩CSS,那只有html文件css文件就足够了。另外还需一个浏览器Chrome和一个编辑器VSCode

VSCode还需安装Live Sass CompilerLive Server两个插件。Live Sass Compiler用于实时编译sass/scss文件css文件Live Server用于启动具有实时刷新功能的本地开发服务器,以处理静态页面和动态页面。

新建index.htmlindex.scss。为了使各大浏览器默认样式一致,还需引入一个磨平浏览器默认样式的css文件,同学们可下载笔者写好的reset.css到本地目录里。





    
    
    Hello CSS
    
    



    


body {
    overflow: hidden;
    height: 100vh;
}

上述文件骨架完成后,打开index.scss,按F1Cmd + Shift + P打开命令面板,输入Watch Sass监听index.scss并生成index.css,再输入Open With Live Server启动本地开发服务器并打开浏览器。到此为止就完成了所有准备工作了。

神奇的选择器

很多CSS编码习惯都是清一色的类而无相应的选择器,层层嵌套的标签都包含至少一个类。选择器对比起来性能上确实没后者那么好,但如今浏览器对于CSS的解析速度已得到大大的提升,完全可忽略选择器那丁点的性能问题。

可是CSS模块众多,依次推出的选择器也很多。若无特别方法记熟这些选择器对应的功能,也很难将选择器发挥到最大作用。玩转CSS的最关键一步是能熟悉大部分选择器及其功能与使用场景

笔者根据选择器的功能划分出八大类,每个类别的选择器都能在一个使用场景中互相组合,记熟这些类别的选择器,相信就能将选择器发挥到最大作用。以下选择器的常用选项里若打勾可强行记熟,这些选择器都是笔者久经沙场而标记出来且认为是最好用的选择器。

基础选择器
选择器 别名 说明 版本 常用
tag 标签选择器 指定类型的标签 1
#id ID选择器 指定身份的标签 1
.class 类选择器 指定类名的标签 1
* 通配选择器 所有类型的标签 2
层次选择器
选择器 别名 说明 版本 常用
elemP elemC 后代选择器 元素的后代元素 1
elemP>elemC 子代选择器 元素的子代元素 2
elem1+elem2 相邻同胞选择器 元素相邻的同胞元素 2
elem1~elem2 通用同胞选择器 元素后面的同胞元素 3
集合选择器
选择器 别名 说明 版本 常用
elem1,elem2 并集选择器 多个指定的元素 1
elem.class 交集选择器 指定类名的元素 1
条件选择器
选择器 说明 版本 常用
:lang 指定标记语言的元素 2 ×
:dir() 指定编写方向的元素 4 ×
:has 包含指定元素的元素 4 ×
:is 指定条件的元素 4 ×
:not 非指定条件的元素 4
:where 指定条件的元素 4 ×
:scope 指定元素作为参考点 4 ×
:any-link 所有包含href链接元素 4 ×
:local-link 所有包含href且属于绝对地址的链接元素 4 ×
状态选择器
选择器 说明 版本 常用
:active 鼠标激活的元素 1 ×
:hover 鼠标悬浮的元素 1
:link 未访问的链接元素 1 ×
:visited 已访问的链接元素 1 ×
:target 当前锚点的元素 3 ×
:focus 输入聚焦的表单元素 2
:required 输入必填的表单元素 3
:valid 输入合法的表单元素 3
:invalid 输入非法的表单元素 3
:in-range 输入范围以内的表单元素 3 ×
:out-of-range 输入范围以外的表单元素 3 ×
:checked 选项选中的表单元素 3
:optional 选项可选的表单元素 3 ×
:enabled 事件启用的表单元素 3 ×
:disabled 事件禁用的表单元素 3
:read-only 只读的表单元素 3 ×
:read-write 可读可写的表单元素 3 ×
:target-within 内部锚点元素处于激活状态的元素 4 ×
:focus-within 内部表单元素处于聚焦状态的元素 4
:focus-visible 输入聚焦的表单元素 4 ×
:blank 输入为空的表单元素 4 ×
:user-invalid 输入合法的表单元素 4 ×
:indeterminate 选项未定的表单元素 4 ×
:placeholder-shown 占位显示的表单元素 4
:current() 浏览中的元素 4 ×
:past() 已浏览的元素 4 ×
:future() 未浏览的元素 4 ×
:playing 开始播放的媒体元素 4 ×
:paused 暂停播放的媒体元素 4 ×
结构选择器
选择器 说明 版本 常用
:root 文档的根元素 3 ×
:empty 无子元素的元素 3
:nth-child(n) 元素中指定顺序索引的元素 3
:nth-last-child(n) 元素中指定逆序索引的元素 3 ×
:first-child 元素中为首的元素 2
:last-child 元素中为尾的元素 3
:only-child 父元素仅有该元素的元素 3
:nth-of-type(n) 标签中指定顺序索引的标签 3
:nth-last-of-type(n) 标签中指定逆序索引的标签 3 ×
:first-of-type 标签中为首的标签 3
:last-of-type 标签中为尾标签 3
:only-of-type 父元素仅有该标签的标签 3
属性选择器
选择器 说明 版本 常用
[attr] 指定属性的元素 2
[attr=val] 属性等于指定值的元素 2
[attr*=val] 属性包含指定值的元素 3
[attr^=val] 属性以指定值开头的元素 3
[attr$=val] 属性以指定值结尾的元素 3
[attr~=val] 属性包含指定值(完整单词)的元素(不推荐使用) 2 ×
`[attr\ =val]` 属性以指定值(完整单词)开头的元素(不推荐使用) 2 ×
伪元素
选择器 说明 版本 常用
::before 在元素前插入的内容 2
::after 在元素后插入的内容 2
::first-letter 元素的首字母 1 ×
::first-line 元素的首行 1 ×
::selection 鼠标选中的元素 3 ×
::backdrop 全屏模式的元素 4 ×
::placeholder 表单元素的占位 4

选择器真正的用处不仅仅是说明选项里的描述,更多是搭配起来能起到的最大作用。这些选择器组成的选择器系统是整个CSS体系里的核心,使用选择器能带来以下好处。

  • 清晰易读:对于那些结构与行为分离的写法,使用sass/less编写属性时结构会更清晰易读,减少很多无用或少用的类,保持css文件的整洁性和观赏性
  • 确保一致:减少修改类而有可能导致样式失效的问题,有时修改类但未确保HTML和CSS的一致而导致样式失效
  • 剔除累赘:减少无实质性使用的类,例如很多层嵌套的标签,这些标签可能只使用到一个属性,就没必要新建类关联
  • 高效流畅:使用选择器可实现一些看似只能由JS才能实现的效果,既减少代码量也减少JS对DOM的操作,使得交互效果更流畅

浅谈布局那些事

掌握一些常用布局是一个前端必不可少的技能。养成看设计图就能大概规划出整体布局的前提是必须熟悉这些常用布局的特点与构造。曾经需结合很多属性才能完成一个布局,如今在现代属性的加持下能更好地快速实现各种布局,节约更多时间去做更重要的事情。

全屏布局

经典的全屏布局顶部底部主体三部分组成,其特点为三部分左右满屏拉伸顶部底部高度固定主体高度自适应。该布局很常见,也是大部分Web应用主体的主流布局。通常使用

三个标签语义化排版,
内还可插入

你可能感兴趣的