学习CSS必读，前端高级面试题库

• 利用一条@import url(路径)语句进行引入

• 导入式问题

• 导入式样式表的作用与外联式样式表基本相同

• 但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果网速比较慢是，会导致网页出现没有css样式的效果，给用户的体验不好

• 实际应用

• 小型案例：可以使用内嵌式CSS

• 实际工作、大型网站项目：推荐使用外联式CSS

CSS样式规则语法

===================================================================

• CSS规则

• CSS规则由两个主要部分构成：选择器，以及一条或多条声明

• 样式规则

• 以内嵌式样式表为例 — 外联式也一样

• 所有的CSS代码都必须书写在标签内部的一对

• 注意事项

• 分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误

• CSS中所有属性与属性之间对空格、换行、缩进不敏感

• 一个清晰易读的CSS代码，离不开CSS注释的合理添加

• 语法格式

• /* 中间部分为注释内容 */

• 快捷键

• ctrl + /

CSS代码书写风格

===================================================================

代码风格是实际开发中的书写方式，并非强制标准

• CSS样式格式

• 展开格式：开发过程使用，代码可读性强，便于调错

• 紧凑格式：上传服务器时使用，减少不必要的空白字符，加锁文件大小，有利于传输

• 英文大小写

• CSS中的英文可以使用大写，也可以使用小写，不影响实际效果

• 建议：

• CSS中的选择器和样式属性名、属性值等都是用小写英文，特殊情况除外

• 空格规范

• 选择器与大括号{}之间保留一个空格

• 属性值与前边的冒号之间保留一个空格

常用属性 — color

======================================================================

• 作用：给蚊子设置颜色

• 属性名 k : color

• 属性值 v : 颜色名、颜色值

• 颜色名

• 使用颜色的英文单词进行表示

• 颜色值

• 使用具体颜色的数值表示

• 包括：rgb模式和十六进制模式写法

• rgb模式

• 根据红绿蓝三原色进行混合而成的颜色模式

• 每个原色的取值范围是0-255，一共256个数值，三个原色共能混合成1677多万种颜色

• 书写方式：rgb（红，绿，蓝） — color: rgb(123,231,20)

• 十六进制模式

• 是rgb模式的一种简化写法，使用十六进制的数字字符去替换十进制的0-255的数字

• 十六进制：逢16进1，每个数位上只能出现0-9，a-f之间的字符

• 书写为颜色值时，红绿蓝每个色值都要使用两位数的十六进制进行替换

• 书写方式：使用#开头，后面连续书写红、绿、蓝三个颜色的十六进制的两位数值 — color: #0000ff

• 十六进制颜色值简写模式：如果红绿蓝三个原色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写

• 红色 #f00

• 绿色 #0f0

• 类似#808080是不能进行简化的

常用属性 — font-family

============================================================================

• 作用：定义元素内文字的字体

• 属性名 k : font-family，字体属于font综合属性的一个单一属性

• 属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号间隔

• 常用字体

• 中文

• 宋体 — SimSun

• 微软雅黑 — Microsoft Yahei

• 英文

• Arial

• consolas

• 如果不设置字体属性，不同浏览器有自己的默认字体

• 注意事项

• font-family可以设置多个字体名称，在实际加载时只会选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体

• 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路

• 中文字体中一般都带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面

• 实际应用中

• 首选字体需要根据设计图确定，最后需要设置备用字体

常用属性 — font-size

==========================================================================

• 作用：设置文字的大小

• 属性名 k ：font-size，字号属于font综合属性的一个单一属性

• 属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位

| 相对长度单位 | 说明 |

| — | — |

| px | 像素值，最常使用的单位 |

| em | 倍数，继承自祖先元素设置的字号的倍数 |

| % | 百分比，集成自祖先元素设置的字号的百分比 |

| 绝对长度单位 | 说明 |

| in | 英寸 |

| cm | 厘米 |

| mm | 毫米 |

| pt | 点 |

• 注意事项

• 如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如chrome、IE，默认显示字号为16px

• 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。Chrome浏览器最先加载显示字号为8px，IE浏览器最小可以支持1px的字号

• 实际应用

• 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普遍使用14px+

• 尽量使用12px、14px、16px等偶数的数字字号，ie6等老式浏览器支持奇数会有bug

• 实际工作中的字号，需要以设计图为准

CSS样式属性 — 盒子实体化三属性

============================================================================

如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性

• 实体化属性

| 属性名 | 属性值 | 说明 |

| — | — | — |

| width | px单位的数值 | 定义元素占有的宽度 |

| height | px单位的数值 | 定义元素占有的高度 |

| background-color | 颜色名、颜色值 | 定义元素的背景颜色 |

CSS选择器 — 标签选择器

========================================================================

在内嵌式和外部CSS中，要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素，这时需要用到CSS中的选择器

• 选择器

• 选择要添加样式的HTML标签的一种方法、模式

• 首先学习CSS2.1版本的七种选择器：

• 基础选择器：标签选择器、id选择器、类选择器、通配符选择器

• 高级选择器：后代选择器、交集选择器、并集选择器

• 标签选择器

• 通过标签名选择标签元素

• 书写方式：标签名

• 选择范围：选中的是HTML文件中所有的同名标签

• 注意：标签选择器可以选择所有的同名标签，会忽视HTML元素的嵌套关系，不管嵌套多深，都能被选中

• 优点：可以选中所有的同名标签，设置所有同名标签的公共样式

• 缺点：只能实现全选，不能实现局部特殊样式

CSS选择器 — id选择器

========================================================================

• 通过标签上的id属性去选择标签

• 书写方式：#id 属性值

• 选择范围：只能选中一个标签（因为id具有唯一性）

• id命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个id属性值必须是唯一的，不能与其他的id同名

• 注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签去不同的id名，分别选中设置

• 缺点：id选择器只能实现单选，不能帮我们完成多选功能

CSS选择器 — 类选择器

=======================================================================

• 通过标签的class属性去选择标签

• 书写方式：.class属性值

• 选择范围：页面中所有class属性值相同的标签

• class命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class属性值可以与其他的class相同

• 特点

• 多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同一个类选择器选中

• 一个标签的class属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这个标签，每个选择器后面的样式都会添加给同一个标签

• 类选择器的特殊应用

• 原子类：在CSS中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可

• 类选择器的优点

• 通过一个类选择器进行多选，选中多个标签，添加公共样式

• 一个标签可以被多各类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量

• 实际工作中，通常我们有一个使用规律：类上样式（CSS）id上行为（JS）

CSS选择器 — 通配符选择器

=========================================================================

• 通过一个特殊符号选择页面内所有的标签

• 书写方式：*

• 选择范围：包含标签在内的所有标签

• 通配符特点和应用

• 优点：可以实现全选，简化书写

• 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签页加载一次样式，导致浏览器多做无用的工作

• 注意：实际上线的网站不允许使用 * 去清除默认内外边距

• 不过普通的小案例，代码量较小，为了节省书写，可以使用

CSS选择器 — 后代选择权

========================================================================

由于基础选择器不能实现所有选择情况，后期再基础选择器的基础上衍生出了几种高级选择器。高级选择器的组成部分是基础选择器

• 通过标签之间存在的嵌套关系（族谱关系）去选择元素，基本组成部分就是基础选择器

• 后代选择器也叫包含选择器

• 书写方式：空格代表后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级

• 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签

• 注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是父子关系

• 优点：减少class属性的定义使用，选择效率更高

/* div ul li p {

color: red;

} */

div p {

color: red;

}

• hi xl

  CSS选择器 — 交集选择器

  ========================================================================

  • 通过一个标签之上满足所有的基础选择器的需求去选择标签

  • 书写方式：基础选择器进行连续读写，如果有标签选择器参与交集，必须书写在开头

  • 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中

  • 比较常见的是标签与类的交集

  p.list {

  color:red

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  最后

  javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

  

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-BeJzJjzr-1712763424298)]

  最后

  javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

  [外链图片转存中…(img-cU4mgwB0-1712763424299)]

  [外链图片转存中…(img-rvY9KCCv-1712763424299)]

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  [外链图片转存中…(img-GAyKTIQT-1712763424299)]