html5--6-59 其他常用CSS属性

实例

学习要点

  • 了解opacity属性:透明度设定
  • 了解cursor属性:自定义鼠标样式
  • 了解CSS新单位rem和em的区别
  • 了解轮廓outline的设置
  • 掌握display 属性常用属性值:

opacity:透明度设定

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。

E8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。对于滤镜本套课程不作讲解。

opacity与通过rgba()设定透明度的区别:前者同时作用于元素的标签内容,后者只是作用于元素本身

鼠标的样式 cursor:

我们可以通过cursor属性改变浏览器默认的鼠标样式,可改变的样式很多,这里仅仅列出几种相对常用的

  1. hand是手型
  2. pointer也是手型,推荐使用这种。
  3. crosshair是十字型
  4. text是移动到文本上的那种效果
  5. wait是等待的那种效果
  6. default是默认效果
  7. e-resize是向右的箭头
  8. ne-resize是向右上的箭头
  9. n-resize是向上的箭头
  10. nw-resize是向左上的箭头
  11. w-resize是向左的箭
  12. sw-resize是左下的箭头
  13. s-resize是向下的箭头
  14. se-resize是向右下的箭头
  15. auto是由系统自动给出效果

rem:根元素字体的大小

浏览器默认字体大小为16px

em是以父元素字体为基准的

rem是以根元素字体大小为基准的

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>rem和em的区别</title>
<style type="text/css">
p{
font-size: 0.75em;
}
.span1{
font-size: 2em;
}
.span2{
font-size: 2rem;
}
</style>
</head>
<body>
我是浏览器默认html字体大小为16px;
<p>
我是p标签字体,段落文字大小为0.75em即:12px(16*0.75);<br>
<span class="span1">
我大小是2em,即24px,这里是相对父级字号(12px)*2的,而不是相对body里面的16px
</span><br>
<span class="span2">
我大小是2rem,即32px,这里是相对根元素字号(16px)*2的,而不是相对p里面的12px
</span>
</p>
</body>
</html>

轮廓(outline)

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

  1. outline 在一个声明中设置所有的轮廓属性。

    • outline-color 设置轮廓的颜色。
    • outline-style 设置轮廓的样式。
    • outline-width 设置轮廓的宽度。
    • outline-offset 设置轮廓到边框的距离。 注:css新增属性,不可以写到符合属性里。

display 属性常用属性值:

display的属性值很多,有些目前支持度不好,有些会放到以后课程或综合实例中讲解,这里介绍几种常用的情况。

  • none 此元素不会被显示
  • block 此元素将显示为块级元素。特征:换行可设置宽高尺寸
  • inline 行内元素,默认。特征:大小自适应;不换行
  • inline-block 行内块元素。特征:可以设置大小,但是不可以换行
  • 其他:list-item/table/inline-table/table-cell/table-caption......

html5--6-59 其他常用CSS属性的更多相关文章

  1. 常用css属性

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...

  2. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  3. 常用css属性记录

    CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: ...

  4. 常用css属性拓展

    text-overflow:clip | ellipsis(默认值:clip)clip:当内联内容溢出块容器时,将溢出部分裁切掉.ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). ...

  5. day 40 文本属性 常用css属性 定位

    一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...

  6. 界面设计常用CSS属性

    CSS常用属性整理: 1 字体属性 font-family 设置使用的字体 font-style 设置字体的样式,是否斜体 font-variant 设置字体的大小写 font-weight 设置字体 ...

  7. css基础--常用css属性01

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

  8. 常用css属性总结

    边框修饰:border------>top,bottom,left,right上下左右边框 分为:color,类型style{ groove,dashed,ridge,solid}一个值---- ...

  9. css属性(常用属性整理)

    摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...

随机推荐

  1. 洛谷 P1756 最小花费

    题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...

  2. msp430项目编程37

    msp430中项目---usb接口编程37 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  3. gdb 远程调试android进程

    原文:http://blog.csdn.net/xinfuqizao/article/details/7955346?utm_source=tuicool 什么是gdb 它是gnu组织开发的一个强大的 ...

  4. 【转】3年PHPer的面试总结

    [转]3年PHPer的面试总结 算法# 1.反转函数的实现# /** * 反转数组 * @param array $arr * @return array */ function reverse($a ...

  5. yii 之数据库关联查询

    <?php namespace app\controllers; use yii\web\Controller; use app\models\Customer; class CustomerC ...

  6. Laravel 之Cache缓存

    写入缓存 Cache::put('key','value',10);//设置10分钟 获取缓存 Cache::get('key'); 增加缓存 Cache::add('key','value',10) ...

  7. 利用BURPSUITE检测CSRF漏洞

    CSRF漏洞的手动判定:修改referer头或直接删除referer头,看在提交表单时,网站是否还是正常响应. 下面演示用Burpsuite对CSRF进行鉴定. 抓包. 成功修改密码完成漏洞的利用.

  8. KernelHacking

    https://kernelnewbies.org/KernelHacking-HOWTO/Debugging_Kernel

  9. jinjia2模板学习

    http://docs.jinkan.org/docs/jinja2/templates.html#

  10. react 创建组件 (四)Stateless Functional Component

    上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Compo ...