我爱编程

任务9extra_CSS常见技巧

2016-08-16  本文已影响0人  饥人谷_江君

课程目标

熟悉常见的样式写法，如背景图片、居中、透明等

学习建议

问答题一定要动手写 demo，否则学习效果只能达到5成

预习视频&课件

课程任务

问答

一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

<style> 
.toolbtn {
background:url(myfile.png); 
display:inline-block; 
height:20px; 
width:20px 
} 
</style>

背景位置，可以通过在background的url()直接定义X,Y轴的值，或者通过background-position属性来添加。例如：

<style>
#btn1 {background-position: -20px 0px}
#btn2 {background-position: -40px 0px}
</style>

id=btn1的元素背景左移20px，id=btn2的元素背景左移40px（假设这两个元素的都添加了toolbtn类，应用了上面样式定义的图片效果）
类似的，你也可以使用下面的方式添加hover的状态：

#btn:hover {
background-position: [pixels shifted right]px [pixels shifted down]px;
}

自己来举个例子
1.首先将从iconfont下载的三种不同的“火箭”图放入雪碧图在线制作工具里



2.设置好相关参数后即可生成下载制作好的雪碧图



3.对照网站所呈现的参数，对html进行设置从而达到相应的效果 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>雪碧图练习</title>
</head>
<style type="text/css">
div {
        height: 200px;
        width: 200px;
        margin: 100px;
        display: inline-block;
        background: url(./result.png) 0 0 no-repeat;
        border: 1px solid;
    }

    .s1 {
        background-position: -500px 0;
    }

    .s2 {
        background-position: -1000px 0px;
    }
}
</style>

<body>
    <div class="s1"></div>
    <div class="s2"></div>
    </div>
</body>

</html>

参考文章：

二、img标签和CSS背景使用图片在使用场景上有何区别

参考文章：

三、title和alt属性分别有什么作用

以下为实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>about title and alt</title>
  </head>
  <body>
    <a href="http://bbs.hupu.com/rockets" title="前往虎扑篮球论坛火箭专区" target="_blank"><img src="XXX" alt="虎扑篮球" /></a>
  </body>
</html>

以下为输出结果


参考文章：

四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思

background 是CSS简写属性，用来集中设置各种背景属性。background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment，background-origin。

以上各个背景属性的描述详见：饥人谷知识点三：background那些事儿

由此可见，background: url(abc.png) 0 0 no-repeat;实际上是background属性的简写版本，可以拆分为以下三个语句

background: url(abc.png)/*使用背景图片abc.png*/
background-position: 0 0;/*指定背景图片的初始位置为0 0*/
background-repeat: no-repeat;/*背景图片不会沿着X轴和Y轴不断重复平铺整个页面*/

五、background-size有什么作用? 兼容性如何? 常用的值是?

六、如何让一个div水平居中？如何让图片水平居中

以下为实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Horizontal Center</title>
</head>
<style>
    .container {
        width: 300px;
        height: 200px;
        border: 1px solid;
        text-align: center;
        margin-left: 50px;
        margin: auto;
    }
</style>

<body>
    <div class="container">
        <img src="./火箭-红.png" alt="火箭logo" />
    </div>
</body>

</html>

以下为输出结果


七、如何设置元素透明? 兼容性？

设置元素的透明度有两种方法

img{ 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */
}

background-color: rgba{255,0,0,0.5};

opacity兼容性如下



rgba兼容下如下


八、opacity和rgba都能设置透明，有什么区别

以下为实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>opacity and rgba</title>
    <style>
        div {
            height: 100px;
            width: 300px;
            border: 1px solid;
            background: blue;
            display: inline-block;
        }
        
        .div1 {
            opacity: 0.5;
        }
        
        .div2 {
            background: rgba(0, 0, 255, 0.5)
        }
    </style>
</head>

<body>
    <div class="div1">
        这是opacity设置的透明度
    </div>
    <div class="div2">
        这是rgba设置的透明度
    </div>
</body>

</html>

以下为输出结果


代码

本教程版权归本人和饥人谷所有，转载须说明来源

内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
<small>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</small>

上一篇 下一篇

猜你喜欢

热点阅读