01.尚硅谷_css3_导学.wmv原创

OK啊，首先大家要做一些事情啊，就是大家已经学过艾滋病了吧，是不是。是不是啊，那以后我们的代码的话，就不通过飞秋发给你们了啊是嗯，都通过。S边去导啊，然后下一个阶段的所有的资料的话，都是通过get去导啊，那我如果告诉你们一个地址，你们是不是应该能把所有的资料全部导出来了，是不是啊，大家把这个地址记一下啊嗯啊，可以给大家稍微看一下这个地址。好，这是你们班的地址啊，啊，那你们应该怎么改啊，你们先把这个地址记下来，SV171208啊，这个是你们的项目地址啊，就是你们的课堂代码的地址，171208，前面这个应该改成什么？127.0.1吗？那不是还是一个回路地址吗？是不是得改成我这台电脑的IP地址，是不是OK把我电脑IP地址记一下，我看一下IP。

OK，我的地址是17.39啊1192.168.17.39，那你们下这个代码应该怎么下。SV冒号，然后呢。192.168.17.38-171208是不就可以了，如果你们有HP的的啊，就是用HP的这个工具的，这边有一个导入啊，导入的时候从SVN检出项目把把刚刚那个地啊，你们可以在这边创建新的资源库，把刚刚那个地址贴进来，直接当就对了，有没讲你们当然也可以用，小乌龟也可以用。随便你们怎么用，只要能把这个代码当下来就可以了，你们讲这能理解吗？以后你们去公司也是这样的啊，然后你们当的时候可能是需要用户名跟密码的啊，记得你们的用户名密码都是拼的。

啊，聘卡用户名也是聘卡，密码也是聘卡，能理解吗？啊，因为你们没有提交的这个权限啊，只有档代码的权限啊，OK啊，这个操作你们待会去做，先把这些参数记下来就可以了，好，那由于我之后要用HP的给给大家去做一些打包工作，所以说我的课堂上面的所有的编辑器我都选用的，而且我们课程要很注重原生能力，所以说啊，基本上一些插件啊，或者说快快捷键啊，我都不会去用啊，所以说代码都是一行行的打打出来的，所以说我课上代码你课下必须给我敲一遍啊，我们来看一下我们这个阶段会经历哪些东西啊，代码呢，会。增加很多，那比如说我们的项目啊，我们的项目。我们会写几个项目啊，这些都是GY项目。

什么叫GI项目啊，都是换页面的。啊，这是我们最后可能要去做的一个小DEMO。啊，一个相册。啊，这一块的话，我们会涉及到很多移动端一些概念，以及什么多子操作什么这些这些东西啊，看什么点不开来。啊，还有八点。啊，看一下啊，应该是这个，这个应该是最终版。点开来，对啊，这个是可以放大，双子放大啊，双子缩小，这些都是一些移动的东西啊，这是一个比较，我们可能要画两边啊，要写很多GS样板量也是蛮大的，好，这是一个，好再来看一个。嗯。好，这是我们最大的一个GI项目。

叫外卖APP的一个项目啊。啊，那这个项目其实我们的代码量是比较多的啊，不管从功能还是从一些体验上面的话，这个项目应该是最完整的啊，我们可以来看一下这个代码量啊，你光看这个页面我们就要写一个。啊，700多是不是，那还有我们封装的一些组件。啊，封装的组件有400多，是不是一些工具类的一些使用啊，看我们CSS都会有一种less的形式来组织啊，那CS的量也是比较大的啊，所以说整个项目需要大家一行一行的挑出来啊，这个过程肯定会有人掉队啊，可是你们班只有20个人，我不希望有人掉队，能不理解啊，一个大班如果说80个人，90个人有那么四五个掉队正常啊，因为。太大了代码量，所以说可能敲不完啊，可是你班只有19个人，每每个人我都可以把控到，就说我的要求是我课上的代码你必须一行一行的自己敲完，只要是我敲的，那你必须得敲，而且不是说对着视频啊，对着视频跟着我的思路敲啊，你可以看一遍视频，然后把视频关掉了，自己去敲，跟着自己的思路去走啊，不要我敲一行，你跟着敲一行，我敲一行，你敲一能不理解啊，说课上我不需要你敲太多的代码，课上主要是我让你把这个思路全部记下来啊，这是我们在写项目的时候啊，如果讲技术点，那最好是我课上讲一础点啊，你尽量能把代码敲完的就敲完，那还有一些特别重要的事情，我希望每个人都要去做笔记啊，可以可以给你们看一下。

嗯。这是我上一个班同学做了一些总结和笔记。啊，那这些笔记是必须要做的，每个同学都得做啊，而且笔记的格式一定要好啊，这是他只是他们可能一两天的笔记，他们长这个样子啊，所以说我们整个有一个半月的课是我上的，所以说你们必须在我这一个半月里面讲的所有的东西都给我整理成笔记啊，因为你们到到后期会发现整理成笔记它有什么好处啊，便于你们复习啊，不要到了后面说，哎，老师我没有时间去复习，给我一个礼拜时间让我复习一下，我再去面试啊，这是不可能的，能不讲，就是说你要想你之后的整个复习的过程比较轻松，或者说整个就业的过程比较轻松，必须把这个笔记给我做，做好啊，有同学是把笔记做做完就成书的，也有同学把笔记做完写成博客发布出去的啊，这之前班上都有好多好多同学是这么做的，所以说你们班人少，每每个同学必须得必须都得做，每天给我提交，先提交给班长啊，这个我这个我会看啊。

OK，那这是我的几个要求啊，刚刚给大家是不是看了两个项目，一个是相册，一个是音乐台，那PC这块我们也会做一个H5C3那个项目。

啊，这个量也是蛮大的，其实啊，这个我们在年前就要把这个项目给它卸掉。啊，这是完全H5C这样的一个营销案例啊，可以来看一下。那我打开这个浏览器啊，因为这个浏览器比较卡，里面东西比较多。啊，这是带音乐的一种营销案例，那这种案例是比较常见的啊，会涉及到我们H5C3里面的各式各样的技术啊，那这个案例我们会采用原生CSS的写法啊，不会采用这种预处理器的写法啊，最后给大家去介绍，所以说我们每个项目都是有自己特点的啊，在我这个阶段，你们会接触到三个比较大一点的一个项目啊嗯。好，做完这三个项目的话，我希望就一个要求，大家一定要对原生能力有一个极大的一个提高啊，然后之后我们会讲怎么去打包啊，或者说怎么去编译啊，啊这些东西我们放到后面去讲啊，那这是又是另外一个话题了，所以说我们现在第一个阶段就是要把页面画好啊，一个前端工程师连页面的规划那实在是。

啊，太可恶了啊，OK，那这样我们说画页面的话，其实我们说前端三三件马车是不是啊，HTLCSSJS是不是，那我先来问几个问题啊呃，这样吧，啊，我说的资料都在prepare里面啊，上课的话我会进一个work文件，OK，那对零一第一天。好。我先来写一个奇妙，嗯，零一吧，就叫。好。来一个超级简单的，可是面试当中经常会问到啊，看你技术怎么样，CSS的全全称是什么？

文本语那是沉淀样式表全屏怎么啊是吧？一般这种问题80%的前都不知道啊，CS的全拼是什么？CS是不是啊，其实我也不知道啊啊，我叫什么caskding什么casding掉。线程sh het不是那个线的啊，那叫线子啊，我们来看一下啊，这个应该就是CS的这个全拼啊，用了一个C啊，这种问题知不知道呢？啊，我感觉啊，其实会考察你一个人对这个技术的一个细腻程度，到底追追求到哪一边是不是啊，那这第一个啊，就CSS全称是什么啊，经常会问到啊好，第二个。

嗯，比如说现在我来写调样式，这个要是应该大家都会啊，清楚器什么，默认要什么，是不是OK，这个叫什么。这个叫style标签是不是？啊，这叫样式表吧。是不是内联样式表么？是不是内敛样式表，它是由什么组成的，也就是说这个东西叫什么？适合。啊，我有同听见同学说视频快啊，不错啊，第一个我们说样式表，最最外面这层是叫样式表，样式表是不是OK，样式表它是用什么组成的。啊，要是表示有一条条的规则组成的，这个叫规则。

啊，规则由什么组成。这个叫选择性，这个叫声明快是不是，所以说规则是由选择器加。声明快组成的。是不是声明快有什么组成，一条条声明组成的声明由什么组成声命由CSS什么属性加CSS属性值组成的键值，对啊，这种概念有没有？啊，没有这种概念的话，其实是不合格的啊，这种东西在笔试生中经常会考到，样式表什么组成啊，组成关系是什么样的啊，样式表记得样式表是由规则组成的啊，这种东西就都是叫做规则，规则由什么组成？选择系加生明块组成，声明由什么组成，不是声明快有什么组成，一条一条的啊声明组成声明它什么组成？CSS属性加CSS属性值组成的键值，对啊，这种关系要把它给梳理梳理清楚。

好，那啊，这就是第二个问题了，是不是第三个问题，比如说现在我来写一个选择性啊，比如说我来一个div底下的U底下的LY底下的一个。一个test吧，OK，比如说我待会回去给他审明一些样式是不是啊，这个证明的要求就不说了，是不是，那我来问。浏览器读取选择性的顺序是从右往左还是从左往右？从右往左还是从左往右，这么地是怎么地，应该是从右往左。

啊，为什么是从右往左的？好，首先我问你一个问题，如果从左往右，有没有可能浏览器只匹配一次就能把这个元素匹配到。如果是从左往右读的，我问你浏览器有没有可能匹配一次就把这个元素成功匹配到。你们可能不可能你必须一层一层往一层一层去往里面挖吧，是不是，如果是从右往左的，有没有可能浏览器第一次就能把这个元素匹配到，比如说我现在这种情况，直接是个ID选择线立马就能匹配到吧，前面这前面这三层还需要渲染吗？解析吗？性能是不是会稍微高一点，是不是，那再想如果说我这边不是一个井号，是一个点，是不是问你从左往右去渲染？想想我是不是先去找页面上所有的D啊，然后找里面的所有的ul，再找所有的L，最终去找这些。是不是你想从右往从右往从从右往左呢？首先我是不是需要这个开的，问你这个LY的范围是不是比从左往右早要来的小。

嗯。是不是如果你是从左往右的，问你是不是你要把页面上说的全部拿到，那从右往左呢。是不是我只要找页面上说的点，然后去找，但点看他上层是个，我会把所的全部匹配到吗。不可能，所以说从算法的复杂度以及这个性能的开销上来讲，浏览器渲染这个选择器的这个顺序应该是从右。往左继续了啊，这三个点经常是被问到的最最基础的C东西能讲OK。好。啊，上课我不需要你去做笔记啊，所以说你要认认真的听啊，然后你课下自己再去做笔记啊，OK，好，这是我们说的第一个点，好，也就是说我这个课件，那一般我课件会给大家去提供一个他们啊，OK，那这是我说的第一个点，三个问题啊，你能不能把它答的很好啊，这三个问题是我们前端面试经常会问到的CS相关的问题啊，那之后我们还会去说好多好多CS的东西啊，CS的图层啊，啊，这个怎么去渲染的，浏浏览器怎么去渲染的啊，这个我们放到之后去讲啊，CSS是一个水，水很深的一个东西啊，一般我个人认为CSS的一个。

一个就是掌握程度跟你的经验有关系啊，就是这个不是靠学能完全学学到的，必须要自己不断的去敲页面啊，你才能领会到这个CSS的一个什么一个原理啊，OK，那这三个问题大家一定要把它整理整理好啊，OK，那紧接着我就跟大家去讲讲一下吧，讲一下我们这个C3这一块到底要去学哪些东西。OK，来看一下，这是我们C3要要去学的好多东西啊，第一个选择器啊，这个C3这一块我们新加了好多选择器啊，这个我们待会会讲啊，制定字体新的UI方案啊，新的UI方案里面有文本的，有核模型的，有形成的一些UI样式，圆角啊，背景啊，渐变啊，那这是我们C3里面啊，会新增的一些东西，然后讲过度动画，讲2D3D变形，讲动画，最终讲布局的一个扩展。

啊，这个可能持续时间是五天左右啊，然后第六天我们会给大家去讲一下CSS的预处理器啊，大家想想你在写CSS的过程当中有没有定义过变量。定义过啊，在S当中有没有定义过函数没有，所以说CSS的话，这个编码的这个复用性高不高。特别低吧，所以说不可能，我们在开发过程中不可能让CSS这个复用性这么低的啊，我们会把它设计成有变量的啊，有函数的啊，其实应该叫混合啊，有嵌套的啊，这个之后我们放到预处理性能会去讲啊，所以说你们会现在会接触到各式各样，在真人课方中会去使用一些技术，也就说以后你写代码还会看到这种，还会看到这种东西吗？

啊。以后你写代码，你写CS还会这样去写吗？不可能这样去写的，能不能讲以后我们写CS代码，我们都会怎么写大卡？都是这样的一个写法啊，可能你们看不懂这样写法啊，写给你们看一个比较清楚一点的。你看都是都是都是这样的写法啊，这个结构极其清楚，而且我们定义了好多好多的混合跟函数，定义了变量啊，这个之后我们都会讲到啊，所以说C学习应该是从现在才真才什么真正开始啊，之前只是一些API技术上的东西啊，那。海峰老师讲的前两天的课是不是CS2的一些扩展啊，啊这些扩展的知识啊，也极其的有用啊，一定要把它掌握掌握好啊，我们在项目当中，我们我们什么会把他课上讲的所有内容我们都会去用啊，OK。

好，那这是我们说的什么CSS的一个大体的一个课程啊，我们会讲。呃，选择性啊，自定义字体性的摇化方案过渡啊，零变形3D变形动画以及布局扩展啊，可能还要讲一个预数理器，总共的时间是六天啊OK。好。