《CSS成长之路》001-CSS基础

HTML 和 CSS 的关系

• HTML 相当于 买的毛坯房, 里面是分段的(标签), 有卧室, 有厨房, 有卫生间

• CSS 负责装修, 把你的家专修的漂漂亮亮的

如何引入 css

• link标签

• 如果一个页面需要多个 CSS 文件, 就会出现多个link标签

为什么要引入 CSS

• 把 CSS 分离出来, 方便复用

其他引入方式

• style标签

• 标签内

css 注释

• /* 注释内容 */

• CSS 注释已经越来越少人用, 因为浏览器调试太方便了

css 特性

• 不会因为上一行的错误, 导致下一行无法运行

css 中引入 css

• 使用@import url("css路径")

vscode 中代码和浏览器实时同步

• 需要安装插件live server

之前的痛点, 书写代码, 看到效果需要 4 步

1. 敲代码
2. 保存
3. 切换到浏览器
4. 刷新, 看到效果

安装完插件后, 只需 1 步

1. 敲代码, 看到效果

如何安装插件

• 点击 vscode 的扩展按钮, 打开扩展商店
• 在商店中搜索live server,点击安装即可

如何使用

• 设置 vscode 的自动保存
• 打开用户设置(ctrl+shift+p, 输入open user settings)
• 搜索auto save
• 选择afterDelay
• auto save delay设置成 100(毫秒)

• 新建 html 文件
• 鼠标右键open with live server
• 选中编辑器windows + →
• 在左侧窗口中选择编辑器
• 书写代码, 查看效果

快速跳转

• 专栏《CSS成长之路》000-开篇
• 专栏《CSS成长之路》001-CSS基础
• 专栏《CSS成长之路》002-CSS选择器
• 专栏《CSS成长之路》003-CSS权重和继承
• 专栏《CSS成长之路》004-CSS文本操作
• 专栏《CSS成长之路》005-CSS盒子模型
• 专栏《CSS成长之路》006-背景与渐变
• 专栏《CSS成长之路》007-CSS定义数据格式
• 专栏《CSS成长之路》008-浮动布局
• 未完待续...