• Chapter8 使用CSS3

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 使用CSS3

    需要注意的选择

    因为CSS3还在修订和审阅的过程中,真正使用CSS3需要注意三个选择:1.用能用的  2.将CSS功能作为增强,即使浏览器不支持也无伤大雅(比如圆角 border-radius);3Modernizr

    使用Modernizr需要给页面根元素的html添加class="no-js"属性,这样页面加载之后,它会根据当前浏览器支持的情况为html元素添加应用一大堆类,然后我们在CSS部分只要相应的为支持和不支持的浏览器设定不同的样式就可以了

    特定于浏览器的样式

    浏览器的开放商前缀可以在CSS中针对特定的浏览器设定样式

    前缀浏览器
    -moz-Firefox
    -webkit-Chrome和Safari
    -ms-Internet Explorer
    -o-Opera
    所以如果想要使用放射性渐变的话就使用这样的CSS规则

    .stylishBox{

        background:yellow;

        background-image:-moz-radial-gradient(circle,green,yellow);

        background-image:-webkit-radial-gradient(circle,green,yellow);

        background-image:-o-radial-gradient(circle,green,yellow);

        background-image:-ms-radial-gradient(circle,green,yellow);

    }

    有一条是肯定的,如果不适用开发商前缀,相当一部分CSS3功能无法使用

    • Web排版

    web字体

    CSS3 通过@font-face为浏览器提供了强大的字体功能

    步骤一:将字体上传到网站(最好包含多种格式的字体,因为不同的浏览器支持的格式不一样)

    步骤二:@font-face进行字体注册

    步骤三:使用字体

    可下载字体的网站:Font Squirrel (http://www.fontsquirrel.com/fontface)

    @font-face{

        font-family:'CantelliAniquaRegular'; //给这款字体取个名字,随意即可

        src:url('CantelliAniquaRegular.eot');  //必须首先注册eot格式的字体,这样笨蛋的IE不识别其他的也没有关系

        src:local('Cantelli Aniqua'),        //告诉浏览器这种字体的名字,如果客户端装了这种字体就使用客户端的。可是为了防止奇怪的同名字体被使用,一般会传入一个瞎编的名字,比如☺。这样浏览器就找不到本地文件

            url('Cantelli_Aniqua_webfont.woff') format('woff'),    //可用的其他格式,一般将WOFF的放在第一位,因为它的质量最高

            url('Cantelli_Aniqua_webfont.ttf') format('ttf'),

            url('Cantelli_Aniqua_webfont.svg') format('svg'),

    }

    使用的时候设置font-family属性即可    

    body{

        font-family:'CantelliAniquaRegular'; 

    }

    使用谷歌的web字体

    http://www.google.com/fonts/

    选中满意的字体后,选择Quick-use取得信息,在网页中添加相应的样式表链接

    例如:<link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>

    这样就可以直接使用该字体了

    使用自己的字体

    倒是可以自己找字体公司或字体发明人来设计字体,之后可以用Font Squirrel网站进行字体的格式转换,生成的字体包会包含一个@font-face命令的样式表和一个测试网页

    多栏文本

    //column-count只适合Opera,需要在Chrome、firefox和Safari中使用需要添加开发商前缀

    article{

        text-align:justify;

        -moz-column-count:3;

        -webkit-column-count:3;

        column-count:3;     

    }

    上面的方式适合固定布局,但是如果窗口有缩放的话最好还是使用设定的栏的宽度,这样浏览器会自动创建栏来填充

    article{

        text-align:justify;

        -moz-column-width:10em;

        -webkit-column-width:10em;

        column-width:10em;     /*设定的时候可以使用px单位,可是最好用em,因为这是相对于字体大小而言的,1em相当于两倍字体大小*/ 

    }

    • 适用不同设备

    CSS2中的媒体类型的概念

    取得查看页面的设备的关键信息,并据此使用更换不同的样式表

    <link type="text/css" media="screen" href="style.css">  <!--屏幕显示使用此样式-->

    <link type="text/css" media="print" href="print-style.css"><!--打印页面使用此样式-->

    <link type="text/css" media="handheld" href="print-style.css"><!--低带宽、小屏幕的移动设备使用此样式-->

    媒体查询

    使用媒体查询,先要检测的属性。

    @media( media-query-property-name:value){

        /*新的样式*/

    }

    例子:max-width当前窗口中页面的宽度;在识别上网手机的时候要使用max-device-width属性

    @media (max-width: 480px) {

      article {

        float: none;

        width: auto;

      }

      aside {

        position: static;

        float: none;

        background: pink;

        margin-left: 5px;

      }

    }

    高级媒体查询

    避免媒体查询中出现冲突的情况,可以多使用几个条件,还可以使用not关键词

    @media (not max-width: 600px) and   ( max-width: 700px) {

         /*窗口看度在600px~700px间时,覆盖原有样式的代码*/

    }

    @media (not max-width: 400px) and   ( max-width: 600px) {

         /*窗口看度在400px~600px间时,覆盖原有样式的代码*/

    }

    @media (max-width: 400px) {

         /*窗口看度在400px~600px间时,覆盖原有样式的代码*/

    }

    替换整个样式表

    <link type="text/css" media="(max-width:480px)" href="smallDevice-style.css"><!--小设备接入的时候调用-->

    还可以这样  <link type="text/css" media="print and (min-width:25cm)" href="NormalPrintstyle.css"><!--针对特定的媒体类型进行媒体查询,注意媒体类型一定要放在前面-->

    识别移动设备

    <link type="text/css" media="(max-device-width:480px)" href="mobile-style.css"><!--通用的识别iPhone和Android手机的媒体查询-->

    <link type="text/css" media="(max-device-width:480px) and (-webkit-min-device-pixel-ratio:2)" href="iphone-style.css"><!--针对iPhone的媒体查询,像素比为2-->

    <link type="text/css" media="(max-device-width:768px) and (orientation:portrait)" href="ipad_portrait.css"><!--针对iPad的媒体查询,水平的-->

    <link type="text/css" media="(max-device-width:768px) and (orientation:landscape)" href="ipad_landscape.css"><!--针对iPad的媒体查询。垂直的-->

    利用这个媒体查询技术,很容易把<video>标签改变为适合移动设备的大小

    <video controls width="400" height="300">

       <source src="butterfly_mobile.mp4" type="video/mp4" media="(max-device-width:480px)">

        <source src="butterfly.ogv" type="video/ogg">

    </video>

    • 多变的盒子

    透明的盒子

    .transparentBox  {

          background:rgb(170,255,231);  /*作为后备颜色,在不支持的浏览器上还能显示出背景颜色*/

          background:rgb(170,255,231,0.5);  /*透明度为0.5*/

    }

    另一种方式是使用opacity属性

    .transparentBox  {

          background:rgb(170,255,231);  /*作为后备颜色,在不支持的浏览器上还能显示出背景颜色*/

          opacity:0.5;  /*透明度为0.5*/

    }

    圆角盒子

    border-radius属性,可以选择不同的值,半径值越大,水平和垂直线的切线和部分圆弧越长。圆角越圆滑

    此外还可以单独设置每一个角

    .rounded3 {

      border-top-left-radius: 150px 30px;      /*提供的是水平半径和垂直半径两个值*/

      border-top-right-radius: 100px 50px;

      border-bottom-left-radius: 40px 90px;

      border-bottom-right-radius: 20px 75px;

    }

    背景盒子,支持多背景

    .decoratedBox {

      min-width: 320px;

      height: 270px;

      border: 1px solid gray;

      margin: 20px;

      background: transparent;

      background-image: url('top-left.png'), url('bottom-right.png');  /*为左上角和右下角设定背景,位置和下面的 background-position匹配*/

      background-position: left top, right bottom;

      background-repeat: no-repeat, no-repeat;

    }

    阴影盒子

    CSS3 有盒子阴影和文本阴影,

    .shadow2  {

      background-color: #7695FE;

      border: thin #336699 solid;

      padding: 13px;

      text-align: center;

      background: yellow;

      border-bottom-left-radius: 150px 30px;

      border-bottom-right-radius: 150px 30px;

      box-shadow: 8px 8px 10px 1px gray;    /*前两个值是水平和垂直方向的偏移量,第三个值是模糊距离,第四个值是阴影伸展范围,即增大模糊边界之前的实心颜色面积,第五个是阴影颜色;最后还可以加上 inset表示在元素内部创建阴影,一般使用这个的时候不设定水平和垂直的偏移量*/

    }

    .shadow1  {

      font-size: 30px;

      font-weight: bold;

      text-shadow: gray 10px 10px 7px;     /*首先要指定颜色值*/

    }

    渐变盒子

    .gradient1  {

      background: yellow;      /*实心的后备颜色*/

      background: -moz-radial-gradient(circle, yellow, green);     /*还有其他函数-moz-linear-gradient*/

      background: -webkit-linear-gradient(red 0%, orange 20%, yellow 80%, violet 100%);

    }

    推荐微软在线生成工具:http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/

    创建过渡效果

    使用:hover伪类,CSS3提供了新的过渡(transition)功能,从一组样式平滑地切换到另一组样式

    http://www.prosetech.com/html5/Chapter%2008/TransitionButton.html

    .slickButton {

      color: white;

      font-weight: bold;

      padding: 10px;

      border: solid 1px black;

      background: lightgreen;

      cursor: pointer;

      -webkit-transition: all 0.5s;      /*基本的颜色过渡,这里还是使用了开发商前缀。all表示过渡所有的样式,即背景和文本颜色同时过渡*/

      -moz-transition: all 0.5s;

      -o-transition: all 0.5s;

    }

    .slickButton:hover {

      color: black;

      background: yellow;

    }

    还可以使用之前学习的修改opacity属性、添加阴影等方式实现过渡效果

    变换

    .gallery img {

      margin: 5px;

      padding: 5px;

      width: 75px;

      border: solid 1px black;

      -webkit-transition: all 1s;

      -moz-transition: all 1s;

      -o-transition: all 1s;

      background: white;

    }

    .gallery img:hover {

      -webkit-transform: scale(2.2) rotate(10deg);

      -moz-transform: scale(2.2) rotate(10deg);

      -o-transform: scale(2.2) rotate(10deg);    /*放大并旋转*/

    }

    • 标签:
    • 盒子
    • css
    • 使用
    • 浏览器
    • 样式
    • 39
    • background
    • 字体
    • 媒体
    • media
    • CSS3
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部