整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
技术等级】初级
【承接文章】《强大的CSS选择器，CSS的核心技术，前端小白必备功底》
本文重点讲解CSS技术中有关字体样式的属性以及这些属性的取值。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
从本文开始，小海老师将带领大家认识CSS技术中的所有属性。我把CSS技术中的各个属性进行了分类，首先我们从与字体样式有关的属性开始。
CSS中与字体有关的属性包括以下六个：
font-family
font-size
font-weight
font-style
font-variant
color
一、字体样式属性：
CSS利用font-family属性来设置字体或字体列表。
1、设置字体：
.sty01{font-family:黑体;}
上述代码定义了用户自定义类sty01，该样式设置字体为“黑体”。利用class属性取值为sty01样式的HTML标记对中的文字将以“黑体”的字体显示。
2、设置字体列表：
.sty02{font-family:汉仪综艺体简,微软雅黑,黑体;}
上述代码定义了用户自定义类sty02，该样式设置了一个字体列表。利用class属性取值为sty02样式的HTML标记对中的文字，首先以“汉仪综艺体简”的字体显示，目标浏览器所在的设备若没有安装该字体，则自动以“微软雅黑”的字体显示；目标浏览器所在的设备若也没有安装“微软雅黑”字体，则自动以“黑体”的字体显示。
注意：为了防止CSS文件的中文字体名称不符合字符集的要求，所以习惯上都是用中文字体的外文名称来书写font-family属性的取值，下面我就为大家罗列几个常用的字体名称。
设置字体为 微软雅黑：.style1{font-family:Microsoft YaHei;}
设置字体为 宋体：.style2{font-family:SimSun;}
设置字体为 幼圆：.style3{font-family:YouYuan;}
设置字体为 黑体：.style4{font-family:SimHei;}
设置字体为 楷体：.style5{font-family:KaiTi;}
更多中文字体的西文名称，小海老师会在后续的文章中详细罗列。
二、字号大小属性：
CSS利用font-size属性来设置文本的字号效果
1、绝对大小：
xx-small
x-small
small
medium
large
x-large
xx-large
上述取值中：medium为默认值，medium以上的取值越来越小，medium以下的取值越来越大。
2、相对大小：
smaller，比上一级元素的字体大小小一号。
larger，比上一级元素的字体大小大一号。
代码实例：
<div style=“font-size:14px;”>
<span style=“font-size:larger;”>段落文字内容</span>
</div>
上述代码中“段落文字内容”的字体大小显示为比14px字号大一号的外观。
3、带有单位的长度值：
代码实例：.s1{font-size:16px;}
上述代码定义了用户自定义类s1，该样式设置字号为16px大小。
4、百分比：
设置字体字号为上一级元素的百分比大小。
代码实例：.s2{font-size:10%;}
上述代码定义了用户自定义类s2，该样式设置字号是上一级元素的字体大小的20%。
三、字体粗细属性
CSS利用font-weight属性来设置文本的粗细效果
normal，普通粗细，粗细度约为400。
bold，粗体，粗细度约为700。
bolder，更粗体，粗细度约为900。
lighter，更细体，粗细度约为500。
100、200、300、400、500、600、700、800、900：9个粗细等级。
但是现在的浏览器都无法将字体的粗细渲染的如此细腻，也就是说这9个等级的粗细度并没有明显的差异。
四、字体斜体属性
CSS利用font-style属性来设置文本的斜体效果
normal，普通，字体显示为不斜体。
italic，斜体，设置字体为斜体。
oblique，倾斜体，当特殊字体没有斜体效果时，可以使用该取值将字体倾斜。
五、设置字体是否为小型大写字母
CSS技术利用font-variant属性来设置是否为小型大写字母
normal，普通，字体显示为正常。
small-caps，小型大写字母。
六、设置字体的颜色
CSS技术利用color属性来设置文本颜色
十六进制颜色代码。
实例：h1{color:#ff0000;}
含义：重定义HTML中的h1标记对为红色。
十进制颜色代码。
实例：h2{color:rgb(0,255,0);}
含义：重定义HTML中的h2标记对为绿色。
颜色英文单词。
实例：h3{color:blue;}
含义：重定义HTML中的h3标记对为蓝色。
下一次小海老师会为大家讲解CSS中有关文本段落的属性，结合前面HTML的内容，可以对页面中的段落进行更为细致的调整。千万不要错过哦。
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
天是刘小爱自学Java的第78天。
感谢你的观看，谢谢你。
话不多说，继续前端之CSS的学习：
其中在头条搜索中也有很多关于CSS的干货教程，专业又详细，点击下方卡片搜索“CSS”了解更多
CSS，全称是Cascading Style Sheet，翻译过来就是层叠样式表。
它有一个非常厉害的功能，就是美化网页。
本质上HTML也可以美化网页，但是CSS更加地强大，可以实现很多HTML不能实现的功能。
CSS有一个核心标签叫style，也就是样式的意思，CSS本身也就是可以设定各种各样的样式。
用一个例子来说明：
<style>标签，放在<head></head>标签里面。
①h1的美化
如果纯用HTML，是没法对标题进行颜色设置的。
但使用CSS，就可以对标题进行各种样式的设置，上图只举了颜色这个例子。
②字体的美化
字体是可以在HTML中设置属性的，比如颜色（color），比如大小（size）…
而CSS等于是将这些属性抽取出去了，专门放在<style>标签中了。
这样有什么好处？
降低耦合度，分工更加地明确，CSS专门用来美化，HTML专门用于结构搭建，如果想设定格式，指定CSS就好了。
这个就有点类似于Java中方法的封装，或者说经典三层架构。
Service层专门负责具体的业务逻辑，Dao层专门负责数据库的查询，Service想访问数据库，调用Dao层就好了。
CSS一共有三种引入方式。用例子说明：
①行内样式
直接在标签中添加style属性，也能起到引入CSS的效果。
但是为了降低耦合度，一般在HTML主干中只搭建结构，设定样式专门交给CSS来做。
②内部引入
也就是一开始的那个例子，sytle标签是放在head标签中的。
除了这两种，还有一种外部引入方式：
③外部引入（一）
可以自定义一个CSS文件，在里面写自定义的样式。
然后在HTML文件中使用style标签引入该CSS文件即可，其中引入格式如下：
@import+CSS文件路径。
和Java中的导包很类似，文件路径中的“..”表示回到上一层。
④外部引入（二）
除了使用style外，还可以使用link标签外部引入：
关于这三种引入方式的优先级：
行内引入是最优先的。
内部引入和外部引入，就看哪个离HTML文件主体近（就近原则）
选择器的作用在于：可以帮我们从页面上获得对应的标签。
其中有最基本的三种选择器：
①id选择器
格式为：#+id名{}
关于id我做了个测试，发现不能用纯数字，老实说我还挺奇怪的，一般id不都是纯数字么。
就当是CSS的命名规则好了，不能是纯数字，否则没有作用。
其中id选择器是唯一的，也就是一个id在一个HTML文件中只能有一个。
②类选择器
格式为：.+类名{}
类是可以有多个的，比如同样是font标签，相同的id只能有一个，但是相同的类可以有多个。
③标签选择器
格式为：标签名{}
HTML中是有很多标签的，可以直接使用过标签作为选择器，上图例子中是font标签。
关于这三种选择器的优先级：
id选择器最大，类选择器次之，标签选择器最小。
这其实也很好理解：
id选择器最精准，优先级越高（例子中①哪怕也是myClass类，标签也是font）,但样式还是按照id选择器设定的来。
除了三种基本选择器外，还有好几种选择器：
①层级选择器
格式为：div+空格+标签名{}
标签与标签之间是用空格隔开的。
在HTML中有一个div标签，这个标签和CSS结合起来很有用。
比如上述例子中，同样是h1标签，但是只渲染div标签中的h1标签。
②并集选择器
格式为：div+逗号+标签名{}
标签与标签之间是用逗号隔开的，也就是相当于将标签选择器并起来了，同时修改多个标签的样式。
③属性选择器
格式为：标签名[属性名="对应的值"]{}
font标签中有很多属性，CSS可以指定其中对应的属性。
比如size=“3”的才修改样式，其中哪怕font默认字体size为3，但是没有写出size属性，也不会修改其样式。
④伪类选择器
格式为：标签名+冒号+对应的状态
所以为什么叫伪类？
并不是修改的某个具体的类修改，而是对标签对应的状态进行修改。
其中关于CSS选择器真的太多太多了，可以查询W3C官方文档，如下图：
这还是我截图的一小部分，其它的截不下了，一共有几十种。
想要完全把它学习下来真心需要花一定的时间，但我毕竟还是以学Java后台为主，对前端只做一个基本的了解。
以后有机会再做做总结什么的，估计也没什么机会了……
谢谢你的观看。
如果可以的话，麻烦帮忙点个赞，谢谢你。
面试官：你知道移动端适配吗？
---
**开篇：移动端适配的重要性**
在移动互联网飞速发展的今天，移动端适配已成为每一位前端开发者必备的核心技能之一。面对市场上琳琅满目的手机型号和屏幕尺寸，如何让同一套代码在不同设备上呈现出近乎完美的视觉效果和交互体验，是每一位面试官都会关心的问题。本文将带你深入探讨移动端适配的核心技术和策略，助力你从容应对面试挑战。
---
**【第一部分】理解移动端适配的挑战**
**标题：设备碎片化与分辨率多样化**
随着智能手机硬件的快速发展，各品牌、各型号设备的屏幕尺寸、分辨率和像素密度差异巨大。这意味着，如果不对页面进行适配，可能会出现内容错位、字体大小不一、图片模糊等问题。
例如，iPhone 6与iPhone 13 Pro Max的物理尺寸和分辨率相差甚远，前者分辨率为750 x 1334，后者则是1284 x 2778。因此，我们必须有一套有效的适配策略来应对这种情况。
---
**【第二部分】viewport元标签与设备像素比**
**标题：viewport元标签与 DPR 的秘密**
适配的第一步是设置`viewport`元标签，以控制页面在移动设备上的缩放程度和布局视口的大小：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
这里`device-width`意味着布局视口的宽度等于设备的独立像素宽度，`initial-scale=1.0`表示初始缩放比例为1，即一个CSS像素对应一个设备独立像素。
同时，了解设备像素比（DPR）的概念也很关键，它是设备物理像素与CSS像素的比例，用于解决高清屏下的图像模糊问题：
```javascript
// 获取设备像素比
let dpr = window.devicePixelRatio || 1;
```
---
**【第三部分】CSS单位与适配策略**
**标题：Flexbox、Grid布局与CSS单位REM、VW/VH**
- **Flexbox与Grid布局**：利用现代CSS布局模式，如Flexbox和Grid，可以更好地处理元素的弹性布局，减少因设备尺寸变化导致的布局混乱。
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 20px);
}
```
- **CSS单位REM与VW/VH**：REM基于根元素字体大小，允许我们基于页面全局字体大小进行适配；VW/VH基于视口宽度和高度，可以很好地应对屏幕尺寸变化。
```css
html {
font-size: 16px; /* 基准字体大小 */
}
.box {
width: 80vw; /* 盒子宽度为视口宽度的80% */
height: 50vh; /* 盒子高度为视口高度的50% */
}
@media screen and (min-width: 768px) {
html {
font-size: 20px; /* 在大屏设备上增大基准字体大小 */
}
}
```
---
**【第四部分】响应式设计与媒体查询**
**标题：使用媒体查询实现多设备适配**
媒体查询是CSS3的一个强大特性，可以帮助我们根据不同设备的特性（如视口宽度、设备像素比等）应用不同的CSS样式：
```css
/* 为小于600px宽度的设备设置样式 */
@media screen and (max-width: 600px) {
.header {
font-size: 18px;
}
}
/* 为大于等于600px宽度的设备设置样式 */
@media screen and (min-width: 600px) {
.header {
font-size: 24px;
}
}
```
---
**【第五部分】CSS框架与预处理器的适配功能**
**标题：Bootstrap、TailwindCSS与PostCSS的适配解决方案**
许多CSS框架（如Bootstrap）和预处理器（如PostCSS）都提供了便捷的适配工具和策略。例如，Bootstrap的栅格系统和响应式工具类，TailwindCSS的内置响应式前缀，以及PostCSS的插件如postcss-pixel-to-viewport，都可以极大地简化移动端适配工作。
---
**结语：**
移动端适配是一项涵盖多个维度的综合技术，包括但不限于viewport设置、CSS单位选取、布局模式、媒体查询以及框架和预处理器的应用。只有充分理解并掌握这些技术，才能在面临面试官“你知道移动端适配吗？”这个问题时，自信满满地给出满意的答案，并在实际开发中游刃有余地应对各种设备适配挑战。持续关注前沿技术，不断积累实践经验，你将在移动端适配领域攀登更高的山峰。
*请认真填写需求信息，我们会在24小时内与您取得联系。
