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. UOJ#370. 【UR #17】滑稽树上滑稽果

    $n \leq 1e5$个点,每个点有个权值$a_i \leq 2e5$.现将点连成树,每个点$i$的链接代价为$a_i \ \ and \ \ i父亲的代价$,这里的$and$是二进制按位与,求最小 ...

  2. gridview和detailsview的完美结合运用实现增删改

    原文发布时间为:2008-07-24 -- 来源于本人的百度文章 [由搬家工具导入] 1、因Gridview中没有增加记录,所以应利用datalistview或formview来弥补。 2、因为det ...

  3. 标准C程序设计七---04

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  4. shell按日期自动切割nginx日志脚本

    shell按日期自动切割nginx日志脚本 参考:自学it网 http://www.zixue.it/. #nginx日志切割脚本 #author:ce #!/bin/bash #设置日志文件存放目录 ...

  5. Linux上安装使用SSH

    參考博客:http://blog.csdn.net/xqhrs232/article/details/50960520 Ubuntu安装使用SSH ubuntu默认并没有安装ssh服务,如果通过ssh ...

  6. 如何查看stm32固件库版本及MDK和keil uvision的关系

    一.方法如上图: 本人的keil uvision4.12版本如下,晕倒! * Version : V2.0.1* Date : 06/13/2008 二.keil MDK和keil uvision的关 ...

  7. Go语言并发之美

    简介           多核处理器越来越普及,那有没有一种简单的办法,能够让我们写的软件释放多核的威力?答案是:Yes.随着Golang, Erlang, Scale等为并发设计的程序语言的兴起,新 ...

  8. 自己动手实现浏览器,21天自制chromium:起手篇

    转:https://zhuanlan.zhihu.com/p/29101613?utm_medium=social&utm_source=qq 大家好,我又来了.这篇是21天自制原子弹的姐妹篇 ...

  9. 【Todo】Java Callable和Future学习

    参考这篇文章:http://blog.csdn.net/ghsau/article/details/7451464  还有一个系列<Java多线程>

  10. [scrapy]Item Loders

    Items Items就是结构化数据的模块,相当于字典,比如定义一个{"title":"","author":""},i ...