美文网首页饥人谷技术博客
文本属性都在这了

文本属性都在这了

作者: YM雨蒙 | 来源:发表于2017-08-19 10:28 被阅读21次

字体属性

font-size

  • 语法:font-size:<length> | <percentage> | <absolute-size> | <relative-size>
    • 后面两个值不常用有small,middle ,large
font-size:12px;
  font-size:16px;
  font-size:2em;(24px)
  font-size:200%;

font-family

  • 语法:font-family:[<family-name> | <generic-family>]#
    • <generic-family>=serif | sans-sarif
font-family:arial;
font-family:arial,Verdana,sans-sarif;
font-family:Verdana,"微软雅黑";

font-weight

  • 语法:font-weight:normal|bold|bolder|lighter|100|200|..|900
    • font-weight:normal默认
font-weight;bold;

font-style

  • 语法:font-style:normal|italic|oblique
    • oblique:倾斜
    • italic: 斜体
font-style:italic;

line-height

  • 语法:line-height:normal|<number>|<length>|<percentage>
    • normal不是固定的,由浏览器决定
line-height:40px;
  line-height:3em;
  line-height:300%;
  line-height:3;
300%和3显示是一样的,有哪些区别呢?
  修改里面某一段文字大小时;
line-height为number时,继承为直接继承,所以如果给下面的元素设置行高,等于字体大小乘以number值(不计算,直接继承)

而line-height:百分比;先计算,在继承,

结合上面五个属性:

font

  • 语法:font:[[<font-size>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]
    • 语法可以看出:font-style font-weight可选,font-size必填项,font-family也是必填项,line-height可选,但有的时候前面有/
缩写:
font:30px/2 "Consolas",monospace;
font:20px arial,serif;
font:italic bold 20px/2 arial,serif

color

  • color:red;
  • color:#ffffff;
  • color:rgb(255,0,0);
  • color:rgba(255,0,0,1);
  • color: transparent;

对齐方式

text-align

  • 语法:text-align:left|right|center|justify
    • justify:两端对齐

vertical-align

  • 语法:vertical-align:baseline|sub|super|top"text-top|middle|bottom|text-bottom|<percentage>|<length>
    • baseline:基线
    • sub:下标
    • suoer:上标
    • middle:垂直居中
vertical-align

text-indent 首行缩进

  • text-indent:<length>|<percentage>
text-indent:2em;首行缩进两个字
text-indent

格式处理

white-space设置换行是否保留,空格是否合并等

  • white-space:normal|nowrap|pre|pre-wrap"pre-line
    • nowrap不换行,字强制一行
    • pre 换行保留 空格和Tab保留 不换行 完整保留代码格式
    • pre-wrap 在pre的基础上允许换行
    • pre-line 只保留换行,空格合并掉

word-wrap 单词换行

  • word-wrap:normal|break-word
    • break-word 把一个长单词允许自动换行

word-break

  • word-break:normal|leep-all|break-all
    • break-all 任意字母都可以换行

文本修饰

text-shadow 文字阴影

  • text-shadow:none|[<length>{2,3}&&<color>?]#
    • color可不写,颜色为文字颜色
    • #代表可写多个shadow,逗号分开
    • 2到3个length值
image.png

text-decoration下划线

  • 语法:text-decoration:none | [underline||overline||line-through]
    • 语法可以知道,可以写多条线
    • underline:下划线
    • overline;上划线

高级设置

css ...的实现

  • text-overflow:clip | ellipsis
text-overflow:ellipsis;
overflow:hidden; 文字超出隐藏,溢出截掉
white-space:nowrap;不换行

鼠标形状的设置 Cursor

cursor
  • url()自定义
  • auto:自动处理
  • default 普通光标
  • none 消失
  • help 带问号的
  • pointer手型
  • zoom-in放大镜类似的
  • move 十字移动鼠标

inherit 强制继承

很多文本类型都可以继承

相关文章

  • 文本属性都在这了

    字体属性 font-size 语法:font-size: | | |

  • 前端—列表文本字体

    [前端 -- 文本属性和字体属性] 文本对齐 text-align 属性规定元素中的文本的水平对齐方式。 属性值:...

  • iOS 富文本属性

    富文本属性的一些简单使用 一、NSAttributedString属性列表: 二、富文本属性设置: 因富文本属性这...

  • 3-18. text文本相关属性

    CSS 文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进...

  • 从屌丝到架构师的飞越(CSS篇)-CSS文本

    一、介绍 CSS文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本...

  • UI 控件基础UILabel、UIButton、UIImageV

    一、UILabel 1、UILabel属性设置 二、UITextField 1、文本显示属性2、文本输入控制属性 ...

  • css样式——文本篇

    CSS文本属性可以定义文本的样式。通过文本属性,您可以改变文本的颜色、字符间距,对其文本,装饰文本,对文本缩进等等...

  • css属性书写顺序

    布局定位属性 自身属性 文本属性 其他属性

  • CSS3美化网页元素

    一、网页文本 CSS文本属性可以定义文本的外观,通过文本属性,可以改变文本的颜色、大小、字体类型以及对齐文本,装饰...

  • Flutter常用组件的讲解

    TextWidget文本组件讲解 TextWidget的常用属性 TextAlign:文本对齐属性(TextAli...

网友评论

    本文标题:文本属性都在这了

    本文链接:https://www.haomeiwen.com/subject/hyzzrxtx.html