1、内部样式表
这种就是通过 style 标签，来写 CSS。
这种方式不太常见。
但如果是一些比较简单的CSS，这么写也没毛病。
比如：搜狗搜索里面的CSS代码，就是 这么写的。
另外，前面收到的经典案例就是一个内部样式的写法。
也就是当前的 style标签中，对 p标签的添加的属性 是针对当前HTML文件中的所有 p 标签。也就是说，接下来的 p标签的内容都是红色颜色。
2、内联样式 / 行内样式表
通过 HTML 标签中的 style 属性，来应用一些样式。
保存刷新
这种内联样式，是属于一种比较特殊的用法，通常会搭配 JS 来使用。
另外，这种写法只适合于样式特别简单的情况。
如果样式比较复杂，这里就会显得很乱。
内联样式只是针对当前元素生效。
也就是说，不需要写选择器，也不用写 {}，直接写CSS属性和值即可。
3、外部样式
这种样式，在实际开发中是用的最多的。
这种样式，就是把 CSS 代码给单独提取出来，放到一个 CSS 文件中。
然后在 HTML 代码量，通过 link 标签，来引入CSS文件
为什么这种方式最常用？
因为它好用啊！
这种方式，可以让多个 HTML 复用同一份样式。
比如：
我们现在要写一个网站，这个网站里可能有很多页面。
这些页面样式几乎是相似的，
所以，像这种情况，都是可以使用同一份样式表，来进行复用。
虽然第三种引入CSS的方法最常使用。
但是本篇博文主要以 内部样式表的方式，也就是以 style 标签的形式来引入CSS。
之所以选择 内部样式表的形式，完全是因为它写起来简单。
不用去多次创建文件，直接在HTML内部，通过 style 标签来引入 CSS 即可。
========================================================================
1、紧凑风格
2、展开风格(推荐)
这个代码风格对于 Java的程序员来说，很容就能接收。
而对于 C++ 的朋友，他们是习惯于大括号另起一行。
这就会导致多出一个换行。
虽然对于程序员友好了，但是整体的 CSS 文件会变大。
这是由于 CSS 文件都是网络传输给浏览器，然后由浏览器来解析的。0
如果 CSS 文件变大了，也就更吃网络带宽，从而影响运行效率。
可以这么说：像前端（JS,CSS,HTML）写的代码，都是通过网络传输给浏览器，在浏览器上执行的。
所以文件的大小’，就直接影响到 浏览器这边的一个加载速度。
就比如前面搜狗，搜索蛋糕的那张图。
这个特点，不仅仅是搜狗，其它的网站，它们的CSS 一般都是这种紧凑风格。
但是在实际开发代码的阶段，是使用的 展开风格 。
至于为什么浏览器上变成紧凑风格，是因为 通过了 第三方的工具，自动进行转换/替换的。
也就是俗称的：前端的打包工具。
而且不光是 CSS 如此，JS 更是如此，更加丧心病狂。
JS 不光会把 缩进进行什么的去掉，还会把长的变量名替换成 a b c d 这种名字。
有的人可能会有疑问：JS代码转换之后，还能转换回来吗？
可以！但是，只有内部人员才能做到。
打包工具在打包的时候，不是进行替换嘛。
替换的时候会单独记录一个文件。
借助这个记录文件，就能还原回来。
至于为什么只有内部人员，才能复原。
很好理解，上述的操作，是在这个有源文件的基础上进行的操作。
没有源文件，你怎么对其进行打包，打包工具怎么去生成记录文件。
CSS 是不区分大小写，但是我们开发时统一使用小写。
HTML 和 CSS 一样，都是不区分大小写的，并且同时使用小写。
正是因为统一使用小写，所以在 CSS中 就不存在 “驼峰命名法”。
比如：将 hello world 挨在一起。
小驼峰：helloWorld
大驼峰：HelloWorld
而 CSS：helloworld，这样的写法阅读性就很低。
因此，CSS 里面通常会使用“脊柱命名法”：hello-world
也就是使用 - 号来进行分割单词。
就跟前面展开式风格的代码一样。
‘
但是！脊柱命名法，在日常开发中并不常见，因为大部分的编程语言，变量名都不允许使用 - 号，为了防止和减号混淆。
因为 - 号，在其他的编程语言中，可能会被当做减号 和 负号来进行操作。
但是，CSS 并不能进行运算，也不能表示逻辑。
减号，就相当于空出来了一样，所以 CSS 即使用 - 号，来作为分割单词的分割符。
==================================================================
首先，我们选择器的功能，就是选中页面的元素(标签)。
选择器可以一次选中一个，也可以一次选中一批。
主分成 2 大类：
1、基础选择器(单个选择器构成的)
2、复合选择器(把多种基础选择器综合运用起来.)
1、基础选择器
标签选择器
写的选择器，就是一个 HTML 的标签名
类选择器
这个类选择器，可以说是我们最常使用的一个选择器，而且也是最灵活的。
通过 类选择器，我们可以随心所欲的选择任意想要的元素。
理论上来说：只要有这一种选择器就够了。
就是说：有了类选择器，其它的选择器都可以不用。
类选择器怎么创建？
首先，需要在 CSS 代码中，创建一个 类名。
在对应的 HTML 元素中，通过 .class 属性来引用这个类名
此时，具有该类名的元素，就都会应用上相关 CSS 属性
有的人朋友可能会说：这不就是封装嘛。
说是封装，也没毛病。
但是 CSS 和 Java 中的class，两者之间毫无关系。
另外，CSS 和 Java面向对象的类，也没有关系。
这 CSS 和 Java 的情况，压根就不是一回事！
Java中类更nb一些，可以通过 public，private，protected 来设置访问权限，还可以继承，组合，反射，多态等等。
相比之下，CSS 的 class，只是单纯的起了个名字，功能并没有像 Java 那么丰富。
总之，我们的类选择器，其实是最灵活，最方便的一个选择器。
我们可以通过类选择器，随心所欲的来指定 任意个 的 任意元素，它被应用的样式。
另外，虽然 类选择器，已经可以一手包办了，但是为了代码写起来更加简单。
因此，还是引入了很多各种其它的选择器。
这就类似于：为什么有了 CPU（中央处理器），还要有GPU（显卡）？
理由很简单：
虽然 CPU 也能显示图形，毕竟很多CPU都带有核显。
但是 核显，没有 GPU 好！
这就好比：CPU 就是通用方案，而 GPU是专用方案。很明显 GPU更适合。
id 选择器
id 选择器的用法，和类选择器有点相似。
但是，与类选择器相比，id选择器还是具有一定的局限性。
想要使用 id 选择器，先给被选中的元素，设定一个 id 属性。
首先，要注意 id 在 一个页面中，是唯一的，不可重复的。
因此， id 选择器只能选中一个元素，不能选中多个元素。
通配符选择器
通配符选择比较简单，就是一个单单的 * 号。
通配符，在将 MySQL的时候，就已经介绍其概念。【概念上是相似的】
比如 select 操作中，有一个 模糊匹配的操作，里面就涉及到 通配符的概念。
% 和 _
%： 代表 任意个字符【任意个：大小不做限制，可以是很大或者很小的数。包括0】，且每个字符又可以表示为任意字符(就是打牌中赖子一样，可以将它当做任意一张牌)。
_ ：下划线它只能代表一个字符，但是这一个字符是“赖子”，即：可以表示任意字符。
CSS中 * 号，也是类似。
起到的作用：直接选中了页面上的所有元素。
通配符选择器，还是蛮常用的。
最大的用途就是：取消浏览器的默认样式。
什么是浏览器的默认样式？
提示
其实 基础选择器 不止4 种，包括下面要讲的复合选择器也不止4种。
这么说吧，CSS 里面的选择器的种类，非非非常繁琐！
选择器大概有几十种，快上百了！
本篇博文，只讲 最常用 And 最简单 的几个选择器。
复合选择器
复合选择器，其实就是把上面的基础选择器，进行了组合操作。
通过这个组合，来完成更方便选择元素的一个效果。
后代选择器 && 子选择器
后代选择器：可以通过多个选择器的组合，能够选中 某个元素里面的子元素，孙子元素(后代元素)。
子选择器：通过多个选择器的组合，能够选中某个元素里面的子元素.
并集选择器
并列的写多个选择器。
中间使用逗号来分割。
这里的并集选择器，里面可以写简单的选择器，也可以写复合的选择器。
另外，在上面的案例中，有的朋友可能会有疑问：
我们的并集选择器，明明是针对 ol 的 li 和 ul 的 li，进行设置样式。为什么连理 a标签的内容没有受到影响？
虽然我给理由的是这是两个 子选择器。
但是，真实情况是：有些情况会影响到 li 里面的元素，有些情况不会影响到 。
这都不一定。
这就是 CSS 比较讨厌的地方，它这里面是很多的特殊情况！
比如 把 a 标签 换成 无语义 span 标签。【不要问什么，这就是规定】
另外一方面，有些属性也能影响到 color（颜色），font（字体）…
这种会被子元素继承。
还有很多属性不会被子元素继承。
这一块，一旦展开，相当复杂。【博主把持不住，就不讲了】
不过，我可以提示你们，这个话题是有关 CSS ‘继承’特性。
而且只能硬背。
因为博主是后端的，所以前端不会太深入。
前端的朋友，你就要注意了！这是都是你要背的。（包括下面的内容）
而且 选择器，其实是有优先级（包含这 CSS 的一个“层叠性”）。。。【反正博主是知道有这回事，但不会】
伪类选择器
这个选择器，我就不展开介绍了。
伪类选择器，其实它是属于一些特殊场景的应用。
伪类选择器个数：选择器 + 冒号 + 不同元素的状态+{应用属性}。
比如：链接伪类选择器【不止这一种哦。】
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
link 和 visited 不常用。
hover 和 active 比较常用，我就演示这两个。
===================================================================
格式：font-family: “字体命名”
字体英文和中文都行。
需要注意的是：
设置字体的时候，需要保证，我们设置的字体，对方的机器上存在。
系统自己是默认带了一些字体的，还可能会有一些额外的第三方字体、
如果你想用这个第三方字体，就得确认对方的机器上有。
那么，问题来了：如何确认对方的机器有这个字体呢？
可以通过 HTML中 link 属性来从网络上加载字体文件。
另外，设置字体的时候，我们可以设置多个。
就是说，我们一次可以设置多个字体。
从左往右，如果第一个字体不存在，就使用第二个字体样式，以此类推、
如果第一个字体存在，就使用第一个字体样式。
如果都没有，系统就使用自己默认的字体样式。
格式： font-size: 大小值+单位 px
通过 font-size，就可以去调整 每一个标签里面的字是大，还是小。
格式：font-weight: 值
值：数字范围是100-900，而且只能填 100，200，300，这样的整数。
值，还有一种取值方式，使用单词。
格式：font-style: 样式
它的功能是：使文字倾斜。
实际上，其实更多的是用来 取消文字倾斜。
通过把 样式设置为 normal。
===================================================================
其实我们已经用过，就是color属性。
另外，color的取值方式有很多种，其中第一种就是直接使用单词。
但是，这种方式能够表示的颜色种类比较有限。
我们的颜色，绝不止 红橙黄绿青蓝紫，这几种基础颜色。
这些颜色，还可以详细划分。
color的第二种取值方式：使用 RGB 的方式来表示。
这是我们计算机里表示颜色的一种典型方式。
其实计算机表示颜色的方法有很多种。
其中 RGB 是最常用的方法。
RGB：
R：red
G：green
B：blue’
RGB，被叫做 色光三原色。
使用不同比例的三原色混合，就会构造成各种各样不同的颜色。
在 CSS 里面，给这三个分量分别都使用一个字节来表示。
取值范围 0 - 255，
取0，这三个分量几乎没有。
去255，这个分量全部拉满。
我们通过给 这三个分量 进行不同比例的调配，达成一个不同颜色的效果。
有的人可能会有疑问：你确定这是三原色吗？我们小学美术课，学的三原色是红黄蓝诶。
这里大家要明白：每个创景中的三原色，大部分是不相同的。
美术的三原色，是颜料的三原色。
而我们刚才讲的是：色光三原色。
区别就在于，你把颜料的三原色拉满就是黑色。
把色光三原色拉满，就是 白色。
如果是在分不清某个颜色，你们可以使用取色器。
qq截图，就带有这种功能。
你们可以去唱，当时点击按钮之后，你的鼠标箭头放在哪里，它就显示该区域的 三原色的三个分量是多少。
第三种取色方式
还是使用 rgb，但是 使用的是 16进制的风格；来表示的。
取值范围 00 - ff
另外，这种十六进制的写法，可能会有缩写。
比如：
颜色分量：XXYYZZZ >>XYZ【注意，只有这种叠词形式，才能缩写】
4、 color： rbga(red值，green值，blue值，alpha值)
alpha - 透明度
文本对齐(text-aliign: 对齐位置)，一共有三种风格：靠左，靠右，居中。
分别对应 text-aliign: left;，text-aliign: center;，text-aliign: right;
在 HTML 标签中，能够设置下划线和删除线。
这里也可以通过 CSS 来实现。
在 HTML格式化标签中，其中 del / s 标签 是表示删除线。
ins / u 标签，表示下划线
在实际情况中，遇到要使用 下划线和删除，并不会去使用 HTML 中的标签。更多的是使用 CSS 的 文本装饰 来实现的。
因为像这种下划线和删除线，就是作为一种样式来看待的。
所以，样式基于CSS 来实现更合理。
格式：text-decoration: [值];
常用取值:
underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用
文本装饰这一块，最常见的用法不是说给元素加上下划线/删除线。
而是把已有的 下划线 / 删除线 给去掉。
典型的就是针对 a 标签，都是希望它没有下划线的。
下面，我们再来演示一下其他的文本装饰属性。
这个其实在 HTML中的p标签讲过了。
text-indent: [值];
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
小拓展：
CSS 中表示尺寸的单位：
1、px【最常用的一个单位：像素】
2、em
em，是一个相对的单位，相当于当前元素的 文字大小。
像 p 标签里面的文字，默认大小是 16px。
1 em => 16px，2 em => 32 px；0.5 em => 8 px
所以，我们就可以通过 em 这种单位，我们就能很好的控制 缩进 几个字。
em 为单位是非常有用的。
有的情况下，页面允许用户来修改字体的大小。
比如：看小说
字太小，看的累。字太大看的更累。
所以，这种情况，一般就允许用户自定义文字的大小。
我们就不应该因为用户修改了字体的大小，而引起 排版，缩进，出现混乱的情况。
因此，我们就会广泛的使用 em 作为单位。
不管用户怎么去设置字体大小，em 始终都是当前一个文字的大小。
这样就会有一个良好的表现。
另外 ，em单位，不光可以用在 text-indent 里面，其它的元素，但凡是设置尺寸，都可以使用 em。
而且，text-indent 还可以取一个负数的值。【反向缩进】
很明显的一个效果，字符都缩进到屏幕外面了。
行高 == 字体大小 + 行间距。
行间距，大家应该都不陌生。
像我们去使用 word 之类，去排版。都会涉及到设置行高。
所以，CSS 里面呢也能设置 行高 和 行间距，但是它不是直接通过 行间距，这个属性来设置的；而是通过 行高，这个属性来设置的。
字体大小 和 行高 能设置，那不就是间接的设置了行间距嘛。
【行高 - 字体大小 == 行间距】
下面我们来通过实例，来看看设置行高的效果。
又或者说：设置行高的意义是什么？
===================================================================
背景颜色
格式：background-color: 【指定颜色】
它的具体用法和 color 几乎是一样的。
1、指定颜色，可以使用英文单词
2、RGB
3、#十六进制数字
4、RGBA
5、transparent：背景透明（应用了父元素的背景，）
就是说，符元素的背景是什么，目前的你背景就是什么。
背景图片
格式：background-image
背景平铺
像平铺这种效果，很少会有人喜欢。
那么，我们该如何取消背景平铺？
就可以通过 设置背景图片的平铺效果（background-repeat）。
背景位置
当我们将平铺效果取消后，页面效果如下所示。
所以，我们就可以通过 background-position 来设置背景图的位置。
背景尺寸
虽然，我们通过 background-position：center; 将其背景图片居中。
但是，显示的效果，依旧不理想。
我们想要达到的效果，是以一张背景图片将“整个页面（整个div框）”铺满（拉伸的效果）。
这时候，我们就可以使用 background-size 来设置背景图片的大小。
background 这一系列属性，对于图片的处理能力，其实是要比 image 来的更厉害。
因此，在实际开发中，也经常会使用 background 来代替 img 标签。
【在上述案例情况中，div 就代替了 img标签，利用 CSS 属性，来实现同样的功能，而且功能更丰富】
===================================================================
在上面的例子中，显示的图片都是 中规中矩的正方形。
四个边角都是很尖锐，这点是不符合现代的设计风格的。
现在我们设计的这些界面，都要求柔和一些，带点圆角的效果。
比如：
在我们的手机 APP上的 logo，一般都是圆角的。【有些手机上，图标甚至是圆的】
CSS 中通过 border-radius: length; 来设置圆角的效果。
length 是内切圆的半径. 数值越大, 弧线越强烈
简单来说，length越大，想保证圆与直角两边相交，圆心就得离直角越远。
那么，弧长也会增加，也就意味着弧度也会增加。
弧长公式：
l = n(圆心角)× π(圆周率)× r(半径)/180=α(圆心角弧度数)× r(半径)
如果我们想要得到一个圆形，也可以通过同样的属性来设置。
首先，我们要先有一个正方形，基于正方形来延伸出圆形。
要想一个正方形变成圆形，只需要边角弧度足够大就行了。
当 border-radius: length；中的length为20px时，很显然离圆形还有很大的差距。
下面，为了方便，我就直接使用 开发者工具，去调整。
呈现最终的一个结果。
我们发现：当我们将length调整到正方形边长的一半时（超过一半，再增加就没有效果了），我们就可以得到一个圆。
也就是说，当 length 为 width / height 元素的一半时，我们就能通过一个正方形获得一个圆形。
另外，除了写具体数字之后，还可以写作50%（这里的50%，就是以宽度为基准），效果是一样的。
圆角矩形类似 胶囊形状。
border-radius，不仅可以针对四个角，同时进行设置、
ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？
//img-blog.csdnimg.cn/01ac885d9f3843d981e957a935d473dd.png)
要想一个正方形变成圆形，只需要边角弧度足够大就行了。
当 border-radius: length；中的length为20px时，很显然离圆形还有很大的差距。
下面，为了方便，我就直接使用 开发者工具，去调整。
呈现最终的一个结果。
我们发现：当我们将length调整到正方形边长的一半时（超过一半，再增加就没有效果了），我们就可以得到一个圆。
也就是说，当 length 为 width / height 元素的一半时，我们就能通过一个正方形获得一个圆形。
另外，除了写具体数字之后，还可以写作50%（这里的50%，就是以宽度为基准），效果是一样的。
圆角矩形类似 胶囊形状。
border-radius，不仅可以针对四个角，同时进行设置、
ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？
[外链图片转存中…(img-qSO8igps-1714561151892)]
[外链图片转存中…(img-YnDMMpHx-1714561151893)]
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
