zoukankan      html  css  js  c++  java
  • CSS字体和文本类属性

    CSS字体和文本类属性

    一、总结

    一句话总结:

    从总结中找到知识的架构,从参考手册中找讲解明细,从总结中找注意点

    二、前端之CSS字体和文本类属性

    转自或参考:前端之CSS字体和文本类属性
    https://www.cnblogs.com/21-forever/p/10848045.html

    一、字体类属性:

    1.字体类型:

    font-family:字体1,字体2,字体3;

    常用写法: font-family:"微软雅黑",Arial;

    注:a) 多个字体之间用逗号分隔;

        b)中文字体要放在双引号中,英文字体由多个单词组成时也要加双引号;

        c) 浏览器优先识别字体1,如果找不到字体1,识别字体2,如果都找不到,显示浏览器默认字体。

    2.字体大小:

    font-size:数值+单位;

    注:a)浏览器默认字体大小为16px;

        b) font-size:medium;等价于 font-size:16px;

        c)字体大小一般设置偶数不设置奇数;

    3.字体加粗:

    font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100-500(常规字体)|600-900(加粗字体);

    4.字体倾斜:

    font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

    5.文本是否大写:

    font-variant:normal(常规字体)|small-caps(小型的大写字母字体);

    注:此属性主要应用于英文

    6.字体颜色:

    color:颜色值;

    颜色值的几种设置方式:

    a)十六进制写法  #000 黑色  #fff 白色  #f00 红色

    b)rgb写法       rgb(0,0,0) 黑色  rgb(255,255,255) 白色

    c)rgba写法     a代表透明度,取值范围0-1  rgba(0,0,0,0.6)

    d)颜色单词     red(红色) black(黑色) white(白色) green(绿色) yellow(黄色) gray(灰色) pink(粉色) blue(蓝色)

    7.font简写方式:

    font:italic bolder 12px "微软雅黑",Arial;

    注:使用简写方式时,font-size和font-family不可与其他属性互换位置,也不能分开写

    font:12px/1.5 "微软雅黑",Arial;  (字体大小为12px,行高是字体大小的1.5倍)

    注:将font-size和line-height结合在一起时,用/来表示,/前表示字体大小,/后表示字体行高,当行高不加单位时,表示行高为

        字体大小的多少倍

    注:只有在同时指定font-size和font-family时才能使用/这种写法

    二、文本类属性:

    1.水平对齐方式:

    text-align:left(默认值,左对齐)| center(居中对齐)|right(右对齐)|justify(两端对齐,只对英文起作用);

    注: text-align只对文本,图片,内联元素起作用,给文本,图片,内联元素所在父元素加

    2.垂直对齐方式:

    vertical-align:top|middle|bottom;

      top:居顶部对齐

      middle:居中对齐

      bottom:居底部对齐

    注:该属性只对行内块元素有效,给本元素添加此属性;

        一般在设置图片和文字居中对齐的时候会用到,input控件垂直居中对齐时会用到;

    3.行高:

    line-height:数值+单位;

    注:当单行文本的行高等于容器高时,可以实现单行文本在容器中垂直居中;

         line-height只写数值不加单位时,表示倍行高,行高为字体大小的多少倍;

    eg: line-height:3; 字体大小的三倍

    注:line-height不允许设置负值

    4.文本修饰:

    text-decoration:none(默认值)|underline(下划线)|overline(上划线)|line-through(删除线);

    常用: a{text-decoration:none;}

    5.首行缩进:

    text-indent:数值+单位;

    注:向前缩进为负值,会达到一种隐藏的效果,向后缩进为正值

        只对第一行有效!

    6.字符间距(汉字与汉字,字母与字母的间距):

    letter-spacing:normal(默认间隔)|数值+单位;

    注:值越大,间距越大,值越小,间距越小,允许设置负值

    7.词间距(主要针对英文):

    word-spacing:normal(默认值)|数值+单位;

    注:允许设置负值

    8.文本是否大小写:

    text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

    9.长单词换行:

    word-wrap:normal(默认值)|break-word;

    注:在长单词或 URL 地址内部进行换行时设置为break-word

    10.强制在一行显示:

    white-space:normal(默认值)|nowrap(不换行);

    注:常在省略号设置中用到

    11.文本流控制:

    layout-flow:horizontal(从左到右)|vertical-ideographic(从上到下);

     
  • 相关阅读:
    Coursera机器学习week11 单元测试
    关于 TypeReference 的解释
    getModifiers 方法解释。
    instanceof isInstance isAssignableFrom 比较
    elasticsearch 基础 语法总结
    kibana 启动 关闭 和进程查找
    MD5 SHA1 SHA256 SHA512 SHA1WithRSA 的区别
    spring boot 项目 热启动
    java zip 压缩文件
    Packet for query is too large (1660 > 1024). You can change this value on the server by setting the max_allowed_packet' variable.
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12122560.html
Copyright © 2011-2022 走看看