44.尚硅谷_HTML&CSS基础_字体样式二.avi原创

那咱们呢，继续还是来说咱们这个文本的一个样式啊，直接来看咱们这个文件，那咱们上午呢，是说了一些这个字体，但是字体呢，其实主要说了这么三个相关的样式，一个是我们这个color字体的颜色，一个是我们这个size方size，我们字体的一个大小，还有一个是我们这个放的family，就是我们这个字体啊字体，那接下来呢，我们想想字体还有什么样式，哎，新建in特尔文件，我们来一个零六字体的一些其他样式，字体我们还有什么样式，来咱们先写一个字体吧，来个P标签，哎，我是一段这个字体，诶，我是一段文字吧，我是一段文字，然后这个这来一个这个ABCDEFG，然后ABCDEFG，好，那里边我给他一个class，来一个这个P，诶，那么想想字体，咱们回顾一下上午说的吧，写一个点。

耳一个P，我们有一个color，诶color是我们自己的一个什么呀，颜色啊，这设了一个红色，哎，然后还有什么呀，还有我们一个found一个诶S字体的一个什么呀，大小啊自大小，还有一个叫做found，哎，Family，这就是我们这个字体，比如说就来一个微软雅黑啊这么一个字体保存，然后我们这运行。这是我们说自己的这三个样式啊，这三个样式，那么来说除了这个还有什么其他东西不需要整的，诶，咱们直接来看一下文档吧，想想还有什么呀，我字体无非粗一点，细一点，斜一点是吧，哎，就这一点是吧，也就这样来HTMMR，我们直接点开我们这个CSS，找到我们这个呃，CSS参考手册直接在这ctrl f fo found字体相关的全跟这呢啊诶我们来看found family我们这个字体，诶size是我们这个大小，还有什么呀，这叫一个诶，Style found style style叫一个什么呀？样式，诶，规定我们这个字体的一个样式啊，就是一个放style，我们来看一下这个样式啊fo style它的默认值，诶，它可以看这个表格，它会给一个默认值，默认值叫什么呢？叫做一个normal啊normal然后有一什么呀，继承性是什么呀？Yes，也就是说它会被继承啊，会被继承然后。

再往下看它这个可选值，可选值是一个什么呀？Normal叫做默认值，浏览器会以个什么呀？会以一个标准的字体样式，诶会显示一个标准字体样式，也就是说什么叫标准呀，就是正常的对吧？诶正常的，然后这一只叫什么italic ital利叫什么呀？浏览器会显示一个斜体的字体样式啊斜体斜体有没有好理解，是不是就开始直着，我们斜体是不是斜着啊，那就斜着啊，然后还有这么一个值叫什么呢？叫做一个倾斜的什么呀，字体样式啊，倾斜字样式，我们发现放style实际上就三，主要就三个值，Normal呀，什么以太利，还有这个值，一共就三个值，那我们来看看他们三个值都是什么呀，效果normalva其实不用看了，就是什么呀，默认值我们只需要是么？看这两个值啊，哎，这两个值，然后注意啊，除了这几个值以外啊，每个月每个样式都有这么一个值，叫做什么呢？In因哈瑞的这么一个值，这个值什么意思呀，叫什么呀？诶规定应该从负元素继承自己样式，说白了就是负元素什么样，它是什么样啊哎。

也可以使用这么一个值，但是这个值呢，相对来说用的会比较比较少啊叭较少我们主要看这两个，一个是斜体，还有一个叫什么呀，倾斜现我们来看看什么样，直接来了，我们叫做一个found style found style，我们来什么呢？叫做一个ital，这是我们这个什么呀，斜体啊斜体来说一下我们这个放的带可以用来设置我们这个文字的一个什么呀，文字的一个斜体啊，文字一个斜体，诶其实样就说的是斜体是吧，我们来说一下它的可选值，可选值叫什么，叫做一个哎normal第一个值我们是叫做一个normal normal叫什么呀？叫做一个诶默认值，诶默认值叫什么呀，文字干嘛呀，是不是正常正常显示啊，诶正常显示，所以你这如果是写一什么呢？写一个这个normal保存，我们来看效果一刷新走，你有变化吗？哎，没有任何变化啊，它就是正常显示啊，Normal你不写也是它啊，然后还有一个值。

叫做一个ital里ital利个叫什么意思呀？哎斜体文字，哎文字会以这个什么呀？呃，斜体的这个形式形式，斜体的形式形式，呃斜体是不是我们有一个爱标签啊，那个爱标签那个爱就是这个以太里那个爱啊一个意思，保存我们来看效果一刷新走，你看完了，哎文字是不是斜过去了，哎往这边斜过来了啊这是一个这个斜写的效果啊italic那除了这个italic我们还有一个值，这斜体我们就不用多说了啊italic还有一个值叫什么呢？叫这么一个值，O打头这么一个值，诶叫什么呀，倾斜是吧？诶倾斜诶文字会什么呀，以我们这个倾斜的什么呀，效果显示，诶，我们来看它是怎么倾斜的啊，保存这块直接一刷新来走你，诶诶好像是没有什么变化是吧？嗯，没有什么变化来咱们。

这样我再复制一个，这里边我给他一个style，给他一个什么呢？来一个那个放一个style，我给他来什么呢？来一个ital里，也就说我上边那个是倾斜，下边那个什么呀，斜体，我看它有什么区别啊，一刷新走你是不是看出来了吗？嗯，就没啥区别是吧，嗯，就没啥区别，来咱们看看我们这个。其实也不用看有没有区别呀，哎，没有区别，那倾斜斜体它啥区别呀，咱们想想也想不出来啥区别是吧，可能一个斜的度数大一点，一个一个斜的度数什么呀，小一点是吧，但是对于咱们来说，其实都是什么呀，都是斜的，而且什么呀，浏览器有没有说让让他俩斜的不一样啊，这俩斜的简直是什么呀，一模一样啊，一模一样，那为什么呢？我们来说一下啊，其实这也没什么，为什么是吧，就这样，所以咱们这个这个CS的好学的地方就在这儿，它就这样是吧，你也没办法，咱们说什么呢，大部分浏览器都什么呢，都不会对什么呀，对我们这个倾斜和什么呀，和斜体做一个什么呀，做做区分，哎做区分也就是什么呢，也就是说我们设置什么呀，也就是说，哎，我们设置这个italli和我们这个值，诶他们的什么呀，他们的这个效果。

干嘛呢，往往是一样的啊，往往是一样看不出来什么区别，所以这里边干脆我们就说了，这个值我们用不用不用，因为你这也没啥没啥区别，所以这个纸我们不用了，一般我们只要设置斜体，一定是用的谁呀，Ital里啊ital里，所以这里边我们来说一般什么呢？一般我们只会使用我们这个it里，哎太里好，这是我们说这个斜体啊，斜体found style可以设置我们这个文字的一个斜体的一个效果啊，斜体效果好，那接下来往下来看啊，往下来看还有一个叫做一个fo，一个wait，诶weight什么意思呀，是规定我们这个字体的一个什么呀，粗细啊，Front weight，然后我们来看它这个啊front weight属性设置文本的一个粗细，诶，它的默认值是什么呀？Normal normal表示什么呀？诶正常显示继承性是一个什么呀？Yes，诶可以继承，然后来看，你看它这值啊。

给我们提供了什么呀？是不是不少啊，诶第一个知道一个normal是一个什么呀，默认，诶默认值，然后有什么呀，Bold bold叫什么呀，定义粗铁字符啊，粗体字符，其实下边这几个值呢，看不看就不直接了啊，主要关心这两个，关心这个值叫一个什么呀？Bo啊，Bo我们来看效果啊，来看效果这里边我把下边给它去了啊，我们来写一个这来一个ital里直接我们来一个fo，一个weight front weight，我们来直接写一个什么呢？Boat，诶我们来说一下front weight可以干嘛呢？可以用来设置哎，设置我们这个文本的一个加粗效果啊，加速效果，我们来说一下它的这个可选值，可选值有什么呀？第一个值其实也是什么呀，也是normal叫什么呀，正常显示，说白了什么也没有，还有一个值叫什么呢？叫做一个bold，叫做诶文字加粗显示啊，文字加速显示，我这一保存，然后一刷新来。

走，你文字干嘛了，是不是变成变成粗体了呀，变成粗体了啊，文字会加粗显示啊，加速显示，那这里边我们要再说一个，其实这比较简单，我们用法就是这样，你要加粗就一定是设置成什么呀，Bo不加粗就是什么呀，Normal，我们只有这两种选择，那你会发现实际上这里边值还还挺多，什么bother更粗，Later更细是吧，甚至还有什么呀，一个100~900这么九个值，对吧？诶100~900这么九个值，我们来看看这个值是什么意思呀，那既然他写了，是不是就意味着我们可以设置啊，诶我来写一个，我来写什么呢？写一个100，这是我们第一个级别啊，我们来说一下该样式也可以什么呢？也可以指定我们这个100~900，诶之间的什么呀，之间的这个九个值，哎，之间九个值，那我们来看什么效果啊，我来设置一个100，我这一刷新走，你发现什么了，是不是细了呀。

哎，细了，我再来一个200，我们来看看保存，我这一刷新走你。是不是没变化呀，哎，没变化，我再来一什么呢？来一个这个300我已保存刷新。

是不是也没变化呀，哎，也没变化，来一什么呢？来一个这个四百一刷新一保存是不是也没变化呀，你发现这东西它是不是好像没什么用啊，哎，没什么用，来一个500保存没一刷新等你哎呦还没反应是吧？哎还没反应，这要实到实来别的，再说来一个600保存走，哎是不是粗了呀，哎600加粗了，但是这里边我来一什么呢？我来900，我们来看900跟600比，我就刷心走，你是没变化呀，哎，没变化啊，所以注意他给我们提供这么一个方式，100~900之间九个级别，但是我们发现是不是说200就比100错，200是不是跟100是一样的呀？哎，200和100是一样的，那么想想，那既然是一样的，为什么给我们提供这么九个值啊？诶，他是不是神经病是吧？诶其实也不是是吧，他考虑可能他想的有点多，他想什么呀，他想给我们提供九个级别，我们的选择是不是。

不是更多一些呀，诶更多一些，但是问题就来了，我们这字体它怎么就加粗了呀，它怎么就粗了呀，字体一旦加粗了，就意味着我们计算机里这个字体一共有两，一定会至少有两个版本，一个是正常的版本，一个是什么呀，加粗的版本，那你没加粗的时候，它显示的是什么呀，是正常版本，如果你加粗了以后显示什么呀，是加粗过的那个版本，那我们说了，一般人的电脑里，我可不可能一个字体我准备九个版本呀，我一般就是两个，一个是正常的，一个什么呀，粗体的没有，不会说把这字体分成什么呀，分成九个级别，所以这个值往往什么呀，往往是用不上的啊，往往用不上的，所以这里边他给我们提供了九个值，但是什么呢？但是由于我们这什么呀，用户的这个计算机中往往什么呀，往往没有这么多什么呀，哎这么多级别的什么呀，诶级别的这个字体，所以什么呢，所以。

哎，不能，哎达到我们想要的什么呀，想要的效果啊，想要的效果也就是什么呢？诶也就是我们这个200，也就是说什么呀，200油可能干嘛呢？比我们的什么呀，100粗，哎300有可能比什么呀，比200粗，但是什么呀，但是也可能是什么呀，哎也可能是一样的啊，也可能是一样的，你会发现，所以刚才我们看到了一百一直到500，他们的粗细级别是不是都是一样的呀，为什么呀，就是因为我这个计算机里没有那么多粗细级别的一个字体，所以它显示不出来啊，显示不出来，而600和什么呀，600~900是不是就是一样的呀？哎，600~900就是一样的啊，所以证明什么呀，我这字体只有两个级别，一个什么呀，一个是正常的，一个是什么呀，加粗的啊，一个正常一个加粗的，所以这值呢，基本上没什么用啊，基本上没什么用，那这个值。

没用，还有一个值叫什么呀，Borderder layer要什么呀，更粗更细的干嘛了，那是不是就更没用了呀，那就更没用了啊，所以这里边加粗我们只有两用的，只有两个值，一个是什么呀，Normal正常显示，还有一个什呀，Bo加粗这个玩意儿你就看下乐就行了，其实也没啥，就你就给他忘了就完了啊，忘了就完好，这也是我们说放的一个这个wait啊，加速的这个效果，然后呢，除了这个还有一个，还有一个就是更没用了啊，更没用咱们也说一下啊，说一下还有一个们放的一个warrant，放到warn叫什么呀？规定是否以小型大写字母的字体显示文本，小型还什么呢？还大写字母，诶，我们来看这是一个什么神奇的效果是吧？来点开这先看默认值是一个什么呀，Normal，诶我们这个正常显示，然后继承性是一个yes，哎可以继承，然后往下，诶它这值简单一个是normal，还有一个叫做small caps，诶normal就是默认值是不是叫。

的变化呀，没有变化，而smallca叫什么呀？浏览器会显示小型大写字母的什么呀，字体直接来看效果啊，直接来看效果叫做一个属性，叫一个foundt放NT我们叫什么呢？诶可以用来设置我们这个小型大写字母啊，小型大写字母我们来说可选值，可选值也是有一个值叫什么呀？叫做normal么normal么我们说了就叫什么呀，正常显示啊，正常显示还有一个值我们叫什么呢？叫做一个呃small，诶small cap叫什么呀？诶叫做文本以这个小型大写字母显示，大写字母显示来保存，我们来看什么效果啊，现在我这设置完这个值，我这一保存，然后看这，现在我这个有小写字母，有大写字母，你看ABCEFD这是大写，后边这是不是小写啊，诶，大写是大。

小写是小写，这是一什么呀，这是一个正常的情况啊，这是一个正常情况，来我们一刷新来看这走，你当我设置这个small caps以后，你看我这还有没有小写字母没有了，是不是全都变成大写字母啊，诶只不过发现什么效果了。我这小写字母这个大写是不是比我这个大写字母要小一些呀，哎，要小一些啊，所以还有这么一个属性，但是这个属性对于他们来说可能用处其实不是不是特别大啊，有些有些情况也会用，但是用处不是特别大啊，我们来说一下什么叫小型态字母，哎叫什么呀，将我们这个所有的这个字母都以什么呀，都以这个什么呀，大写形式显示，但是什么呢？但是我们这个小写字母要比我们这个小写字母的这个大写对吧？诶要比我们这个大写，哎字母的大写干嘛呢？小一些啊，能听懂吧，哎，这么一个意思啊，比我们这个大写字母要小一些，所以叫什么呀，小型大写字母啊，它比我们那个正常的大写字母呀小一些啊，这么一个特殊的一个显示的一个形式，咱们这块呢，相对来说用的没有没有那么多。

啊，那好，那这个就是我们这个字体这么几个样式，再来回顾一下说的谁，一个叫做front style我们的什么呀，斜体front with是我们这个什么呀，加粗这我们一般就不用900了，直接来一个什么呀报就完事了啊这就完事了，然后还有一个什么呀，Front verrant是设置我们这个小型大写字母的啊，小型大写字母的，那好了啊看到这儿了，我们把这个字体相关的一些样式呢，都给它说全了啊都给说全了，那这里边我们接下来再说一个问题，那我们看其实我们这讲完这个，其实我们发现有没有点小问题，来我写一个P，来一个class，来一个什么呢？PR，这我来给这个PR里边呢，我再写一段文字，CTRLV这个里边呢，是没有任何的什么呀，样式的啊，没有任何的样式的，那这样我们来写一下，直接来一个点一个P2直接写什么呢？我们来设置一下吧，设置一个什么呀，诶叫做诶字文字的什么呀，文字大小，文字大小我们来什么呀，放呢size。

来一什么呢？来一个50个像素，然后再来走设置一个什么呢？设置一个诶设置一个这个字体，字体我们叫做一个放family，放到family我们就来一个什么呀，来一个这个呃，华文彩云，然后再往下写，再来一个我们呢，设置一个我们这个设置我们这个文字的一个什么呀，一个这个加粗诶斜底斜体我们叫做一个放一个什么呀，Style，放style我们来一个就开了一个，然后呢，我们再来设置，设置什么呢？设置我们这个文字的一个什么呀，加粗，诶加粗这看着有点有点烦了是吧？诶加粗我们来一个Bo，然后再来设置还有一个我们这个什么呀，咱们再来一个，设置一个这个小型大写字母啊对，字母直接来一个，我们叫做fo一个哎，Warrant warrant，我们来一个small，一个cups保存，我是不是设这么几个呀，咱们先看效果啊，一刷新。

诶走你，诶你看这个加粗斜体，包括这个小型大写字母是不是都给它设置上来，诶都都设置上了，那我们会发现我通过这一块，我通过了12345个样式，是不是设实际上都是一个字体啊，哎通过五个样式设置的都是一个字体，那我们就想设置一个字体，我要设置五个样式，这是不是有点有点麻烦呀，哎有点麻烦，那我想想有没有什么简单的方式，我想什么呀，他们说那个，呃以前做那广告说那个吃药似的叫什么呀，一片顶五片，那我希望能不能我写一个样式干嘛呢？可以顶这五个样式呢？诶怎么整呢？诶行不行呢？诶说到这儿了，肯定得行是吧，那肯定行，所以这边我们来说一下，那这里边就是说的什么呀，我们的一个简写样式P3，我们直接来说一下，在我们什么呢？在我们这个。

CSS中还什么呢？还为哎我们提供了什么呢？提供了一个样式叫什么呢？叫做一个就叫什么呀，就叫sound啊，就叫放，使用什么呢？使用该样式可以同时设置我们这个字体，诶相关的什么呀，所有样式啊，所有样式，那我们来看怎么去写这个东西啊，怎么去写这个东西，来直接来一个放，诶怎么写呀，诶你不是要设置这这些玩意儿吗？直接来一个italic什么呀，鞋底再来一个small一个哎small一个这个caps，我们这个小型大字母，你看我是不是都写一起了，再往后再来个什么呀，来一个这个board加粗对吧，再往后来一什么呀，来一个60个像素，再往后我们来一个这个微软雅黑，你看我在一个样式里我写了几个值一二。

三四是不是五个值啊，五个值之间我使用什么呀？哎，是不是空格来隔开啊，我们来看什么效果啊，这一保存咱们来看一刷新走，你发现什么了？加粗斜体小型大雅字母包括大小，包括微山雅黑是不是都给它设置上来，哎设置上了啊我们就是干嘛呀，通过这个放的同时干嘛了呀，设置了五个我们这个字体相关的一个样式啊字体相关的样式我们可以什么呢？可以将我们这个字体的这个样式的值统一干嘛呢？统一写在我们这个fo属性，哎，Fo这个样式中什么呢？诶不同的值，不同的值之间使用什么呀？哎，空格格开啊，使用空格来隔开，这个能看懂吧？诶那现在就有问题了，那这东西。

诶我是不是随便写他有没有什么顺序要求啊，有没有上么顺序要求啊，诶我们来说一下啊，我们来说一下，诶我们使用什么呢？哎，我们说使用我们这个fo哎设置我们这个哎字体样式时啊，自己样式时我们说什么呢？我们有一个什么呀，斜体还有什么呀，还有我们一个哎加粗还有什么呢？还有这个小大字母啊简写了小大字母没有什么呀，没有顺序要求，甚至什么呢，甚至可写，哎可不写，诶如果什么呢？如果不写则什么呀，则使用默认值啊则使用默认值，举个例子，这三我现在第一个是斜体，第二个是小S字母，第三个什么呀，加粗，诶我把加粗干嘛呀。

写头类行不行，一刷新走，你是不是一样的呀？哎，我把这个小型大写字母写头。行不行啊，哎，一样，我们说了这三个没有顺序要求，怎么写都行啊，怎么写都行，没有顺序要求，甚至说什么呀，这三我全都不写行不行，哎，或者说这样吧，小型大写字母我不写，我给它去掉易保存易刷新，是不是其他小果还在啊，只不过这个小型大写字母是不是回到这个什么了，默认值了，诶回到默认值了啊所以注意这三个什么呀，可选的写不写都行，顺序也无所谓啊，顺序也无所谓，诶然后那么就说有要求的了，但是要求什么呀，要求我们这个字体的什么呀，字体，诶我们这个文字的这个大小和什么呢？和这个字体必须写啊，必须写，换句话说，这两个东西能不能没有，哎，你说我不写大小了，保存一刷新走，你是不是一个也没有了呀，哎，一个也没有了啊，你说我不写这个威亚黑了。

保存一刷新走，你是不是也是一个没有啊，这两个告诉你叫什么呀，缺一不可，大小还有字体必须写啊，必须写而且什么呢？而且我们这个字体必须是什么呀，必须是最后一个样式啊，必须是最后一个样式，大小必须是什么呀？必须是倒数第二个样式，什么意思？我这个是不是字体啊，为啥想黑这个东西，一定是我所有样式里边什么呀？最后你说我把它写到大小的前边行不行，哎，不行，你写完这儿一个也不认识啊，一个也不认识，所以注意顺序必须得是什么呀，这个在最后，大小在什么呀？倒数第二个啊，大小再倒数第二个，我这里保存现在刷新走，你是不是这个就行了呀，哎，就行了啊，一定要注意好，那这就是我们说自己的一个简写属性，再简单说一下规则，小写，小型大写，字母加粗，还有斜体顺序无所谓，甚至说写不写。

哎，都行，但是我们这个大小必须是倒数第二个字体必须是什么呀，倒数第一个，而且这两个还得干嘛呀，必须写啊，必须写这是我们说这个顺序啊，他们之间使用这个空格来隔开啊好，那看到这儿呢，我们觉得其实我们说这个放是不是比我们上边这些属性写起来要省事多了呀，哎省事多了，那除了省事他有什么好处。诶，我们来说一下啊，那我们说实际上干嘛呢？哎，实际上使用我们这个简写属性，哎，也会什么呢，也会。

诶有一个什么呢？有一个比较好的什么呀，性能啊，就说我这样写性能会比较好，为什么呀，为什么呢，我们来看啊，在这里边我写了几个样式，五个样式，我告诉你，我写几个样式浏览器就就得干嘛呀，就得解析几次，我写一个样式大小它需要干嘛呀，解析一次，字体它需要解析一次，写体需要干嘛呀，又解析一次，加粗又解析一次，这个玩意儿干嘛呀，又解析一次，所以我这五个样式浏览器需要解析几次，需要解析五次啊，有几个样式浏览器就需要解析几次，而我们现在这是几个样式，一个样式啊，一个样式浏览器只需解析什么呀，一次啊，只需解析一次，那我们说了解析五次坏还是一次坏，很明显是不是肯定是一次坏啊，所以这种呢，它带来的性能会更好一些，但是差距呢，还是那句话，它没。

有那么的明显啊，没有那么明显，但是这个性能会好一些啊，会好一些，所以这个东西选择起来很简单，如果说什么呀，如果说你。诶，你只设置一个，比如说你只需要设置文字的大小，那你就没有必要用它了，对吧，我直接用一个方size就行了，如果说你需要同时设置多个，那你就可以干嘛呀，选择使用我们这个简写属性啊，简写属性好这个呢是我们说的这个font啊，自己的这个样式，我们就给他说完了来。