-
导入样式
-
样式的优先级
-
- 1．行内样式和嵌入样式比较
-
2．嵌入样式和链接样式比较
-
3．链接样式和导入样式
-
四、CSS复合选择器
-
- 交集选择器
-
并集选择器
-
后代选择器
-
子选择器
-
相邻选择器
-
五、CSS3新增的选择器
-
- 属性选择器
-
伪类选择器
-
- 1. 基本结构伪类选择器
-
2. 与元素位置有关的结构伪类选择器
-
3.UI伪类选择器
-
伪元素选择器
-
- 1．:first-letter和:first-line
-
2．选择器:before和:after
-
六、使用CSS设计网站页面
=======================================================================
1．CSS的发展
2．浏览器对CSS3的支持
流行的浏览器对CSS都有很好的支持，但不同浏览器对CSS3很多细节的处理存在差异。
3．CSS的编辑器
Dreamweaver CS5、WebStorm、IntelliJ IDEA、VSCode
CSS的一个示例
示例：使用传统的HTML设计页面。
实现效果
HTML代码
使用CSS改进HTML设计页面
使用CSS有以下几个主要优点。
（1）结构和风格分离
（2）扩充HTML标记
（3）提高网站维护效率
（4）可以实现精美的页面布局
==========================================================================
CSS可以认为是多个选择器组成的集合，每个选择器由3个基本部分组成——“选择器名称”、“属性”和“值”，格式定义如下。
selector {
property:value;
}
一个HTML页面由很多不同的标记组成，例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。
tagName {
property:value;
}
类选择器用来为一系列标记定义相同的呈现方式。
.className {
property:value;
}
示例所示为标记选择器和类选择器的综合应用
ID选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。
ID选择器的一个重要功能是用做网页元素的唯一标识，所以，一个HTML文件中一个元素的ID属性值中惟一的。
定义ID选择器的语法格式如下。
#idName{
property:value ;
}
在定义ID选择器时，需要在idName前面加一个“#”符号，如下面的示例所示。
#font1{
font-family:“幼圆”;
color:#00F;
}
类选择器与ID选择器主要区别如下。
（1）类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。
（2）ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器在样式定义上发生冲突时，优先使用ID选择器定义的样式。
示例ID选择器的应用
开展计算思维教学是计算机科学发展的必然结果。
计算机早期的发展，在计算机科学的引领下，指导什么能做，什么不能做；什么做的快，什么做的慢；什么做的好，什么做的不好。
现在已经没有章法了，似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。
效果
===============================================================================
最简单的一种使用方式，直接把CSS代码添加到HTML的代码行中，由<style>标记支持，代码示例如下：
<h1 style="color:blue;font-style:bold"></h1>
将样式定义作为网页代码的一部分，写在HTML文档的<head>和</head>之间，通过<style>和</style>标记来声明。
嵌入的样式与行内样式有相似的，也有不同，行内样式的作用域只有一行，而嵌入的样式可以作用于整个HTML文档中。
示例是包含行内样式和嵌入样式。
链接样式是在HTML中引入CSS使用频率最高的方法。
-
体现了“页面内容”和“样式定义”分离
-
实现了内容描述和CSS代码的分离
-
网站的前期制作和后期维护都十分方便。
链接样式先要定义一个扩展名为“.css”的文件（即外部样式表），该文件包含需要用到的CSS规则，不包含任何其他的HTML代码。
链接样式表的方法就是在HTML文件的<head>部分添加代码，格式如下。
链接样式表的一个示例
HTML文件
开展计算思维教学是计算机科学发展的必然结果。
计算机早期的发展，在计算机科学的引领下，指导什么能做，什么不能做；什么做的快，什么做的慢；什么做的好，什么做的不好。
现在已经没有章法了，似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。
CSS文件
导入样式和链接样式的操作过程基本相同，都需要一个单独的外部CSS文件，然后再将其导入到HTML文件中，但在语法和运行过程上有所差别。
导入样式是HTML文件初始化时将外部CSS文件导入到HTML文件内，作为文件的一部分，类似于嵌入。
导入外部样式需要在内嵌样式表的<style>标记中使用@import导入一个外部的CSS文件，示例代码如下。
示例
1．行内样式和嵌入样式比较
行内样式的优先级大于嵌入样式
2．嵌入样式和链接样式比较
嵌入样式的优先级高于链接样式。
3．链接样式和导入样式
链接样式的优先级高于导入样式的优先级。
通过前面的例子，CSS样式表方式的优先顺序由高到低次依为：行内样式、嵌入样式、链接样式和导入样式。
=========================================================================
复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器，可以实现更强、更方便的选择功能，主要有交集选择器、并集选择器和后代选择器等。
交集选择器是由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。其中，第一个必须是标记选择器，第二个必须是类选择器或ID选择器，例如：“h1.class1；p#id1”。
交集选择器的基本语法格式如下。
tagName.className {
property:value;
}
示例演示了交集选择器的作用
代码
类选择器，12px
效果
并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，每个选择器可以是任何类型选择器。
如果某些选择器定义的样式完全相同，或者部分相同，则可以使用并集选择器。
下面是并集选择器的语法格式。
selector1,selector2,… {
property:value;
}
示例演示了并集选择器的作用
代码
在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。例如，当<div>与</div>之间包含<b>标记时，就可以使用后代选择器定义出现在<div>标记中的<b>标记的格式。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。
selector1 selector2 {
property:value;
}
两个选择器之间用空格隔开，并且selector2是selector1包含的对象。
示例
代码
- 交集选择器
- 并集选择器
- 后代选择器
- 子选择器
- 相邻选择器
效果
子选择器语法格式如下：
selector1>selector2
示例
代码
子选择器是在CSS2.1以后的版本中增加的。
本行应用了子选择器,幼园红色
本行不属于相邻选择器，因为div标记和p标记不同级
本行应用相邻选择器,幼园红色
效果
相邻选择器的定义符号是加号（+），可以选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）
示例
代码
相邻选择器是在CSS2.1以后的版本中增加的。本行应用相邻选择器,幼园红色
本行不与div相邻,相邻选择器无效
相邻选择器是在CSS2.1以后的版本中增加的。本行不属于相邻选择器，因为div标记和p标记不同级
相邻选择器是在CSS2.1以后的版本中增加的。本行无标记，不影响应用相邻选择器
本行应用相邻选择器,幼园红色
效果
===========================================================================
通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。
为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。
属性选择器及其功能
示例是关于属性选择器的一个例子
代码
- Welcome to DL
- Firework素材
- Photoshop素材
效果
伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在CSS中已经定义好的选择器。
伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。
1. 基本结构伪类选择器
基本结构伪类选择器
伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。
2. 与元素位置有关的结构伪类选择器
与元素位置有关的结构伪类选择器
示例
总结
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！
而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！
资料截图 ：
高级前端工程师必备资料包
595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
