CSS字体文本样式

作者: 小唱同学 | 来源:发表于2019-05-23 21:30 被阅读0次

    样式的继承:字体的样式可以被继承,不做设置,继承样式才会生效(优先级比选择器低)


    font-family :字体的样式   中文字体名称需要用 引号包裹

                                              可以设置多个字体备选  使用逗号隔开

    font-size: 字体的大小      chrome 默认大小16px

                                            font-size: 20px;

                                            1em = 默认字体的1倍(继承来的字体大小)

                                            font-size: 2em;

                                            100% = 1em

                                            font-size: 200%;

    font-color: 字体的颜色   #十六进制 || rgb()  ||  english   推荐使用16进制

    font-weight: 设置字体粗细

                                        默认:normal

                                         加粗:bold  bolder

                                         变细    light  lighter

                                        100-900  整数

    font-style:字体倾斜

                                         font-style: normal;

                                         font-style: italic; 使用字体的自带倾斜效果

                                         font-style: oblique;   强制字体倾斜

    font属性简写:

    font:   style→weight→size/line-height→family              值之间用空格隔开,注意书写顺序


    文本样式:

    text-align:在块元素上(有宽度的容器上),是内部的文本,内联元素,内联块元素对齐 */

    水平对齐:  text-align

                       在块元素上(有宽度的容器上),是内部的文本,内联元素,内联块元素对齐

                        left:左对齐  right:右对齐   center:居中   justify:两端对齐

                        text-align: center;

    行高:line-height

    没有高度,px 行高 可以决定 元素的高度

    当行高是一个数字时,元素的高度是 字体乘以行高

    line-height: 2= line-height:2em

    text-indent: 首行缩进     内联元素不可设置首行缩进

                        缩进  2个字体

                        text-indent: 2em;

                        容器宽度的%

                        text-indent: 50%;

                       可以设置为负值

    text-decoration:文本修饰线

                        underline:下划线

                        overline:上划线

                        line-through:贯穿线

                        blink:定义闪烁的文本

                        none: 没有

    letter-spacing:字符之间的间隙:

                             单位:px  em  负值      letter-spacing: 10px;

    word-spacing:单词间隙

                               word-spacing: 20px;

    vertical-align:垂直对齐   针对于行内行内块元素


    baseline | sub | super | top|text_top | middle | bottom | text_bottom  (长度||百分比)


    vertical-align不针对块级元素,子集(多行文本)要垂直居中,先设置父级display:table 子级display:table-cell在后在设置vertical-align:middle

    单行文本直接设置line-height与父元素相同高度即可

    图片与文字一同的需全部设置高度与line-height


    水平对齐方式:text—align 是针对块级元素起作用的


    相关文章

      网友评论

        本文标题:CSS字体文本样式

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