12.尚硅谷_css3_新增UI样式-文本新增样式（1）.wmv原创

自己去啊，啊，刚刚同学可能在哪边呢？可能说这个我们这个字体图标做完了怎么去用，它是不是不会用，是不是其实特别好用啊，比如说这是我们刚刚做的一个字体图标吧，是不是，你看如果现在我自己自己去用。啊，比如说放到二里面去用一下。咋用呢？里面必要的信息啊，问你这四个文件，哪几个文件我需要拿走的。钥匙要不拿走，字体要不要拿走，就需要这两个东西嘛，是不是把这两个东西给他。拿走是不是现在我要用他这个。自己图标怎么办，我写一个什么。空白的页面啊，比如说我写一个index.xl。INDXR。你好，能省则省，是另好去拿什么？style.css嘛，看一下这个style CSS嘛，你看这里面这个自己是帮帮我们定义好了，而且他说所有的这是不是一个属性选择器啊。

是不是，所以I杠开头或者包含I杠的吧，你看这边是不前面有个空格的都要使用我这个方差。不了吧，是不元素需要你自己去写吗？那我元素使用什么字符，这边是不是都都已经方你什么。弄好了，你只需要写一个什么。类名就可以了，懂吗？就是这个字符怎么绑定的，也就是说哪一张矢量图跟哪一个字符绑定的，需要你去关心吗？不需要，你只要知道这个class代表什么意思，这个代表什么意思。这个代表什么意思，箭头这个呢，加的那个圆吧，加号那个圆吧，是不是，那我应该怎么玩。我随便来一个败行不行，我用个爱标签行不行，看你心情是不是，Class是不是，走你来个这个玩意吧，是不是？

不要点是不是来看一下是不是就可以了。是不是出来了，是不是啊，是不是就出来这个字体图标不就出来了吗？是不是具体这个字体图标什么样式，多大，你能不能改哦啊改的话最好不要改这个class啊这吗？我这边可以不是再来自己写个class叫做test嘛，是不是我来个style嘛，是不是比如说我这个点test嘛，比如说把它的方稍会干嘛。放在size嘛，是不是调整成48P行不行，看你心情吧，我问你这个底下是不是就是个字啊。是不是啊，这个就是一个字嘛，相当于在能没讲好的好改颜色行不行。这还真没玩过，看了我感觉问题不大。好完美，好，这懂了吗？OK，好，这是字体图标怎么用的是吧？这比较好用啊，OK，再来看一下，那讲完这个字体图标之后，哎，我们要讲下一个东西，下一个东西叫什么，看一看课件被我关了啊，那重新打开一下。

呃，下个同学什么新的疗方案啊，这个得讲一会啊，这个今天肯定讲完啊。啊，第一点应该能讲完文本新增样式，我们这里有没有用过。有没用过谁三的不的啊级别有没用过谁三的不是的，人家这两个东西啊，大想想。你们有没有学过东西叫做？还有就别不管了，这个东这个东西没有学过，它是不是也是控制一个元素的隐藏解释的呢。你透明度为一的时候不就显示吗？透明度为零的时候就隐藏，为什么C3还要第一个C出来啊？

不占位置也不占位置啊，不visibility跟。都需要占位的。都需要在位的元素都还在哪，除非是display，那是不在位的是不是，那你觉得性能比较高还是说性能比较高。就是display跟visibility哪个性能比较高？肯定是，你display的时候，是不是这个元素都没了，下面的元素要不挤上来，要不要给他们重新排列，浏览器要不要重重新去绘制啊，元素还是在那边站位的，只是透明度没了，下面的元素要上来。不用浏览器需不要重新帮他们去绘制啊，不需要嘛，肯定是别的性能肯定要比啊，就高嘛，自己涉及到一个很重要的概念叫重汇，重排之后我们会经常来提。

懂吗？OK，那想想为什么有了S还要设计出个呢？说明欧C的性能更高是不是，可是欧C这个性能更高啊，我们要放在后面讲，现在讲不合适，有些东西大家还不知道啊，可是你得记住，为什么CC还要C，因为性能比较高啊，你如果单单只使用点性能，没有比较没有高，懂不懂，可是你如果用C结合另外一些东西去使用的话，你会发现C的性能极高能不讲好，首先你稍微得知道一下为什么有CD这个东西，就是因为他性比较高，对道，那还有个东西是RG边新增的颜色模式吧，他是不是有透明度的，那这两个东西我就不去写了，我帮你们贴过来看看，因为太简单了啊。OK，零是什么？我们讲什么新增UI样式，UI是什么？知道吧？啊，UI是妹子，是不是UIUI什么？你能看到所有的图形都叫UI。

能不能理解啊，OK，那第一个叫什么文本新增样式。好，零杠文本新增，增加文本新增药水。好看有哪些好？第一个啊，前两个我就贴过来了啊，这个实在太简单了哦D干什么RGBA啊，这个贴过来我们看一看。好。啊，就是改变一下透明度嘛，是不是啊。你看是不是就改变一下透明度啊，来看我怎么写的，是不是有有个div比较大，有个你看这个欧C点是不是一个继承属性啊。

是。嗯。有没有继承，哎，OC点不是一个继承属性，有没有发现来看一下嘛，找到OC点。怎么看它是不是一个计算属性啊MDN嘛。是不是来CTRLV过来。好看一下，这是SVG的吧，不要看SVG坏掉。CS的吧。中文简体。是否可继承否？可是有没有发现，哪怕你是不可继承的，它也是可影响到自己的元素的，你看我的子元素有没有透明？有透明吗？好，切记不是一个可计数性，可是它可以影响自己的后代，说能不理解，OK，那这个比较简单了，好，再来看一个RGB，这个能不能看懂啊？

这个要是机简单嘛，是吧，来看一个gba吧，是吧，你看这边是不是有个阿gba啊，光的吗？是不是我们来看这个我干的什么。是不都没干，我这个G给了这个外吧，是不是这个外是不是有个透明度的，也就他这个背景其实是什么，本来是是你看本来应该是黑色的吧。不，这是白色哦，不不不，RGBRGB吧。零零嘛，黑色的嘛，是不是有rgba这个就代表什么二号吧，是不是比如说点八。你看是不是就稍微透明一点了，那边讲你看吧，这个我们说在CSS里面，前面这个零可以省略的。直接用点开始就代表小数点啊，OK，那这两个东西出来之后，到底有什么比较好的地方呢？啊，其实之前有个需求我们极其难做，背景透明，文字不透明。

啊，或者说背景透明，你上面有个元素，透过一个元素看到什么这个元素下面这个背景是不是需要我这个元素变成透明的，那这种这种场景我们之前是极其不好做的，你看现在呢。看一下背景透明，文字透明，我怎么做，你看现在我这个外法，你看300 300居中的有一个马点是吧，你看他的背景是不干嘛。透明的，你看上面是不是有个color文字，文字有透明吗？没有，你看现在是不是背景透明文。文字不透明，那想要文字透明，背景不透明怎么办？是不是把这个color了改成什么R级别就行了，把这边有一个小技巧啊，以F12选中这个元素上面是不是有卡了的，OK，这边是不是用16进制的形式去表示的，好，你按住shift的键，按住shift的键去点这个东西，你看。

是不是给你切换什么，切换这个颜色模式的，懂不懂，你看这是一个RRGB的形式啊，直接切过来CTRLC干嘛CTRLB改成RGB。好，那我们说这个叫什么。点五吧，是不是好，我把这个背景干嘛，还是换成RGB000，那这个是不是文字透明，背景不透明啊。是不是别看这种需求我们现在这么好做，这么好做就是因为有这个颜色模式R级别你放之前是很难实现的。那不，自从有了这个RGBA之后，那这种这种这种这种什么这种需求，就什么机极好做了，懂不懂，只要你是有颜色的地方，我就可以换成R级边。那为你讲，OK，那这两个东学都比较好理解，一个是明度，一个是二级别，懂吧，OK，那这个就不说了啊，这个实在太简单了，好，那么再来说文字阴影啊，这个得听一下。文字印，我们来看叫什么。文字in text啊，Shadow，好T，用来为文字去添加阴影是不是好，我们来看一下直接添来什么，看一下这个API ctrl c，我们来看一下零四。

叫做文字里。好，那从C3出来之后，其实我们的东西才会变得比较炫酷啊，没有C3的话，其实好多炫酷的事情我都没有办法去做，文字啊，阴影，好，比如说现在我这边来个一吧。AA。一是不是叫上硅谷，是不是OK，比如说这边我给这个一。怎么老是写好爱奇艺？是不是去写样式啊，是不是，你看现在我这个奇是不是好好的完他居中吧，怎么办，他等于应该就居中了是吧？那它的方塔为50PX，有一个行高是100PX，给一个未来亚黑走你。

下来是不是大一点嘛，大方一点，一百两百，只要你下来了是不是啊，现在我说想让它有一个文字阴影，是不是给它加一个属性叫做T。啊，这是C，这是C3的属性文本的阴影吗？是不是看它有几个参数好用来为文字添加阴影，而且可以添加多层阴影之间用逗号隔开，也就是么？你可以添加多层，一层跟一层之间用逗号干嘛？隔开多个阴影是第一个阴影在最最上面啊，OK，默认只是呢，它是不可集成属性，需要你们去关注这些东西懂不懂，好，那这个值有哪些color了，可选它。

指定什么阴影的颜色啊，比如说现在我指定颜色什么pink，是不是后面还有还有什么。偏移量嘛，是不是啊，你看的X跟三的Y嘛，肯定代表的是水平跟垂直的偏移量嘛，比如说偏移量10P x10PX来看一下，现在看有没有阴影啊。是不是有阴影啊，可是这种阴影你说好看吗？不好看，这种阴影最好有一个模糊效果，就会比较好看。是不是，那看最后参数代表什么。模糊程度是不是值越大，模糊范径越大，也就你这个值越大，模糊的值就越大啊，来看一下，比如说我让你模糊的什么走你。是不是就有一个模糊效果会稍微好看一点，那不要搞成粉色的，还是搞成黑色的，就会让你有一种立体感。点好了。

灰色吧。走，你是不是，你看是不是有一种模糊感，好像是阳光照上去一样的感觉，是不是我有写任何的3D效果吗？没有，就是来了个文字阴影，让你有一个视觉差而已。能理解吗？当然，你可以指定多长。PI是不来个20P 20P模糊程度也是20，走你。看一下是不是在下面还有一层能没讲好，这个东西其实还是蛮蛮好玩的，比如说我带你们做两个小效果啊，比如说叫什么做一个浮雕，跟什么文字模糊来看，什么叫浮雕文字啊，浮雕文字最终长什么样呢？来看一下。就这叫浮雕文字啊，这个浮雕虽然说不是很吉利啊啊啊，好吧，反正我已经用了双尾骨了，是不是？那就直接做个浮雕吧，浮雕怎么做？哎，这个不是浮雕。

浮浮雕是他吧，是吧，你们想想这个浮雕怎么做？字体么色，肯定白色加一个应该是什么色，黑色有点模糊的感觉，让它的拼音量稍微少小一点。这个浮调L字体这不就就出来了是吧，好写来，我们来做个什么，CTRLC05做个什么。浮雕。这个叫做浮雕文字，走完这个浮雕文章，首先我们说你这个爱奇艺颜色必须是什么颜色。必须肯定是白色是不是，OK，这个tax先给它干掉，也就说你这个color必须得是白的外是吧，这个还没拼错，走你没有吧是吧，应该给他来个什么泰克斯啊山是吧，骗亮啊，首先什么颜色，黑色骗亮应干什么，小一些，模糊程度呢，大一些。

差不多吧。差不多了吧，是不是，你看如果这个模糊度再大。走，你这个也还蛮好看的，是不是不管了，是不是OK，那到现在是不是干嘛，这种字体是不是还是比较好看的是吧，所以一看一些艺术类的在你上面的话，其实这种这种字体还是比较多的，懂不懂会大量的使用C3的一些文本的一些样式，懂吗？OK。OK，好，那我们继续好，这是叫浮雕文字吧，我们再来做一个字体。这什么文字模糊的效果？什么叫文字模糊的效果呢？我们来看看。

文字模糊。现在看看这个字是不是现在什么好好的放上去跟个橡皮擦一样的，是干嘛慢慢的干嘛。模糊掉，是不是问你这个文字最终变成什么颜色？这文字肯定最终没了。那肯定变成白色，就是说一开始是有文字的，最终只有阴影了。文字没了嘛，那么讲才会做这种效果吧，有文字肯定不是这种效果的，是不是OK，那怎么做？写写文字模糊的效果吧，OK，这是刚说的浮雕文字，CTRLCCTRLB06。好文字啊。模糊来，我这模糊怎么做？

现在我们长什么样？巨丑啊，也不是巨丑，现在反正稍微有点丑，是不是一开始的颜色是个什么颜色，黑色应该是个黑色。是不是鼠标放上去，他应该慢慢变啊。白是吧，也就你这个H1在我的吗。你这个在的时候应该干嘛，应该变成什么。看了应该变成白色，而且这时候应该有一个。是不是OK，这个应该变成什么。黑色吗？是不是，嗯，模糊干嘛拼量我就不要了，是不是模糊稍微大一点，是不是100P仓看看。Zia。

诶，这个字是不是还在啊，哦，字变成白色了，这应该干嘛？消失哦，是不是啊，0000是不是上来。只有你没了吧，是不是啊，可是这个效果是不是太突兀了，是不是啊，那一般我们会干嘛，这个东西我们年年会讲啊，一般给这个元素加个全三性，一秒钟之内让它产生变化，是不是一个动画，也就是刚刚那效果，现在我是干嘛瞬间变大，我现在给你加个全身性，告诉你你这个变化过程比我慢一点，一秒钟给我变。刷一下，看这点是不是一一秒钟之后变了。是不是啊，OK，周NY，哎，确实是不是，这个动画是不是要会节省好多CSS代码，不好多节省好多GS代码，是不是啊，其实我们说这个text一开始是不是没没有的，其实这个text是不是有默认值的。是不是来看一下这个T效率有没有位置。

九。就要定啊，这是你们需要关注的事情，可是这些东西需要记吗？啊，你记住最最什么通用的就可以了，懂不懂其他的来什嘛，上文档上面查嘛，是不是很好用。问什么，那问是不是没有呢，是不是OK，然后从这个是不是慢慢过渡到这个什么。颜色从黑色慢慢过到这个颜色也慢慢的会出来的。能不能讲OK，看这个到底有没有过度。还是瞬间的？慢慢的吧，是不是啊，OK，这个效果是不是还不错，是不是，你看最终比如说我让他稍微大一点。你看这个阴影最终是不是自己干嘛？看见看见没有，是不是有一个收掉的过程，所谓的走引来刷一下走你。

你看是不是有个收掉的过程，是不是眼睛疼，好来看看，好，那这是我们说的文字，我不把能不理解，OK，好那到这一块是不是这三个讲完了，这三个应该比较简单吧，是不是OB啊，是不是新增颜色模式RGBA啊，文字阴影吧，文字阴影里面我们说它有几个属性啊。有有几个属性啊，是不是12344个属性啊，啊，这边给你们稍微说一个事情啊，也就是说在做文字阴影的时候，大家看现在我是不是好好的。有灰色有粉红的，是不是我们说这个东西你看如果我插在中间行不行。插在他们什么数字的中间。有吗？就没有了啊，这个是有顺序的，这种顺序要不要记啊。啊，我建议不要挤啊，样式太多了，你发现这个样式没有出来时候，自己把这个数据稍微换一换，一般你就让这些数字出现在什么一块就快就可以了，让他们出作为一个整体出现就可以了，你把这个颜色放在前面，放在后面，其实没关系的。

刷下都有那么讲，可是这些细节实在太多了，像这些细节我是不建议你去记的啊，遇到了自己试试两下就出来了，对不对啊，实在不行看一下API嘛，懂不懂这些东西记的话负担实在太大了啊，所以这种这种东西不值得你去花你的脑容量，花时间去记它懂不懂，遇到哎，发现这个效果没没有出来，好想一想可能是顺序问题就。就可以了，懂吗？OK。好，这个视频先听听。