zoukankan      html  css  js  c++  java
  • 学习HTML5一周的收获4

    /* [CSS常用文本属性]
     * 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:字体样式,正常(normal) 斜体(italic)
     
    * font-variant:small-caps; 将字母转为小型大写字体。
     
    (了解)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:透明度,0~1之间的数字。 调整时控件以及子控件均会透明,而使用rgba调整时,只会时本控件透明,子控件不会发生透明度变化。
     
    3、行距、对齐等:
    line-height:行高   ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
    >>> 典型应用,调整控件中文垂直居中的方式:控件的height=控件的line-height
     
    text-align:块级元素中文字的水平对齐方式 left center right
     
    letter-spacing:字符间距,字与字之间的间距
                                                                                                                                                                                                                                                                                                                          
    text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none
     
    overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条,scroll始终显示滚动条, hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向
     
    text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
    >>>【重点】让每行多余文字显示省略号:
    ① white-space: nowrap; 如果是中文,需设置行末不断行
    ② overflow: hidden; 设置控件超出范围隐藏
    ③ text-overflow: ellipsis; 设置多余文本省略号显示
     
    white-space: nowrap; 设置中文行末不断行显示
     
    word-break: 浏览器默认在空格处断行,当一个单词长度超出范围时,会不断行显示, break-all 允许在单词内换行。
     
    text-shadow:文本阴影,有四个属性值:
    ①水平阴影距离 必选,数值越大,阴影右移
    ②垂直阴影距离 必选,数值越大,阴影下移 
    ③阴影模糊距离 可选,数值越大,阴影越模糊。默认为0,不模糊
    ④阴影颜色 可选,默认为黑色
     
    text-indent:首行缩进,可用像素值调整缩进大小
     
    * text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细,描边的颜色
  • 相关阅读:
    win10 uwp 弹起键盘不隐藏界面元素
    win10 uwp 存放网络图片到本地
    win10 uwp 存放网络图片到本地
    sublime Text 正则替换
    sublime Text 正则替换
    win10 uwp 绘图 Line 控件使用
    win10 uwp 绘图 Line 控件使用
    AJAX 是什么?
    什么是 PHP SimpleXML?
    PHP XML DOM:DOM 是什么?
  • 原文地址:https://www.cnblogs.com/zhang11424/p/6539241.html
Copyright © 2011-2022 走看看