00:00
好,我们开始来上课,那么这节课呢,我们再来看一下我们的文本属性啊,那么文本属性里边有这么多内容,那我们把它复制过来,我们来看一下啊,在这里边我们要新建一个HTM文件,叫做零七啊文本属性。然后呢,在这里边呀,我给他出试试啊。好了,咱们来看啊。第一个叫什么呢?Take杠设置元素内容的对齐方式啊,那这里边比如说我一样我给了一个div啊,然后呢,在这个div里边,我一样我写成一句话,比如说就写融资教育教育好吧,然后我们给这个div起个名,比如说叫做BOX1。好了,那在这里边我们进行对它进行设置啊,Style标签我们找到BOX1叫做井号BOX1对吧,然后呢,我们给它一个背景的颜色colo啊,比如说给他一个呃,行红色吧,I红色啊,那现在我们来看。你看当前啊,内容在我这个红,整个红色的div区域是什么,是居左了对不对,那么我可以干嘛呢?在这里面通过case杠。
01:04
那设置什么呢?设置它居中啊,咱们这时候再来刷新,你看文字是不是居中啊,哎,那一样能居中也能居右right。刷新。对吧?哎,那它默认值的就是我们的left居住啊,回来是不是居住了,哎,这就是咱们这个配设置元素内容对齐方式啊,取值分别是left center以及RI减去分别是什么居左。居。左。嗯,居中。剧组。怎么打不出来了?然后这个是居中。这个是G。
02:00
用对吧?哎,好,那再我来看下面这个takes-description它是干嘛呢?指定文本是否有修饰啊,怎么叫文本有修饰呢?比如说还是以这个融资教育,我可以干嘛呢?给他设置一个takes t-A。呃,老师啊。De。Descriptionson啊,我可以干嘛呢?我可以给它设置,比如说设置这个呃,Under啊under德line什么意思呢?下划线啊,咱们来看有没有啊,这里边设计你看是不是下划线对吧?哎,效果类似于像我们A标签一样,对不对,哎,那能下有下划线,我还能有什么呢?还能有上划线啊down,呃,Describeson,然后叫做呃,Learn touch。Touch啊,我把它先注册掉啊,来再来看。刷新你看是什么,是三除线对吧?哎,那另外还有一个什么呢?还有一个这个。
03:03
我查一下啊。嗯。好,你看啊,有underland,还有个overland对吧,Learn是什么?是贯穿线对吧,然后呢。这里边还有一个叫做overland啊,是上划线,那咱们看over在这里边一样给它设置为O亚overland,好,那这个时候我们再来看教你,你看是不是上划线上面是不是有个黑杠了,哎,这设置咱们文本的修饰啊,那么一般啊这些东西呢,我们用的倒比较少,最常用的是什么呢?就是给A标签去设置,比如说在这里边我们来个A标签啊A标签然后呢,我们给他一个地址aptdps冒斜线3w.e Du。e.cn,然后再写上容值教育,这是我们的一个A标签,对吧?那么A标签默认它会有什么?有下划线的样式对不对?那么经常我们在页面中看到很多的地方其实都是A标签,就页面中,所以点所有点击跳转的基本上都是A标签来做了,那么他的A标签并没有下划线的样式,对不对?所以呢,我们可以通过什么,通过它来给它取消下划线的样式啊,找到A给它设置一个什么呢?Case descriptionson,给它设置为na。
04:17
那NVE干嘛呢?就是取消它的样式啊,取消样式,比如说我用自体C28变成这个井号,井号000黑色啊,现在我们再来看。刷新你看这是不是就普通的,但是注意我鼠标放上去,它是不是有个这个链接啊,我一点开,你看是不是开始进行跳转。对吧,来停止不让他跳了啊,不让他跳了,那同样因为它是A标签嘛,我们也可以干嘛,可以给他这个它给它设置blank对吧,新窗口打开,所以在这里边我再刷新一下,当我一点击,你看是不是新建窗口去跳了一个地址啊哎,那OK,把它关掉了啊好。这就是咱们的这个take-description啊,设置文本修饰,那么还有什么呢?还有case-in干嘛呀?文本首行缩进啊,什么叫文本首行缩进呢?咱们来看啊,在我们之前学P标签的时候,我们说了P标签是一个什么,是一个段落标签对不对?那么所谓的段落标签,那它就是什么?一个自然段对吧?以上行文本和下行文本是不是都各间隔一行啊对不对?哎,那OK,那现在我们来看啊,比如说在这里边我们写一个叫做。
05:21
具有。魅力的代表人物谁呀,康师?康师傅。对吧,为什么,因为每天。都有层千美。都有成千上万的人泡他。对吧,然后这里边我们把它CTRLCCTRLVV。我多复制点。好,行了,现在我们来看啊,这个页面来刷新,刷新完以后看这是不是有一个自然段了,对吧?但是呢,咱们说了这个自然段是不是开头空两格才符合我们的这个自然段的要求啊,对不对,那开头空两格是不是首行,这里边我们要给它进行一个缩进呢,对不对,那一样在这里边我们找到这个P标签啊,给它设一个什么呢?设一个叫做test杠啊,缩进多大,缩进是不是两个汉字的大小啊,那么两个汉字的大小我们是不是学过一个1EM相当于一个汉字,那2EM是就相当于两个汉字了,那这个时候我们再来刷新。
06:29
你看首行这不输进了两个汉字的大小对不对,哎,这就是什么,这就是它的这个T杠音等的属性好。好,那这个看完以后,我们再往下来文本手上数据我们知道了,还有什么呢?还有这个word啊。这里边我给大家把这个值写一下啊,这里边有什么有安德。有这个O。Line对吧?这叫sun划线啊,还有这个learn line杠。
07:00
Th nu ch,这叫三除线对吧,以及安的。尤马安德伦。油温低压啊。啊,这个叫做下划线。来给它输进,欢迎回来啊,然后K音的首上输进,这就不用说了啊,常用的单位啊,常用的单位me me对吧,哎,相当于相当于一个汉字的。大小啊,好了,然后再往下来,这里边还有什么呢?Word web干嘛呢?它设置当前行超过指定容器的边界时,是否换行啊,那咱们看在这里边我们再测试一个,比如说来个div啊,这个里边呢,我们可以给他请起一个叫做ID,等于BOX2啊BOX2,然后呢,在这里边我们给他一个内容啊,比如说在这里边咱们再写一个叫做世界上最没有用的。
08:02
东西就是工资条。工资条对吧,看着太气啊,擦屁股什么的叫做看着生气,看着生气擦屁股太细。太细。好,那现在咱们来看啊,这个时候其实我们并看不到什么效果,对吧?啊,只是有这么一句话,那么我们把这句话呢,我们稍微把它给做一下样式的设置啊,比如在这里面还是一样井号box。二是吧,给它一个什么呢?宽度比如说为100,高度也为100,然后B加background color,我们给他一个什么呢?给他一个这个紫色,那现在咱们来看我这个div是不是就被我成设置成100成100的了,但是呢,这个内容在结尾,就你看在他要超出的时候,是不是会帮我自动换行,对不对,那我能不能让它不换行呢?也可以,那我就需要用到什么,用到这个属性叫做word。
09:03
Wep,我P啊,它这里边有两个字,默认叫做normal,默认叫normal,你看normal什么呀,是不是到边界到这个。元素的边界就可以自动换行了,对不对,哎,那我可以干嘛呢?给它设置一个叫做不换行的这个属性啊。呃。叫做什么来着?我直接写吧B。Break what啊,What好,那这个时候我们来看刷新。小心。是没反应,哎,那我看一下我们这个手册啊,在这里边我们搜一下叫做W,呃。Wordwap啊,应该叫break word啊,你看啊,内容将在边界内换行,如果需要单词内允许什么,允许断行,这是换行对吧?这个normal呢,允许内容顶开或溢出指定的容器变界对吧?但我这个呢,它是给我干嘛给我直接换行的,没有看到什么效果对吧?因为什么呢?光用这个中文是不行,你看人下面有例子看到了吧,你光用中文是你该是什么样,这样连续的英文才可以啊,中文呢,它会自动帮我们进行什么进行换行了,咱们来看,那既然是这样,我就把它。
10:19
注释掉了啊,注释掉以后咱们用什么?用一连串的英文abcccc好了,这个时候肯定有效果了,来这个时候我们再来看刷新,你看是帮我换行的了,对不对?哎,那现在咱们来看,如果我把它注释掉啊,让它不换行了对不对?来刷新你看默认是不是它是超出的对不对,因为你写的这种一连串的东西,在这个容器里面,他不会帮你画行,为什么呢?因为他会认为你这次写的一个单词。啊,写了一个单词啊,所以他不会帮你换,除非怎么办,除非你这里面有空格空格空格,哎,这个时候他才会帮你换行,你看刷新看这帮你换行了,哎,所以你给他只要连在一起的时候,他是不会干嘛不会帮你换行了,好那么我们给他的这个默认值。
11:02
这里面我们再重新设置啊,叫做n no normal,那我们设置normal的时候,就是我默认这个效果对不对,那好,我想按照强制换行,那就是breakup word,那这个时候我们再来刷新,你看它是不是到边界就会帮我们折上,到边界就会折上了,哎,这就什么,这就是咱们的这个word wap这个属性啊,这个属性实际上是CSS3里面的啊,实际CSS3里面的,咱看这里边也不行,你看版本是不是CS3对吧?哎,但是呢,我们再去做第一个项目的时候,就是做我们文章,我们文章啊也会往里面输入内容,对吧?包括用户可以去输入评论,那么用户输入的是什么东西,我们是不确定的,对不对,所以有可能会遇到这种情况,那怎么办?我们就要给他设置这个,你不可能让用户输入的东西,最后让他超出去对不对,诶所以这个属性提前给大家做讲解了啊,叫做worldwap啊,那么取值。叫做NYL是吧,默认不换R。不换行对吧,还有什么呢?还有这个wordd。
12:01
Break word吧,还有word break break word对吧,那就叫VI k break w RD啊,这是什么呀?当呃,内容到容器边界边界十啊,换行换号啊好了。那再往下来还有什么呢?还有我们的行高属性,其实设置行高的最主要的作用啊,作用我们有两个,第一呢是美化。美化效果。啊第二呢,干嘛呢,可以设置垂直居中啊,可以设置垂直居中,就这两个作用咱们来看啊,在这里面我们如何来美化效果和垂直居中的啊,来比如说我们给他一个这个OL吧,OL。好,然后这里边一样Li,那这个这个时候我们诶。Li啊,我们给的这个O,什么叫做这个有序列表,对不对,哎,也就说前面它会带有什么带有这个序号啊,那OK,我们往这里边去写点内容,比如说。
13:04
叫做嗯。嗯。学习园地。再来个Li啊,叫做成就自己的,只需一套精品好,然后再来Li,叫融教育。叫做在工作中学习,在学习中工作好了,那我这里边给了四个列表对吧,现在我们来刷新,咱们来看底下有12344个列表项,对吧?那么我给它进行设置,怎么设置呢?咱们来看在这里边一样,我通过这个ul。对吧,U Li里边的Li标签进行设置,设置什么呢?比如说我先给它的背景颜色设置一个C,然后给他设置一个什么呢?设置一个pink的背景颜色,好了,现在我们来看刷新。啊,我的是OL啊,没有ul是OL里的Li对吧?来再来刷新,你看是不是有了,有了以后现在这一行的高度,这一行是不是就相当于是我文字这么高度了,对不对,那我能不能给它设置呢?也可以在这里面来看,比如说我给他设置40像素的高度,那这个时候你来看刷新你看。
14:16
高度是不是拉开了,当然我们给的是背景,所以我看不出来什么效果,对吧?那好了,我给大家写个边框啊。我们给它设置一个边框,设置边框以后我们看到效果啊。包的移项数实现了红色边框,好,那这个时候我们来看周尼,你看。是不是就有效果了,哎,如果我没有给他拉hand的时候啊,没有给他拉焊的时候,就是再来刷新,你看是不是行高就跟自己差不多大呀,哎,一行的高度嘛,对不对?那么当我给他设置拉hand为事实的时候,那这个时候你看是不是它的高度就增加了,对不对,而且增加以后当前呢,当前这个呃,文字在这里面是默认是居中的对不对?哎,默认就是一个垂直居中的啊,那好了,那咱们说了,咱们可以通过行高去设置垂直居中,怎么设置呢?咱们来看,比如在这里边啊,我再给他设置一个div。
15:05
第位啊,这个呢,叫什么呢,叫做。呃,ID等于BOX3,然后呢,在这里面我们就把这句话。CTRLC拿过来啊好了,然后我在这里面先设置一下BOX3啊,井号BOX3我们给他一个b background一样,给他一个pink颜色吧,啊,然后给它一个高度,高度位动呢为100像素,好,现在我们来看来刷新,你看这里面是不是有了,但是默认这段内容是不是距离顶部是距离顶部挨着的对不对?哎,我想让它比如现在的水平居中,我们可以用什么takes杠等于一个center,那现在我们来看它水平方向是不是居中了,但垂直我也想它居中怎么办?那这个时候我就需要给它设置一个什么行高,行高的高度等于它设定的高度就可以了,我们设定高度是不是100,那OK,行高伟给的设定100,这个时候内容就会在这里面自动垂直居中了。看到了吧,哎,这就是我们行高的作用,第一我们可以干嘛美化效果,第二呢,我们可以干嘛垂直居中啊垂直居中好了,这就是咱们的这个行高。
16:10
那么韩高看完以后,我们再来看还有什么呢?O,它是设置什么颜色的透明度啊,取值。零。到一。之间的小数。之间的小数啊,那么咱们来看这里边我们也一样啊,补一下啊,这个如果要做垂直居中,是不是设置行高属性等于高度属性值对吧即可啊垂直。居中啊,这个垂直居中好了,那咱们来看这个opity啊,它设置透明度的取值是零到一的小数,对不对,那咱们就一样,我用它来设置,比如说o CI tyity,比如op等为一的时候。刷新有变化吗?没有对不对,那如果说欧倍点为零呢,为零的话,你看整个对换内容是不是就没有了?哎,相当于像隐藏一样,实际上怎么样设置为透明了啊,所以这里面给个0.5。
17:02
哎,刷新你看是不是就一半了,哎,这干嘛呢,就是设置元素的透明度啊,设置元素的透明度啊,这是咱们的op属性。好了,那再往下来还有什么呢?还有overflow啊,这个overflow也是跟文本溢出时有关的啊,那咱们来看在这里边,同样啊,我们再去做一个文本溢出,文本溢出。算了,我们再来一个吧。这里边div。叫做波斯四啊。波四,然后这里边我们好像文本溢出嘛,很简单,CTRLC把这两个内容CTRLV复制两次对吧,复制两次以后我们再来设置这个波格四井号BX波格四,我同样给的宽度为100,然后给的高度也为100,然后再给它一个背景的颜色为pink啊换一个为这个好了,那这个时候咱们来看走NY。来,你看内容是不是已经溢出了,对吧,那溢出以后我可以干嘛呢?我可以通过这个overflow overflow现在咱们注意啊,它是不是沿着垂直方向溢出了,沿着垂直方我就olo y对吧,给它设什么hi d hidden啊,那现在你们来看超出部分怎么样,是不是隐藏了,但是这种隐藏方式是不是会把我这个文字给我截断呢,对不对。
18:16
哎,你看最没显示上上也没有显示权键,也没有显示全对不对,哎,所以这种方式会帮我们截断字体啊,那么另外我还可以干嘛呢?可以设置score s c l干嘛呢?设置滚动来刷新,你看这个时候是不是就出现了滚动条,看到了吗?哎,有时候我超出以后会出现什么出现滚动条哦,那另外还有干嘛呢,叫做这个。呃。凹凸UQ啊自动啊对吧,来刷新,你看现在是出现滚动条了,对不对,那如果把内容减少了,咱们来看啊,找到我们内容这块来把它后面的都删掉。删掉删掉以后咱们看啊,内容就这些肯定是没超出了,对不对,没超出的话,那来刷新。
19:05
是不是什么都没有对吧?哎,一旦我再给它超出了,来还原回来,那这个时候走你你看是不是会自动出现滚动条对不对,哎,这是常用的这几个属性啊,当然我over,我能设置这个over flow到Y,我是不是也能设置over flow到X对吧?那X是不是就沿着水平方向了,对吧?如果水平方向超出的时候会怎么办,对不对,那咱们来看啊,比如说刚才我们做了一个谁啊,做了一个叫做呃。BOX2对吧,那BOX2这里边,比如说其他的我都不买这个。换行那个给它注释掉了啊,注释掉现在你看BOSS2是不是超出了对吧,超出以后我也可以干嘛呢,在这里面设置O了杠X,那我直接自动了啊,那刷新你看是不是水平方向也出现滚动条了。看完了对吧,哎,当然我能设置它,我也可以干嘛给他设置一个什么hid in hidden。
20:00
刷新操作部分是不是就隐藏了,你看后面东西是不是就没有了哎。这是它的单个属性啊。那么我们能这么设置还可以怎么办呢?比如这块还还原成Y啊,这个是设置的Y,我给他注意到,那么它的简写属性叫做overflow。O。V overflow overflow它是干嘛呢?是设置什么呀,设置水平或者垂直超出滚动条以后,就超出这个边界以后如何显示,比如说我让它变成hidden,那现在咱们来看啊刷新。你看是不是给我截断了对不对,那还是这个啊,然后比如说世界上最没有没有没有没有来这边,我随便就给上AA,好现在我们再来看刷新。来你看它直接就给我换行了对吧?哎,这块也给我超出了,对不对,那一样啊,比如说我不设置它,不设置它以后我们再来看原样效果,你看AA是不是已经超出了,下面是不是也超出了,对不对,哎,水平跟垂直都有超出对不对,所以这个时候我可以干嘛,Over fl overflow啊给它设置,为什么设置为凹凸自动对吧,自动的话是不是一旦超出就会出现什么出现你看垂直滚动条对吧,水平滚动条是不是就有了,哎,但是一般在我们做的时候都会干嘛呢?让它出现垂直滚动条,不会让它出现水平滚动条了啊,因为对于一个用户体验度来讲,你让它垂直拉这是没有问题的,但是你一让它垂直拉,让它左左右拉是不是就很不爽啊,对不对,所以我们在做尽量不要让它出现水平滚动条啊,所以大家这块要记住,那么overflow等于这个hidden在这里边只是超出部分隐藏,等到后期我们学到浮动的时候,它还有另外一个含义,那么等到那个含义我们再讲浮动的时候,再来去看它啊,这就是咱们overflow属性干嘛呢?就是当内容溢出元素边框时,是隐藏自动还是。
21:42
显示滚动条啊,那么另外还可干嘛呢?我让溢出的文字可以干嘛?可以显示省略号,那么这时候我需要干嘛呢?连这三个属性一起配合的使用啊。来你看好了,比如说我想让他选择省略号嘛,对不对,那首先第一点我不能让他换行来。我先把它注册掉啊,超出部分我先嗯,不让他隐藏了啊来现在咱先看默认效果来先刷新回来,这是默认效果水平会超,垂直也会超,对吧,那么第一件事干嘛呢?我现不是让它换行叫做。
22:13
呃。White space,为什么呢?为这个应该叫no wrapp啊,咱们可以看一下这个属性啊,一样把它放过来叫做wh space,哎,它干嘛呢?在这里面要说明他,你看设置或检索对象内空格的处理方式,对吧?我们默认情况下空格处理方式,只要遇到空格是不是就换行啊对不对?所以我干嘛呢?我也设置为no web,强制在同一行显示所有文本看到了吧,所以这里边我们给它设置了no web,好,那我们现在来看。刷新,那你看所有东西是不是都在这一行显示了,哎,因为对于文字来说,你像这样的,它不会给我换行对不对,它会干嘛一直超出,但是对于这种文字它会什么,如果达到边界,它是不是自动换行了?哎,所以这个时候咱们来看这个时候我再给他什么超出部分overflow变成什么had的隐藏,隐藏了,诶现在隐藏了对吧?隐藏以后再说了,超出功能中显示省略号,那显示省略号怎么办?那这个时候我就需要用到什么,用到这个take杠。
23:15
呃。O。是吧,这杠overflow等于什么呢?等于。这个啊,以省略号方式显示来刷新,你看是不是变成省略号,哎,一旦要超出以后,这后面就变成什么,变成了省略号显示啊,这就是咱们这个。这三个一起来使用啊,那么通过它可以什么让文字超出变成省略号对吧?那取值就是刚才我们在这里边设定的这个是啊,叫做。啊,显示。省略号显示省略号对吧?然后这里边呢,一样还有一个no wap是强制在一行对吧?这里边叫做NO-NO wp novap没有杠是吧?Novap啊,这里面其实它还有好多属性,但其他属性我们一般用到啊,只能用它啊用它,那这里面我给它设置为nova干嘛是强制在一行啊强制在一行。
24:17
一号好了,然后这几个配合在一起才能显示出我们的这个省略号啊,那么一样省略号这里面我们也看一下,叫takes overflow对吧,Takes-o o v overflow,你看它告诉什么呀,只有两个,一个是这个不显示省略标记对吧?哎,将溢出的部分就裁剪掉了,一个是使用它就显示省略标记,看到了吧?哎,只有这两个属性啊,那么火狐呢,四到六是不支持的,看这里边有兼容性对吧?哎,如果为绿色的,它叫支持的,好,火狐四到六版本是不支持的啊。好了,这就是咱们这个属性,这个属性一样啊,是CSS3提供的属性啊,因为我说了,我们在第一个线项目阶段里边我们可能会用到它,所以我在这里面提前给大家先讲解了啊好,那这就是咱们文本属性里边我们需要用到的这些属性啊,那OK,那这节课我们到这里。
我来说两句