14.尚硅谷_css3_复习.wmv原创

对啊，我们第一天讲的是不是选择系自定义字体以及新的UI方案里面的第一部分啊，啊，今天的计划，今天的计划是我们要把过去讲完啊，这是我们第二天的计划，第三天的计划是把2D3D变形讲完啊，第四天的计划是把2D3D变化里那些实例跟动画讲完啊，第五天我们讲布局扩展啊，这个里面东西就比较多了，这个我们要花一天的时间去讲所有的布局扩展，那讲完布局扩展我们就可以把C3给截掉了，就是说C3我们一共上五天啊，第六天我们会给大家去讲一个，就是说CSS预处理器啊，这个相当于就是说我们以后工程化的项目当中怎么去写CSS啊，啊在那一天我们都会讲掉，嗯，然后这是我们前六天的安排，然后然后我们要去讲一下，不是啊，就是一个响应式的框架，因为我们这边会讲到响应式的布局啊，可能花一天的时间跟大家去讲一下不。

二那总共就七天了啊，后面的五天啊，我们三天写项目，两天帮大家去读一下THTL5的一些东西，懂吧，这是我们年前十二天的一个安排，也就到年前十二天会把H5C3啊，以及C3预处理器，以及一个PC项目不需要的响应式全部给它截掉啊，年后过来我们直接JS高级加移动端开发啊，然后讲完移动开发之后，我们讲工程化啊，这是我们年后的安排，OK，好，那差不多整个周期在一个半月左右啊，OK，那我们来看一下，好把昨天讲的东西我们稍微的来回顾一下。好，写个马岛。好，大家一起来回忆啊，想想昨天我们上来，哎，首先有一件事情啊，得问大家了，首先我们上来讲了第一第一个点啊，其实提的三个问题啊，C的全称是什么，就什么卡Ding什么吧，不是吧，OK，第二个呢，我们讲的什么CI样式表的组成。

是不是样式表的组成有哪些啊，有规则，规则组成了我的样式表是不是，然后呢，什么组成规则。选择器加声明快。什么组成的声明快，那肯定是声明，什么组成的声明。啊，一定是CSS合法的是不是也就CSS什么属性名加属性值啊，你要说的稍微精确一点，应该什么CSS合法的属性名跟属性值啊，这边的选择器应应该是CSS里面所定义的合法的选择器，不然他们对特殊性啊，对这种以声明的优先级啊，这是不会造成任何影响的。

懂吗？OK，那这是我们说样式表的组成，第三个点很重要，我们说什么浏览器渲染样式表的什么顺序，一定是什么从右往左啊，这给我记住这一条极其重要啊，从右往左需选它啊，为什么？因为重往左，现在我们整个性能比较高，算法的复杂度比较低，是不是啊，OK啊，他可能会问你为什么，你能不能打。为什么是从右往左渲染的？我记得我昨天讲了，是不是我们说从右往左渲染，有没有机会一次就选中那个元素，有算法复杂度来的低，是不是哪怕没有办法一次选中他也可以缩小范围？是不是这意思啊，能不能理解啊啊，所以说它是从一王左旋转，第四我们就讲了什么选择器，那这一块我们是把CSS所有的选择器全部干嘛你了一嘛，是不是我们说一开始我们讲了哪些选择，基本选择器及其扩展，是不是这里面有些是么选择器啊，我们说一开始的通配符啊，然后class选择器啊，是不是我们叫类选择器啊，ID选择器啊，还有呢，是不是有一个叫后代选择器啊，是不是还有一个什么组合，是不是组合，组合长什么样子。

呃，其实这个组合的话。不应该是逗号分组才叫逗号。是不是这个组合就是把几个选择题写到一起，比如说什么我们可以写一个，比如说ID叫做test，而且它还有一个点什么class就做点pink，那这这种就叫组合。懂不懂这种组合的组合的选择器这一块的话，我想问一下大家，它的特殊性是不会累加的是不是啊，OK，那我们说这是基本程序，那它的扩展呢。

扩展是什么？这叫子元素选择器啊，说的稍微精确一点的话，你可知道直接后代选择器是不是还有什么加号呢？什么兄弟选择器，相邻兄弟选择器，而且我们说兄弟，兄弟都是跟在我这个元素后面的这个加号，它必须得紧跟的是不是啊，还有呢，波浪号。是不是波浪号，波浪号是什么叫通用兄弟选择器啊，兄弟兄弟都是跟在后面的，而且这个波浪号是不需要紧跟的，是不是OK，然后呢。是不是讲了一个分组，是不是分组里面我们说有个叫逗号吧，逗号一般我们叫做结合符，还有结合符对选择性的特殊性不会做任何的贡献，是不是OK，那这是我们说什么选择性好第一类，后来我们讲了什么属性选择器，属性选择性这块我们分几啊。

两样一样是叫什么值存在与值属性选择器是不是OK，这个叫属性选择器啊，这个是它的一个分类，存在于值嘛，懂吗？OK，那这个里面有什么啊，比如说你来个什么存在什么，看你这个属性值存不存在，需不需要引号，不需要OK，然后呢，值呢。是不是等于一个什么一个值啊，还有呢，这里面还有什么波浪号是在这里面吗？想想看看不在这里面吗。选择器，我们什么属性选择器第一类吧，第一类你看这是存在的，是不是这个是关于值的，第三类什么波浪号，波浪号代表什么意思啊。

是不是就是你都是干嘛都以空格吧，其他行吗。不行，必须都是空格，懂不懂他只认空格，他会他会把你这个什么属性，你这个不是一个属性吗？他会找到你这个属性值，然后以空格给你去进行分割，它不会以其他东西给你进行分割的，然后你这个value必须要在你这个空格分开出来的那个数值里面存在，它才能选中，懂吗？啊那这种选这种选择器注意一下，它干嘛只认。只认空格，只认空格啊，一般我们说这个value需要用引号好，然后呢。后面一点呢，就什么子串值吧，是不是叫做子串值，OK，把它分开来，属性选择性啊，这里面有什么啊，有上尖尖是不是啊，这个脱字符是不是有什么多乐福，还有什么心，还有什么树高，是不是就这四种啊，是不是这个以什么什么开头吧，这个以什么什么结尾吧，这个是需要你包含吧，这个呢。

他只两个，要么是要么是。是不是只能只能这两个吧，能里面能有能有其他东西吗？不能啊，那后面那后面可不可以跟东西可以，那干后面可以，不过你如果是的话，你必须是什么独立的。是不是这样的，OK，那这是我们讲的属性选择性，后来我们讲了一个很重要的，什么伪类，伪类与伪元素选择器，尾类与尾元素选择器需要大家注意什么，里面有几种，你先把这个什么大纲给他什么列出来，有什么链接尾类，也叫什么锚点尾类，是不是一样的，一个叫链接尾类，还有呢，动态尾类还有呢。

表单相关的伪类吧，你可以叫做表单伪类是不是？还有呢？结构性伪类，还有呢，元文元素是不是啊？如果面试的时候他问到你选择器，你说给张白纸给我从头到尾给他列出来，那是不是得得呆了是不是？OK来看那链接为类我们什么只是用在标上的吧，有几个三个，那三个有link，还有呢，VI的，还有呢，他给的T是不是啊，Link大家都什么明白是不是？可是你知道链接为类只能用在一个道是不是？那这个target可能稍微比较难理解一点，我们说这个target的为类代表一个什么元素，代表一个什么元素？

这个元素的ID必须是什么？必须是UIUI是什么？井号后面的东西？这个面讲啊，你就你就反正我这个探克里为代表一个元素，什么样的一个元素，它必须有ID属性，只能是ID的懂不懂，而且这个ID属性的值为多少，为你的uii uii是什么井号后面那个东西。那不你讲OK好，动态为例，我们讲了哪两个，还有呢，是不是啊，OK，然后我们说动态伪定的时候还讲什么。讲了一个很重要的实例。有没有讲一个很重要的事例啊，不对，链接尾的时候讲了一个很重要事例，这边讲的什么选项卡是不是CSS实现选项卡是是OK，这边我们说有一个很重要的东西叫什么love hate是不是，我记住love hate是不这他们一个顺序啊，为什么是这种顺序，我就不讲了啊，昨天讲过OK表单的这块我们是不是学了四个哪四个enab怎拼啊，我记得什么有个什么disable是不是还有什么en是是这么拼吗？怎么总感觉怪怪的。

En led吧，Led啊，少了个吧，是不是还有什么的，是不是，而且是不还呢，Fo吧，是不是，那最后里面我们也讲了一个实例，叫什么自定义是不是，其实在他这样讲的是不是自定义什么自定义更丑的单选按钮，是不是自定义单选按钮，OK，这个很清楚啊，一般让你自定义单选按钮，其实就是考察的这个什么切的回类啊，以及一些CSS的小小技巧，比如说怎么去隐藏一个元素，把它移出石头。

懂吗？OK，然后结构性为比较重要，讲了哪两类。Nice child child跟什么of type，它是它们是不是一个系列呀，OK，那只要搞清楚那跟的什么区别，是不是我们就说他们的区别，其他的都比较好理解，都是什么API上面事情啊，把这个区别给他说清楚，区别于哪些。有两点，首先从逻辑上面他们是有区别的。

什么区别啊？Next代表什么代表代表什么意思啊？选中一个紫元素是不是，而且这个元素要指定类型。是不是是不是选中一个什么，其实我们后面都是要跟什么index的，这边也是要跟in的，我们说我们什么这个代表什么。是不是这干嘛找到什么，如果怎么说找到D什么index。指定类型的子元素，什么叫指定类型啊，就是你这个index，这个index个子元素啊，这个类型被指定掉了，如果不是这个类型，它能选中吗？不能选中懂吗？那呢找到什么index什么。

呃，也不能说指定类型的元素了，是吧，找到D个这个怎么形容。啊，某个资元素是不是啊，这边我们说指定类型的时候干嘛，是不是要干嘛，比如说我们我们这样写吧，一一比较好理解。直接写是吧，这边是找到第一做什么子元素，这个子元素，这个子元素必须满足一一的规则是吧，OK，然后呢，这是找到第什么。一资元素是不的，OK，那这是他们俩的第一个区别吧，OK，第二个区别是什么？它以什么？它以元素，以元素为中心是不是这个区别？它很隐晦，懂不懂以元素为中心并不是所有人都知道OK，所以说以后去开发的时候注意一点，懂吧啊，什么叫以元素为中心啊，哪怕你是class，最终都会给你转成。

元素的。懂不懂，OK，那这是我们说结构性伪例是不是，其实结构性伪例这块，这两个东西当中还有两个点，昨天忘昨天忘跟大家提了，就是说你们现在在写CSS，你们有写过这个变量吗。有吗？没有是吧，从来没有试过变量吧，啊，这是我们接触的第一个变量啊，也就是在原生CSS里面啊，能使用到变量的基本上只有。只有这个地方啊，我们可以来看看。昨天忘了跟大家去提了，OK，这是我们讲的next t系列吧，CTRLC啊，我直接。

贴一个过来就行了。好。好。来看，我们就看这个next吧。OK，大家看，呃，现在我这个那下载里面是不是跟这是一样，是不是，而且找的应该找什么，找LY吧，是吧，第一个ly color pick。这个没有任何问题啊，是不是OK，苹果好像看着不是很很清楚啊，第一个平等是不是就有了，OK，其实它可以跟变量的看，如果写个N，它代表什么。啊，这个N代表什么？从零开始，它是从零开始的。懂不懂就是零到正无穷。这能理解吗？而且这个变量只能是。嗯，比如说你看我写个A行不行。OK，全部垮掉啊，OK只能是，嗯，不能是任何变量，不能不能是任何其他变量，懂不懂，在原生CSS里面，你们遇到那边的只有这一个，懂不懂，那比如说我想选中所有激素列的。

N加一嘛，是不是，所以你看是不是N加11357是不是偶数呢？2N嘛。吗，是不是是不是规则都可以在这边去进行计算啊。能懂吗？当然他有两个关键词，E代表偶数。整理你看是不是2468ODD代表基数整理。你看1357懂吗？说这边加了什么一个什么，我们说他们是有什么。他们是有变量的吧，是不是啊，OK，记住它们是有变量的，好这个再来，这是第一点嘛，啊，他们俩一个区别，好，第二点的区别是那时候type以元素为中心，OK。

那China？OK，好，有一个注意点。这边来个注意点啊，我们说什么index可以是变量，嗯，而且什么只能是N啊，这个N代表什么零到正无穷，OK，还可以写什么odd代表奇数。

OK，昨天在课件上面你们应该能看到，是不是还有什么1VN是偶数啊，可是切记它只能是这个变量，不能使其他变量啊，这是我们讲的伪类与伪元素显成器吧，是不是？那当然里面还涉及到什么诺特跟什么。M吧，是不是？不是一到这么凶。那我这边22N加一的话，你如果一到这么穷的话，不是从第三个开始，是不是从第三个开始啊，他是从第一个开始的嘛，啊这个是从N是是从零懂吗？是零是零到正无穷懂不懂？可是这里面有个机制，就是说那时候小等于零的时候，它能选出任何东西吗？选不中的呀，相当这个选择器是废掉，懂吗？懂吗？啊，它是从零开始的啊，OK，好，呃，然后我们说什么尾元素，尾元素这块其实我们讲了很多，是不是需要大家特别关注的，就是什么AFT啊阿跟before啊，我来问大家一个事情，阿尔跟before这两个里面的元素的话，它是不是会最终产生结构的，是不是在文档里面产生结构的吧，可是这个结构有没有在动数里面，那问你如果我为了提高一点性能的话，我把一些元素做成微元素。

我问你，这些物要素产生变化会不会影响动作？会不会影响动作，它都不在动作里面啊，性能是不是可以稍微的高一点。这这能不能理解啊，好OK，好，这是我们什么五元素，好这边我们讲的是不是讲到了选择题这一块啊，然后我们讲了一个什么啊，第五点单独列出来。啊，不要单独变，就放在这边，什么CSS，什么生明的优先级是不是OKC声明优先级这一块需要大家注意什么，好，我们就来注意它的什么优先级的规则，我们叫做沉叠是不是他的规则什么样的，先什么先按什么，先按来源进行啊筛选是不是啊，OK，如果能按来源区分开来就干嘛。

直接分配权重是不是按来源不行的干嘛再按什么，如果来源相同是不是干嘛按选择器的特殊性干嘛继续选。是吧，OK，如果干嘛连选择题的特殊性都一样，那怎么办？选择器的特殊性如果相同那怎么办？按顺序干嘛继续筛选，那按顺序继续筛选的话，肯定能筛选出来吧，是不是按顺序继续筛选？OK，这就是什么？我们叫做成叠样式表成叠的规则啊，先按来源，再按选择器，最终按顺序，OK，好。

好，这是我们什么说的，虽然是生命的一个优先级，是不是OK，那后来我们讲啥？后来不讲上一个叫自定义字体是不是OK，自定义字体这一块我们说什么需要大家注意什么的。啊，其实其他都不需要注意，你要注意注意什么，自信自己干嘛怎么做的方方的face，而且知道它的优势是什么，能让我们所有的客户端使用到我们的在线字帖是不是OK，他有最重要的是他有一个衍生是什么，字体图标是不是字体图标是什么啊就说怎么去做自己图标的分几步，第一个制作一套矢量图是不是OK，第二步将矢量图干嘛与字符进行绑定是不是，然后呢干呢使用工具或者站点干嘛生成。

生成一套字体。是不是问你这一套字体里面，你这边张矢量图与字符进行绑定的时候，我绑定一个字符，是不是也也是生成一套字条，也就什么我一张矢量图。就是我一张矢量图跟什么一个字符去绑定，最终是不是也是生成生成一套字条，你你比如说干嘛我三张矢量图跟什么三个字符去绑定，最终是不是生成的还是这一套字条。

这个能不能理解啊，所以这个字体里面可以管你的字符是看干嘛，看你第二步怎么去绑定的，这能理解吗？OK，那最终干嘛，最终使用呗。是不是好，这里面我们推荐两个站点，是不是，一个是做什么，一个是直接将我们自定义，将我们自己生成自己去转成什么。合适的，呃，将我们的矢量度转成什么字体的两个站点吧，把这两个站点我们直接也贴过来吧。字体字体里面嘛，是不是。这两个这里。是不是OK，好，其实还有很多这样的站点吧，啊，你们以后看你们公司用是吧，看你们公司用什么样的矢量图标啊，或者说矢量图库，可能你们公司有自己的矢量图库啊，OK啊这个其实我们说用起来很好用，只需要给一个SPA或者给一个I标签加一个plus就行了，其他还需要你管吗？就都不需要你管了吗？是不是OK，那最后我们讲的什么啊，最后这个就比较简单了，新增UI钥匙里面什么文本新增样式是吧？文本新增样式里面啊，需要你们核心注意两个点，一个叫做文本。

是不是text是是，还有一个需要大家格外注意的是吧，怎么溢出显示显示省略号是不是几个条件，三个还是四个，四个是不是第一个我们有个什么须是什么外space等于能外，是不是还有呢？一定得是over floorw等于head，是不是第三个呢？Tax o f等于什么？哎，这个我拼不来，E是不是就是E啊，这个打死我都拼出来啊，叫什么？诶，不是B彪啊。

啊，找不到了。叫什么？叫T吧，叫什么吧？你知道让你手写这三个字吗？最最难的是什么吗？就是他啊，他可能拼不出来。OK，整理这是你的意思吧，是不是还有一个点，我说什么包裹区域吧，就是你这个包裹区域吧，你这个包裹区域必须不能让子元素懂吗？乘开，也就是说你必须把这些尺寸给给固定住了，懂吗？啊，一定要记住这四条，最后一条经常被忽略，懂不懂你们不能忽略，OK，这是我们前面讲的东西吧，啊，这里面记住啊，不是昨天讲的东吧，这里面你们记住，我在这边补充了一个内容，就是这个什么变量的一个使用啊，昨天课上漏了，OK。