[CSS+]HTML Learn Data Day 2

推荐《[CSS+]HTML Learn Data Day 2》：作者把经验掰开揉碎讲得很细。下面按要点重新组织一遍，方便你快速抓住重点、用起来。

总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是 T 型人才 学习这个是为了成为更好ai驾驶员 css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛 欢迎来我的网站观赏听歌： 铃仙酱 建议用电脑打开，手机不会适配。 一、CSS 基础与选择器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了 外链式 ，配合少量的 行内式 。

总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是 T 型人才 学习这个是为了成为更好ai驾驶员 css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛 欢迎来我的网站观赏听歌： 铃仙酱 建议用电脑打开，手机不会适配。 一、CSS 基础与选择器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了 外链式 ，配合少量的 行内式 。 引入方式 语法示例 特点 适用场景 外链式 <link rel="stylesheet" href="css/index.css"> 结构与样式分离，代码清晰，可复用 正式项目开发 行内式 <div style="color: red;"> 权重高，但代码混乱，难以维护 临时测试或极少量的样式修正 (如 Footer) 内嵌式 <style> ... </style> 写在 head 中，不推荐用于大项目 单页面练习 2. 选择器 (Selectors) 为了精准地控制页面上的元素，需要用到选择器。

总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是 T 型人才 学习这个是为了成为更好ai驾驶员 css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛 欢迎来我的网站观赏听歌： 铃仙酱 建议用电脑打开，手机不会适配。 一、CSS 基础与选择器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了 外链式 ，配合少量的 行内式 。 引入方式 语法示例 特点 适用场景 外链式 <link rel="stylesheet" href="css/index.css"> 结构与样式分离，代码清晰，可复用 正式项目开发 行内式 <div style="color: red;"> 权重高，但代码混乱，难以维护 临时测试或极少量的样式修正 (如 Footer) 内嵌式 <style> ... </style> 写在 head 中，不推荐用于大项目 单页面练习 2. 选择器 (Selectors) 为了精准地控制页面上的元素，需要用到选择器。 选择器类型 符号 示例 说明 权重 (优先级) 标签选择器 无 body {} , img {} 选中页面所有同名标签 低 (1) 类选择器 . .theInf {} 选中所有 class="theInf" 的元素 (最常用) 中 (10) ID 选择器 # #ND {} 选中唯一 id="ND" 的元素 (如那张特写的图) 高 (100) 后代选择器 空格 .theInf img {} 选中 .theInf 内部所有的 img 叠加计算 伪类选择器 : :hover 鼠标悬停时的状态 - 二、布局 这是今天最大的收获。

总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是 T 型人才 学习这个是为了成为更好ai驾驶员 css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛 欢迎来我的网站观赏听歌： 铃仙酱 建议用电脑打开，手机不会适配。 一、CSS 基础与选择器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了 外链式 ，配合少量的 行内式 。 引入方式 语法示例 特点 适用场景 外链式 <link rel="stylesheet" href="css/index.css"> 结构与样式分离，代码清晰，可复用 正式项目开发 行内式 <div style="color: red;"> 权重高，但代码混乱，难以维护 临时测试或极少量的样式修正 (如 Footer) 内嵌式 <style> ... </style> 写在 head 中，不推荐用于大项目 单页面练习 2. 选择器 (Selectors) 为了精准地控制页面上的元素，需要用到选择器。 选择器类型 符号 示例 说明 权重 (优先级) 标签选择器 无 body {} , img {} 选中页面所有同名标签 低 (1) 类选择器 . .theInf {} 选中所有 class="theInf" 的元素 (最常用) 中 (10) ID 选择器 # #ND {} 选中唯一 id="ND" 的元素 (如那张特写的图) 高 (100) 后代选择器 空格 .theInf img {} 选中 .theInf 内部所有的 img 叠加计算 伪类选择器 : :hover 鼠标悬停时的状态 - 二、布局 这是今天最大的收获。以前排版可能需要用 float 清除浮动，现在用 Flex 可以轻松实现从左到右、从上到下的排列。

总有人说前端会被ai替代，这确实是这样，我更应该学习这些东西，这个时代应该做一个全能的人？应该说是 T 型人才 学习这个是为了成为更好ai驾驶员 css这东西不算很复杂，但是特别繁多，这也成为了最高的学习门槛 欢迎来我的网站观赏听歌： 铃仙酱 建议用电脑打开，手机不会适配。 一、CSS 基础与选择器 1. CSS 的引入方式 在 HTML 中引入 CSS 主要有三种方式，我这次主要使用了 外链式 ，配合少量的 行内式 。 引入方式 语法示例 特点 适用场景 外链式 <link rel="stylesheet" href="css/index.css"> 结构与样式分离，代码清晰，可复用 正式项目开发 行内式 <div style="color: red;"> 权重高，但代码混乱，难以维护 临时测试或极少量的样式修正 (如 Footer) 内嵌式 <style> ... </style> 写在 head 中，不推荐用于大项目 单页面练习 2. 选择器 (Selectors) 为了精准地控制页面上的元素，需要用到选择器。 选择器类型 符号 示例 说明 权重 (优先级) 标签选择器 无 body {} , img {} 选中页面所有同名标签 低 (1) 类选择器 . .theInf {} 选中所有 class="theInf" 的元素 (最常用) 中 (10) ID 选择器 # #ND {} 选中唯一 id="ND" 的元素 (如那张特写的图) 高 (100) 后代选择器 空格 .theInf img {} 选中 .theInf 内部所有的 img 叠加计算 伪类选择器 : :hover 鼠标悬停时的状态 - 二、布局 这是今天最大的收获。以前排版可能需要用 float 清除浮动，现在用 Flex 可以轻松实现从左到右、从上到下的排列。 1. 开启 Flex 布局 只要给父盒子加上 display: flex; ，它就变成了“弹性容器”。

读完别停：把最触动你的一条记下来，这周就用上。能落地的阅读才算数，欢迎回来聊聊你的实践结果。 来源｜博客园《[CSS+]HTML Learn Data Day 2》，https://www.cnblogs.com/Reisentyan/p/19374041