zoukankan      html  css  js  c++  java
  • css常用属性和值

    字体属性

    font

    • font:字体风格[字体加粗]<字体大小>[/行高]<字体族科>
      font-family 字体族科 宋体|微软雅黑

    • font-family:"Arial","Helvetica",sans-serif;
      font-size 字体大小

    • font-style 字体风格 normal | italic | oblique (斜体)

    • font-weight 字体加粗 normal | bold | lighter

    • font-variant 字体变形 normal | small-caps

    文字颜色

    • color 设置文字颜色

    文本属性

    • letter-spacing 字母间隔 值为长度,可以是负值

    • word-spacing 词的间距(通过空格识别)

    • text-decoration 文字修饰

      underline
      overline
      line-through
      none(默认)

    • text-align 横向排列 left | right | center

    • vertical-align 垂直对其方式
      baseline: 将支持valign特性的对象的内容与基线对齐
      sub: 垂直对齐文本的下标
      super: 垂直对齐文本的上标
      top: 将支持valign特性的对象的内容与对象顶端对齐
      text-top: 将支持valign特性的对象的文本与对象顶端对齐
      middle: 将支持valign特性的对象的内容与对象中部对齐
      bottom: 将支持valign特性的对象的文本与对象底端对齐
      text-bottom: 将支持valign特性的对象的文本与对象顶端对齐
      : 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
      : 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

    • text-indent 文本缩进 2em(2个字) 50px

    • line-height 设置行间距离 不允许使用负值

    • word-break 规定自动换行的处理方法

       normal        使用浏览器默认的换行规则。
         break-all    允许在单词内换行。
       keep-all    只能在半角空格或连字符处换行。
      
    • word-wrap 允许长单词或URL地址换行到下一行

      normal 只在允许的断字点换行(浏览器保持默认处理)。
      break-word 在长单词或 URL 地址内部进行换行。

    • overflow-wrap CSS3中把word-wrap 改名为 overflow-wrap

    • white-space

      normal: 默认处理方式。
      pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅
      pre对象
      nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。
      pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
      pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换

  • 相关阅读:
    VS Code中格式化插件Prettier-Code Formatter设置
    module5-online-jQuery关于动态轮播图的制作
    module5-jQuery 快速网页交互开发
    module5-05-jQuery 事件操作和插件
    module5-04-jQuery 节点操作和元素尺寸
    module5-03-jQuery 排序、入口函数与动画
    选配CPU的时候,最好带上孩子,学会选择才能把握机遇
    选配显示器时带上孩子,体验选配的乐趣,培养财商从细节开始
    家用电脑升级选配硬盘时带上孩子,体验选配,培养财商从细节开始
    科普文,选配内存,常识分享
  • 原文地址:https://www.cnblogs.com/fxc-520520/p/9680997.html
Copyright © 2011-2022 走看看