html中文字、文本样式及文本省略设置

文字样式设置：

 1.设置文字粗细 font-weight

                    取值：100~300(lighter) 细 400~500(normal) 正常 600~900(bold) 加粗

 2.设置文字大小 font-size 记得加单位

 3.设置文字样式 font-style

                     取值：normal（正常）italic(斜体) oblique（倾斜）

                       浏览器一般不会分别斜体和倾斜，通常选择italic

 4.设置文字字体 font-family  

                 serif：衬线字体

                 sans-serif：非衬线字体

                 monospace：等宽字体

                 cursive：草书字体

                 fantasy：虚幻字体

       简写  font: 必须要写二个属性值  文字大小 文字字体，并且在最后二个

文本样式设置：

        1.设置文本颜色  color

         取值：英文单词

               rgb(red,green,blue)  取值范围[0,255]

               rgba(red,green,blue,alpha)  alpha [0,1]设置不透明度 0 完全透明 1完全不透明

               HSL(A)

               #000000 十六进制

        2.设置文本对齐方式 text-align

             取值：

                center 水平居中

                left 左对齐（默认）

                right 右对齐

                justify 二端对齐  

        3.设置文本样式  text-decoration

               取值：

                  underline 下划线

                  line-throung 删除线

                  none 取消

                  overline 上划线

        4.设置首行缩进 text-indent

                注：单位常用em  em 是当前元素的字体大小

        5.设置行高 line-height    

            行高=字体大小+上间距+下间距    上间距=下间距

            单行文本垂直居中：height=line-height

            取值：

                数值===》代表当前文字大小的几倍  

            font:文字大小/行高 文字字体

        6.设置文字之间的间距  letter-spacing

        7.设置单词之间的间距  word-spacing

        8.设置文字阴影 text-shadow  

                取值：text-shadow：x y blur color

                x:水平方向的偏移量  

                y:垂直方向的偏移量

                blur:设置阴影模糊范围

                color:颜色

        9.  vertical-align：设置行内、行内块元素垂直对齐方式

            可选值：

            baseline：默认值，基线对齐

            top：顶部对齐

            middle：居中对齐

            bottom：底部对齐

单行文本省略及多行文本省略：

单行文本省略：

          1.设置元素宽度

          2.设置元素文本内容一行显示 white-space: nowrap;

          3.设置元素溢出隐藏 overflow: hidden;

          4.设置溢出文本显示 text-overflow: ellipse;

           

多行文本省略：

           1.设置宽度

           2.设置几行省略  -webkit-line-clamp

           3.display: -webkit-box;   -webkit-box-orient: vertical;与-webkit-line-clamp一起连用

           4.overflow: hidden;