00:00
大家好,我是学习园地的特约讲师高落峰,上节课我们做了一些,呃,别名的初始化,在配置文件,这是我们做项目之前必须需要去改的,如果不改的话,目录层次很深,那我们项目的结构呢,感觉就很乱,所以用别名的话,都是用绝对路径去找我们每一个组件的位置,每个图片的位置,网络的位置都是比较方便的。那这节课呢,我们再来初始化一下,呃,公共的样式,因为在我们做项目的时候呢,通常会有一些公共应用的样式,那这些公共样式呢,当然了,呃,所有的项目都有一些公用的一些设置,不用浏览器给我们提供一些默认的,对吧?那这些东西呢,也不用我们自己辟写的,那公用的样式呢,比如说我们找一下在getup里边,Getup里边我们搜索一下。呃,搜索有一个,呃,最常用的一个叫做norma。这个是比较常用的一款,当然如果你装这个哈的话,嗯,你装那个这的话直接克隆下去就可以了,那我们这块直接下载一下这个代码下载一下。
01:01
点击一下,点击两下没关系。文件夹里边我们找一下。来,我们解压到这个文件夹下,找一下它的功能样式。这是我们用的比较多的一些初始化的一些公共样式的部分,我们不用自己去设置,直接用这个文件就可以。我们把它加到。呃,我们在这个样式文件里边这个CSS就可以了,添加到get里面,你看这个文件里边版本是这个版本,这个哈在这块,但注释的东西你不用去删,咱们打包的时候它就会自动给我们下去对不对,你看而加L含高1.15对不对,这是标准的啊,包给几Mar是零,然后呢,这个标签,它这里边所有生命其都是标签,比如说H1默认是什么样的,对吧。然后PA标签对不对,默认对吧,颜色透明。然后标签标签,你看标签是他上一层标签的百分对吧,一般咱们价格那个使用来使用这个,然后图片让边界没有样,然后像发台按钮啊什么的这些都给我们出始化了,对吧?它除了日标签就是属性,你看搜索框number这些都是表单给我们用到的,所以没有任何一个类全是改变原生的,而TML的样式的一个结构,当然如果这里边写的不全,你可以在这里边先进,还可以建一个自己的一个,然后引入这个在里边再添加一些,当然不用在这个文件里改,这文件,呃是第三方开源的对吧,那有可能别人再升级,如果你在文件里改再复制的话,自己写的将来就不生效了。
02:29
所以在这里边我们再建一个样式文件,然叫就叫CSS的,咱们可以起名叫做比如说呃,BASE.css当叫BSE就可以了,然后在这里边呢,首先我们用呃,Csi本身也可以引用其他的文件也是用IPO对不对?导入,因为这俩文件是在同一个目录结构对不对?所以我们直接导入当前目下嗯这个CS文件就可以了,后边我们给你加一个括号,然后这里边写上我们一些自己的一些基础文件,比如说通常我们都有个root,就是呃,真的这些在这边呢,我们会声明一些类似于变量的东西,跟S差不多的,用杠杠开头的,比如说我们的文本颜色,颜色杠test文本颜色,假如说我们给个666,但是什么颜色你给自己设置啊,文本颜色都统一用666,当然我们使用移动端不涉及到宽度高度的,所以那些呢,你们就100%就可以了。
03:16
比如说高亮的文本,嗯,高亮高亮,Hi,当然这是变量名称,你自己起,只要起有意就行。高亮的颜色,比如说我们随便来一个颜色,呃,叫做随便来吧,42B,呃,BAA啊,这个跟vuee的颜色差不多,然后杠杠我们来一个,呃。比如说再来一个。Ing吧。标准的一个颜色,我们是随便写啊,比如说42B983。随便选啊,因为这个颜色是什么呢?是vuee这个颜色,我们看看一下,看一下这个APP里边的,记得是这个颜色你经常用到。嗯,APP里边。
04:02
啊,这个颜色对吧,那个链接默认选择的这个颜色就是这个。那嗯,文本颜色呢,你可以随便加一个类似于这个对不对都可以。嗯,咱们再起一个,比如说呃,背景颜色,所有的咱们用到背景咱们都用的是白色ACK,背景颜色井号FFF6对不对,这颜色,然后呢,统一的字体的尺寸,我们SIZ,我们是14个像素对吧?然后呢,行高的默认得的是1.5倍。1.5倍就可以了,那通常呢,我们除了设置这个呢,我们还需要设置什么?我们比如说设置所有的元素,所有元素咱们做一下它的伪元素,比如说比后F浮呃,For,比for re,比比对对吧,比before还有什么,还有呃,所有元素伪元素的后边加AF乘加二,我们都让它这两个,然那什么比方Mar是零,然后他是零,都把原来这个东西给给去掉,然后呢,呃,Box size这个,呃盒子的尺寸S这个尺寸,咱们得用这个box这个。
05:15
嗯,然后比如说包底初始化,当然了,原来的初始化里边已经有一些给我们做了这些,呃,初始化了对不对,比如说整个包底体的字体啊,对不对,那我们可以让整个包底里边的用户不让他选择,这是也是我们经常做到的,有就是禁止用户干嘛呀。你家?禁止用户怎么呃鼠标在页面上选中什么呃,文字或者是图片。就是经常是禁止的选中,你选中它就去复制嘛,对吧,禁止选中,那我们还可以设置。比如说背景颜色,CK所有的包体的背景颜色。
06:00
嗯,背景颜色,背景颜色前面不声明过变量吗?使用前面入的变量,使用VR,使用这个声明的跟的这个变量杠杠color背景颜色,这样的话我们就直接调用到这个背景颜色,也相当于S类里的调用变量是一个意思,那所有的前景的颜色,前景颜色那我默认是666对不对,那直接也用这个,呃,VR里边的,但这些你可以从别人那复制一个文件就可以了,不用所谓的自己写,只是告诉大家初始化项目的时候,有的时候需要用到这些颜色,文本的颜色。就可以了,然后所有的宽度是。100这里边有个VHV什么概念呢?就是可这个屏幕的宽度,那高度,Eh h eh g HT,你比如说V就是整个手机的高度。对吧,占领整个手机的高度,但是高度我们在每个组件在设置宽度,将它包的体的宽度嘛,咱不要那包的体占领整个的,占它内部的武术道设置就不好设置了,所以呢。这个占整个设备的高度是这个意思,呃,不不是HR宽度嘛,整个设置宽度VW对吧,然后呢,我们还有的时候需要比如说A链接,A链接不知道那里边设没设置过对吧?我们要所有的默认的A链接的颜色,就是文本颜色,这是我们项目通常经常用到的一动,对不对,不要他默认的用这个TS默认的这个颜色,所有的A链接,所有的A链接都不让它有什么,都不让它有下划线用E。
07:24
对吧。那其他的呢,我们就可以设置,可以不设置了,对吧,大致就这么做就可以了,当然你想设置你也可以设置,比如说设置一个像那个goodru似的,对不对,点L。或者叫left左,咱们就是float o左,如果是点right对对吧,那你就可以直接float右。可以射到这些都可以那。这是全局的CSS,那我们想要每个组件都用上这个全局CS统一风格怎么办呢?那我们可以在哪?我们可以在这个APP里面,就是我们APP不是我们主要的主入口的那个,呃,应用嘛,那我们就可以在这个APP里面。
08:04
这个里面我们去引用这个全局的样式。你看这块我们呃用这个了,在这里边我们只需要怎么,只需要去包含这个呃样式就可以了,把我们的所有样式给包含进去,你比如说这里对我们使用,因为这里边也是CSS的语法嘛,对不对,那我们也可以用艾特服,其在C里边用这个去导入别的CS文件对不对,这讲CSS都说过,那这里边找到我们的,因为APP它是当前的目录,对不对,那我们这里边可以直接as,咱们既然设置过这个别名了,这个下边的CSS下边的b.CSS只要加载这一个文件就可以了,因为加载这一个文件,那么我们在这个文件里边,我们又加载这个文件,这样的话我们就把所有的公用CSS就全导入进来了。我现全来了,你比如说。我们这里边儿,呃,这个导航链接的这个颜色,那我们可以试一下,在这里边,假如说我们现在I红色先改变一下啊,可以先看到我们现在这个变化的是红色。
09:05
打链接,现在这个颜色这样。A的是这个链接,当我们选中的,选中的在上面,你看是红色对不对,那我们想恢复这个颜色,恢复这个原有的颜色,那我们就可以用什么用我们的链接的,呃,本身的那个。嗯,连接锁,你比如说。然后VAR看下引入这个文件成成功杠杠T文本,嗯,高亮颜色对吧?来我们保存一下。你看是不是又回到这个颜色了,就用到我们全局文件里边,这我们在全文件声明了,另外在这里边我们别把它改成,因为APP是最外层的这个组件,对吧,这块如果你加S加这个,那它就变成局部的样子了,只能在这个文件里用,现在我不加,那它就所有文件里用,既然所有文件里用,你看比如说我在后面里边我们加一个。找一个文本吧,在这上边。你加一个。
10:00
这是一个测试,这是一个测试,那我在这个div,我给加一个类,加一个类。一加一个,当这个文件咱中临时写的后边都删掉,那我们再加一个点一对吧,那我们设置一下这个颜色,你看就所有的都能用到,任何组件里边都能用到这个全局的颜色,VR咱们再使用一个杠杠啊文颜色颜色颜色文本颜色。呃,文本颜色默认是灰色,你看你原来的变化了,那咱们再变化一个,嗯,高亮。那就变成这颜色了,证明我们在后里边也用到从APP里边,APP里边设置的这个全局的样式了,这就是我们做项目的时候,一定要初始化一个全局的文件,保证我们项目风格统一,这样的话,所有的呃,你们公司开发的项目,或者多人开发项目公用的部分都在这里边了就可以了,当然你可以在这里边自己去一点加,也可以引入第三方的,或者两者结合都是可以的。
11:00
好,谢谢大家,这节课我们就说到这里。
我来说两句