CSS快速入门

面试准备+复习分享：

为了应付面试也刷了很多的面试题与资料，现在就分享给有需要的读者朋友，资料我只截取出来一部分哦

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

• CSS指的是层叠样式表

• 样式表定义如何显示HTML元素

• 样式通常存储在样式表中

• 添加样式到HTML，使得样式与内容分离，易于维护

• 外部样式表可以极大提高工作效率

• 外部样式表通常存储在 CSS 文件中

• 多个样式定义可层叠为一个

---

样式解决了一个很大的问题

---

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

---

css是如何工作的，仔细体会CSS的用法及智慧

---

CSS如何工作

---

CSS语法

---

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

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

为了让CSS可读性更强，你可以每行只描述一个属性:

h1{

color:blue;

font-size:12px;

}

CSS注释

---

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

p{

text-align:center;

/这是一个注释/

color:rgb(252, 0, 0);

font-family:arial;

}

---

CSS Id和Class选择器

---

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"属性。

标记选择器

我是一个段落

通过标记来简单更改样式，有局限，所以就有了class 和 id 选择器

---

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“xigua”:

#xigua

{

text-align:center;

color:red;

}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

---

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

---

全局选择器

如若想要HTML中所有标记都使用同一种格式，就可以使用全局选择器。

语法格式：

*{margin:0; padding=0}

其中*表示对所有标记起作用，margin表示属性名称，0表示属性值

这个css表示设置所有标记的外边距和内边距都为0

动漫

斗罗大陆

你收看了吗

---

组合选择器

将多种选择器进行搭配，可以构成一种复合选择器，也成为组合选择器，即将标记，类，ID选择器结合起来使用，标记+类，标记+ID。比如：

qu tong

使用class组合选择（标记.类名）

使用类选择

使用ID组合（标记#ID）

---

继承选择器

默认儿子继承父亲，除非大儿子说不要继承说不要继承父亲，那么他不继承，后面的儿子都没吭气，那么他们默认都继承爸爸的样式。

我们要了解HTML文档树和CSS继承。

zheng chang de

CSS的继承

---

伪类

伪类也是选择器的一种，用伪类定义的CSS样式并不作用在标记上，而是作用在标记的状态上。

由于很多浏览器支持不同类型的伪类，没有统一起来，因此不常用。

超链接的伪类是主流浏览器都支持的，包括 ：link ：visited：hover三种状态。

连接到本页

百度

---

属性选择器

直接通过标记属性来进行控制，而不通过标记名或自定义名，直接使用属性控制HTML标记样式的选择器称为“属性选择器”

属性选择器能够通过某个属性是否存在或属性值来寻找元素，因此能实现某些非常有趣的效果，CSS2标准有4个属性选择器，CSS3又新加了3个属性选择器，一共有7个属性选择器，共同构成了强大的标记属性过滤体系。

---

CSS创建

---

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

如何插入样式表

插入样式表的方法有三种:

• 外部样式表(External style sheet)

• 内部样式表(Internal style sheet)

• 内- 联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

写在最后

学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！

最后再分享的一些BATJ等大厂20、21年的面试题，把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。

Mybatis面试专题

MySQL面试专题

并发编程面试专题

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

写在最后

学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！

最后再分享的一些BATJ等大厂20、21年的面试题，把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。

[外链图片转存中…(img-1I2jA5jQ-1715824861787)]

Mybatis面试专题

[外链图片转存中…(img-6Q2AxNrY-1715824861787)]

MySQL面试专题

[外链图片转存中…(img-F1M0wPPr-1715824861788)]

并发编程面试专题

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取