• CSS文本样式


    一、文字样式属性

    字体:font-family
    文字大小:font-size
    文字颜色:color
    文字粗细:font-weight
    文字样式:font-style


    font-family:

    1、含空格和中文的字体名,用英文引号""括起
    2、多个字体,用英文逗号,隔开
    3、引号嵌套,外使用双引号,内使用单引号


    font-size:绝对单位(不会因为浏览器的改变而改变)

    in英寸
    cm厘米
    mm毫米
    pt磅
    pcPica
    xx-small 9px
    x-small11px
    small13px
    medium16px
    large19px
    x-large23px
    xx-large28px


    font-size:相对单位(受显示器分辨率影响)

    px 像素
    em/%
    em和%都是针对父元素设置的字体大小
    例子:
    p{font-size: 50px;}
    .em{font-size: 2em;} .em{font-size: 150%;}


    <p>父元素<span class="em">相对值em</span></p>
    相对值em的字体大小为2倍的p中的元素大小
    相对值em的字体大小为150%的p中的元素大小


    文字加粗

    html中:<b></b> <strong></strong>
    CSS中:font-weight
    属性值:400等用于normal 700等同于bold
    normal正常
    bold加粗
    bolder更粗
    lighter更细
    100~900


    文字斜体

    html中:<em></em> <i></i>
    CSS中:font-style
    属性值:
    normal正常
    italic斜体,对于没有斜体变量的特殊字体,将应用 oblique
    oblique倾斜字体


    字体变形

    font-variant
    属性值:
    normal正常
    small-caps小型大写字母


    CSS文本样式

    text-align:设置元素内文本的水平对齐方式(只对块级元素有效)
    属性值:
    left
    right
    center
    justify


    vertical-align:设置元素内容的垂直方式(只对行内元素有效)

    可以用于单元格
    属性值:
    baseline与基线对齐
    sub下标
    super上标
    top顶端对齐
    text-top与文字顶端对齐
    middle与中线对齐
    bottom底部对齐
    text-bottom与文字底部对齐
    长度 例子:style="vertical-align:-15px;"
    基于基线向下移动15像素
    百分比 例子:style="vertical-align:-100%;"
    基于基线向下移动100%
    技巧:当单行文字要垂直居中时,可以使用 line-height把值设为行高height一样高!


    line-height:设置元素中文本行高

    属性值:
    长度值
    百分比
    当使用px作为单位时:.text3{
    font-size: 10px;
    line-height: 25px;
    }行高不会随着字体大小而改变
    当使用em作为单位时:.text3{
    font-size: 30px;
    line-height: 1.3em;
    }行高值为30*1.3=39px,会自适应字体大小的改变

    当使用%作为单位时:.text3{
    font-size: 30px;
    line-height: 100%;
    }行高值为30*100%=30px,会自适应字体大小的改变

    当设置了一个父元素的行高,会继承给子元素,但是继承的是计算后的值,不是直接把em或
    %继承过来!
    例子:
    div{font-size: 20px;line-height: 1.3em;}
    p{font-size: 30px;}
    说明:div中的行高为26px,而div中p的行高也为26px(不是39px)


    其他文本样式:

    word-spacing设置元素内单词之间间距(单词的判断以空格为准)
    letter-spacing设置元素内字母之间间距(每个字母间的间距)
    text-transform 设置元素内文本的大小写
    capitalize|uppercase|lowercase|none
    (首字母大写|字母大写|字母小写|没有任何效果)
    text-decoration设置元素内文本的装饰
    underline|overline|line-through|blink|none
    (下划线|上划线|贯穿线|闪烁效果|没有任何效果)

     
    孜孜不倦,必能求索;风尘仆仆,终有归途。
  • 相关阅读:
    Unity 自定义日志保存
    一万字详解 Redis Cluster Gossip 协议
    第八届“图灵杯”NEUQ-ACM程序设计竞赛个人赛非官方题解
    数组小游戏---火把萤石
    11个编程接单的网站,你有技术就有收入,有收入就有女朋友《男盆友》
    逆向工程,调试Hello World !程序(更新中)
    魔改一波合成大西瓜!代码已开源~
    如何使用C++做个简单推箱子游戏
    第八届“图灵杯”NEUQ-ACM程序设计竞赛个人赛非官方题解
    zookeeper应用
  • 原文地址:https://www.cnblogs.com/liyuspace/p/8232557.html
Copyright © 2020-2023  润新知