学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(五) Text文本

发布时间:2020-01-01点击:

    在CSS中,文本也有很多属性来控制文本的输出,比如说:文本颜色、文本对齐方式、文本转换、文本间距等。下面我们将逐一介绍。

    一、Text文本颜色

    文本的颜色是通过color属性来设置的,但是后面的值同上节课一样,有三种定义方式,分别为:

    1、十六进制,如:#b0c4de;

    2、RGB,如rgb(255,0,0);

    3、颜色名称,如:"red"。

    使用时候定义如下:

    body {color:red;}
    h1 {color:#00ff00;}
    h2 {color:rgb(255,0,0);}

    二、文本对齐方式

    使用过word与excel的朋友应该都清除什么叫对齐方式,对齐方式使用text-align属性来定义,可选择如下:

    left 把文本排列到左边。默认值:由浏览器决定。

    right 把文本排列到右边。

    center 把文本排列到中间。

    justify 实现两端对齐文本效果。

    inherit 规定应该从父元素继承 text-align 属性的值。

    h1 {text-align:center;}
    p{text-align:right;}

    三、文本修饰

    文本修饰的是text-decoration来定义的,可选值:

    none 默认。定义标准的文本。

    underline 定义文本下的一条线。

    overline 定义文本上的一条线。

    line-through 定义穿过文本下的一条线。

    blink 定义闪烁的文本。

    inherit 规定应该从父元素继承 text-decoration 属性的值。

    这里介绍这个属性,主要是因为这个属性常用来删除链接下面的下划线,代码如下:
    a {text-decoration:none;}

    四、文字显示方向

    CSS中用direction属性可以用来设置文字显示的方向,可选值如下:

    ltr 默认。文本方向从左到右。

    rtl 文本方向从右到左。

    inherit 规定应该从父元素继承 direction 属性的值。

    五、字符间距

    字符间距相信就不用介绍是干什么的了吧,是用letter-spacing属性来定义,其值如:"1px"、“-5px”等

    六、设置行高

    行高是用line-height来定义的,其值可以是百分比,也可以是具体的像素值。

    CSS的属性总计如下(有点多,这里就不做介绍了):

    序号
    属性
    描述
    1
    color
    设置文本颜色
    2
    direction
    设置文本方向
    3
    letter-spacing
    设置字符间距
    4
    line-height
    设置行高
    5
    text-align
    设置对齐元素方式
    6
    text-decoration
    设置文本修饰
    7
    text-indent
    设置元素中文本首行的缩进
    8
    text-shadow
    设置文本阴影
    9
    text-transform
    控制文本中的字母
    10
    unicode-bidi
    设置或返回文本是否被重写
    11
    vertical-align
    设置元素的垂直对齐
    12
    white-space
    设置文本中的空白处理方式
    13
    word-spacing
    设置字间距

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐