文字样式的常见属性的如何使用?

常见的文字样式有text-transforn;text-decoration;letter-spacing;word-spacing;text-align;

text-indent;white-space;text-overflow;text-shadow;box-shadow;vertical-align。

1.text-transform可以用来设置文本的大小写 

    可选值:none  默认值 文本正常显示

                   uppercase  文本大写

                   lowercase   文本小写

                   capitalize   首字母大写

例如p标签里面包含了一段英文,我们相使英文里的单词首字母大写

 p {
        text-transform: capitalize;
    }

    这样我们就可以实现上面的需求 如果想要实现其他的效果 把属性值改掉即可

2.   text-decoration可以用来设置文本的修饰        

 可选值:

                  none   默认值  文本正常显示

                  underline  下划线

                  overline   上划线

                  line-through  删除线  

例如将p标签里的内容加上下划线,我们可以

p{
  text-decoration: underline;
  }

如果实现其他效果,改变text-decoration里的属性值即可

3.letter-spacing可以指定字符间距

直接在letter-spacing属性后面加你想要的间距即可

例如 我想将p标签里的内容字符间距扩大为10px

p{
  letter-spacing: 10px;
 }

 4: word-spacing可以设置单词之间的距离

这个属性和letter-spacing属性异曲同工只不过word-spacing设置的是单词之间的距离

5.text-align用于设置文本的对齐方式

可选值

                 left  文本向左  默认值

                 right   文本向右

                 center  居中显示

                 justify  两端对齐

例如我们将p标签的内容居中显示,我们可以

p{
  text-align:center ; 
 }

实现其他效果改变后面的属性值即可; 

6: text-indent 设置首行缩进

   缩进我们一般用的单位是em

  em是当前字体大小的距离 如果字体大小是15px,那么2em的大小就是30px.

例如将p标签的内容首行缩进2个字符:

p{
   text-indent: 2em;
 }

7: white-space: ; 设置网页如何处理空白

 8: text-overflow 文本溢出包含元素时发生的事情 

 white-space和text-overflow经常在设置单行文本省略号的写法是用到:

        先设置固定宽度  width: 300px;

         设置不换行 white-space: nowrap;

         设置省略号     text-overflow: ellipsis;

          裁剪多余的/溢出的内容     overflow: hidden;

9. text-shadow 设置文本的阴影

    text-shadow: h-shadow    v-shadow    blur    color;

              第一个参数:阴影的水平位移距离   (必填)  正值向右,负值向左

              第一个参数:阴影的垂直位移距离   (必填)  正值向下,负值向上

              第三个参数:阴影的模糊半径

              第四个参数:阴影的颜色 (默认是字体的颜色) 

10.box-shoadow:设置块元素的阴影

box-shoadow:    h-shadow     v-shadow    blur    color;

             第一个参数:阴影的水平位移距离   (必填)  正值向右,负值向左

              第一个参数:阴影的垂直位移距离   (必填)  正值向下,负值向上

              第三个参数:阴影的模糊半径

              第四个参数:阴影的颜色 (默认是黑色)

11. vertical-align  设置元素垂直对齐的方式

可选值:

               baseline  基线对齐  沿着字母x最下方对齐

                top  bottom  middle

功能:1.设置元素垂直对齐,这种功能只针对图片,文字,表格,不针对块元素 

            2.解决图片三像素的问题

   

你可能感兴趣的:(css,html,html,css,html5)