• CSS样式表之常用文本属性


    断更了两周了,因为纠结之后在学java啦,但是还是要把学过的前端知识更完

    以下的一些文本属性是CSS最常用的属性:

    【长度单位】:px(像素)
    【颜色单位】:
      十六进制:#ffffff 分别对应红绿蓝的比例;最常用
      颜色名称:red
      rgb颜色:rgb(255,255,255)
    【尺度属性】:
      width、min-width、max-width
      height、min-height、max-width
    【文本属性】:
      1、字体字号型:
      font-weight:字体粗细 ;bold加粗、lighter细体、100-900数值(其中400为正常,700=bold)
      font-size:字体大小 **px、**%(浏览器默认字体大小的百分比,绝大部分默认16px)
      font-family:字体族,设置字体。
      多个字体样式之间用逗号分隔,浏览器解析时,从左往右依次解析,直到选择到可用字体;
      一般前面使用具体名称,最后一个使用字体族类名称(常用字体族类:衬线体serif、非衬线体sans-serif[常用]、等宽体Monospace)
      例如:font-family=Arial,'Microsoft Yahei',sans-serif;
      font-style:字体样式
      (了解)font缩写形式:font-style font-variant font-weight font-size/line-height font-family
      》》使用注意事项:顺序必须严格按照上述顺序;多个样式之间用空格个分隔,而且font-size/line-height必须作为一对 用/分隔

        font-size和font-family必须指定,其他样式不指定将采用默认样式显示
      》》例如:font: italic bold 75%/1.8 "microsoft yahei",sans-serif;
              倾斜 加粗 字号/行高 字体族(微软雅黑,非衬线字体族)
      2、字体颜色:
        color
        opacity:透明度 css3的新属性;调整时,控件及子空间均透明,而用 rgba调整时,只会使本控件透明,子空间不发生变化
      3、行距、对齐等:
        line-height:行高 写法:像素单位48px;不带px 正常行高的倍数;百分数
        》》典型应用,调整空间中,文字垂直居中的方式:控件的heijht=控件的line-height
        text-align:块级元素中,文字的水平对齐方式
        letter-spacing:字符之间的距离
        text-decoration:文本修饰 下划线underline;删除线line-through;上划线overline;none
        overflow:控制超出范围文本的显示方式
            auto 根据文字多少自动显示滚动条
            scroll 显示滚动条
            hidden 隐藏超出范围的部分
        text-overflow:设置多于文字的显示方式
            clip 裁剪;
            ellipsis 省略号显示
        【重点】让每行多余文字显示省略号:
            white-space: nowrap; 如果是中文,需设置行末不断行
            overflow: hidden; 设置超出控件范围隐藏
            text-overflow: ellipsis; 设置多余文本省略号显示
        white-space: nowrap; 设置中文不换行,显示滚动条
        word-break:设置英文行末断行显示 break-all按字母断行;break-word按单词(空格)断行
        text-shadow:文本阴影,有四个属性值:水平阴影距离;垂直阴影距离;阴影模糊距离;阴影颜色
              例:text-shadow: 4px 4px 3px red;
        text-indent:首行缩进,其他行正常,可用像素值调整缩进大小
        text-stroke:描边 例如:-webkit-text-stroke: 1px blue;

     1 <style type="text/css">
     2             .div1{
     3                 width: 100px;
     4                 height: 50px;
     5                 background-color: rgb(0,255,0);
     6                 /*font: italic bold 75%/1.8 "microsoft yahei",sans-serif;*/
     7                 font-weight: normal;    /*字体粗细正常*/
     8                 font-size: 18px;
     9                 font-family: "微软雅黑",sans-serif;   
    10                 line-height: 50px;    /*行高*/
    11                 font-style: italic;
    12                 opacity: 0.5;   /*整个div都透明,包括背景和字体等*/
    13                 white-space: nowrap;
    14                 overflow: hidden;
    15                 text-overflow: ellipsis;
    16             }
    17             .div2{
    18                 width: 200px;
    19                 height: 150px;
    20                 color: orange;
    21                 font-size: 35px;
    22                 font-weight: bold;
    23                 background-color: rgba(0,255,0,0.5);   
    24                 /*只是背景色,即只改变要求改变的颜色和透明度*/
    25                 line-height: 150px;
    26                 letter-spacing: 10px;
    27                 text-align: center;
    28                 /*text-decoration: underline;*/
    29                 text-decoration: line-through;
    30                 text-shadow: 5px 5px 3px red;
    31                 /*字体阴影*/
    32                 text-indent: 40px;
    33                 /*字体首行缩进40px*/
    34                 -webkit-text-stroke: 1px blue;
    35                 /*字体描边*/
    36                 overflow: auto;
    37                 /*超出字体的显示形式:自动*/
    38                 white-space: nowrap;    
    39                 /*不换行*/
    40             }
    41         </style>
    42     </head>
    43     <body>
    44         <div class="div1">
    45             我是第一港口股好了回家了给你明显
    46         </div>
    47         <div class="div2">
    48             
    49             我是第二个人哦
    50         </div>
    51     </body>

    CSS常用属性还有背景,关于背景比较多,下一篇专门单独写一篇详细讲背景的内容

  • 相关阅读:
    研究table-cell和overflow
    自己封装jquery的一些方法 链式调用模式
    简单的抖动运动 主要利用offset left 和 setTimeout
    闭包的讲解与简单实用(重新理解)
    操作iframe 的方法与兼容性
    360度全景图片
    数组排序
    怎么让链式调用setTimeout停止
    setInterval 和 setTimeout
    重力碰撞运动的疑惑
  • 原文地址:https://www.cnblogs.com/zys-blog/p/6585775.html
Copyright © 2020-2023  润新知