929次阅读
零星的CSS3特性

首先来看看多重背景吧。

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS3的零星知识点</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="multi"></div>
</body>	
check the result

css:

.multi {
  width : 300px;
  height : 300px;
  background : url("pic1.jpg") 20px 0px no-repeat,
        url("pic2.png") 0px 0px no-repeat;
}	

多重背景其实很简单,CSS3允许我们书写多个background的规则,浏览器会把它们渲染出来,这就是多重背景。

text-overflow是当文本过长时的截断策略,word-wrap也是,看个例子:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS3的零星知识点</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="word">You cannot improve your past, but you can improve your future. Once time is wasted, life is wasted</div>
  <div class="normal">this is a very long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord, and it will come out of box.</div>
  <div class="normal wrap">this is a very long woooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooord, and it will come out of box.</div>
</body>	
check the result

css:

.word {
  width : 300px;
  height : 30px;
  line-height : 30px;
  border : 1px solid red;
  text-overflow : ellipsis;
  overflow : hidden;
  white-space : nowrap;
}
.normal {
  width : 300px;
  line-height : 30px;
  background-color : pink;
  margin-top : 100px;
}
.wrap {
  word-wrap : break-word;
}	

text-overflow : ellipsis;可以让文字超出的部分变成省略号,但是这个属性一定要和overflow : hidden;white-space : nowrap;配合使用,overflow : hidden;是让超出部分不显示,white-space : nowrap;是让文字不换行。word-wrap我们在petshow中用过,它的作用是对于一个很长的单词,超出了box,可以强行打断,防止它超出盒子。

再来看看多列布局,它可以让我们的版式大变样:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS3的零星知识点</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div>
    当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他, 看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱 了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/>
    转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好 了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点 家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像 中的生活。
  </div> 
  <div class="div1">
    当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他, 看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱 了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/>
    转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好 了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点 家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像 中的生活。
  </div>  
  <hr/>
  <div class="div2">
    当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而 他,看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既 然爱了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。<br/>
    转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好 了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点 家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像 中的生活。
  </div>
</body>	
check the result

css:

div {
  margin-top : 40px;
}
.div1{
  -moz-column-count : 2;
  -webkit-column-count : 2;
}
.div2{
  border : 6px solid orange;
  padding : 6px;
  text-align : justify;
  -moz-column-width : 20em;
  -moz-column-gap : 3em;
  -moz-column-rule : 6px solid blue;
  -webkit-column-width : 20em;
  -webkit-column-gap : 5em;
  -webkit-column-rule : 6px solid blue;
}	

怎么样,是不是看上去有点像报纸,如果要做一个报纸的网站,那么这个样式就应用得很广泛了。最简单的就是用column-count来指定列数。当然我们还有很多其他的属性可以设置,如div2中的属性。

最后我们来看看CSS3中最重要的一个特性,响应式,也就是媒体查询,它是为了手机网页而存在的,我们来简单的看一看:

html:

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CSS3的零星知识点</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="mydiv">我们从来都是爱的迫切,却从来不去注重爱的方式。其实人是一个多元的复变函数。一个女人是一个好妻子的同时,她未必是个好儿媳妇。但是人性当中又有很多恒定的东西。比如说不能成为一个孝顺的儿子,他就一定不能成为一个有真爱的丈夫。这是一体的。父母对子女的培育足以让我们穷尽一生去报答。如果没有父母,我们不过是个小小的细胞,而不可能存活。虽然将来陪伴我们度过一生的是自己的伴侣。但是如果没有父母赐予我们生命,这一切都不可能发生。对于一个男人来说,这一生最重要的有三个女人。分别是母亲、妻子、女儿。母亲是给自己生命的,妻子是陪自己走完一生的,而女儿是自己生命的延续。抽掉当中的任何一段都是不完整的。</div>
</body>	
check the result

css:

@media (max-width:800px) {
  .mydiv {
    margin : 100px;
    background-color : gray;
  }
}
@media (min-width:800px) and (max-width:1200px) {
  .mydiv {
    margin : 100px;
    background-color : black;
    color : white;
  }
}
@media (min-width:1200px) {
  .mydiv {
    margin : 100px;
    background-color : pink;
    border : 1px solid red;
  }
}	

拖动浏览器,改变宽度,看看效果。通过@media (max-width:800px)来指定在什么样的宽度范围内,该使用什么样的样式。通过这个属性,我们就能够在手机、pad和电脑上构建出不同样式的网页去适配这些终端。

到此,CSS3的新特性介绍完毕,很多、很炫、很酷,真是高端大气上档次,狂暴酷炫屌炸天,这样的功能,有什么理由不去掌握呢。

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录