zoukankan      html  css  js  c++  java
  • html5--6-59 其他常用CSS属性

    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是以根元素字体大小为基准的

     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>rem和em的区别</title>
     6     <style type="text/css">
     7         p{
     8             font-size: 0.75em;
     9         }
    10         .span1{
    11             font-size: 2em;
    12         }
    13         .span2{
    14             font-size: 2rem;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19     我是浏览器默认html字体大小为16px;
    20     <p>
    21       我是p标签字体,段落文字大小为0.75em即:12px(16*0.75);<br>
    22       <span class="span1">
    23         我大小是2em,即24px,这里是相对父级字号(12px)*2的,而不是相对body里面的16px
    24       </span><br>
    25       <span class="span2">
    26         我大小是2rem,即32px,这里是相对根元素字号(16px)*2的,而不是相对p里面的12px
    27       </span>
    28     </p>
    29 </body>
    30 </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......
  • 相关阅读:
    路径变量@PathVariable/请求参数@RequestParam的绑定以及@RequestBody
    JSR303后端校验详细笔记
    创建ssm项目步骤
    利用 R 绘制拟合曲线
    在 Linux 中将 Caps 根据是否为修饰键分别映射到 esc 和 Ctrl
    Master Transcription Factors and Mediator Establish Super-Enhancers at Key Cell Identity Genes
    Genomic Evidence for Complex Domestication History of the Cultivated Tomato in Latin America
    Variation Revealed by SNP Genotyping and Morphology Provides Insight into the Origin of the Tomato
    The genetic, developmental, and molecular bases of fruit size and shape variation in tomato
    微信支付jsapi
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8030313.html
Copyright © 2011-2022 走看看