• CSS---文本属性及其属性值


    CSS—文本属性:

    color/*文本颜色*/
    direction/*文本方向*/
    letter-spacing/*字符间距*/
    word-spacing/*设置字间距*/
    line-height/*设置行高*/
    text-align/*对齐文本元素*/
    vertical-align/*元素的垂直对齐*/
    text-decoration/*添加文本修饰*/
    text-indent/*首行缩进*/
    text-shadow/*文本阴影*/
    text-transform/*控制元素中的字母*/
    unicode-bidi/*设置或返回文本是否被重写 */
    white-space/*元素中空白的处理方式*/
    

    1、color:

    颜色值通常以以下方式定义:

    十六进制 - 如:"#ff0000"
    RGB - 如:“rgb(255,0,0)”
    颜色名称 - 如:“red”

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

    2、direction:

    rtl 文本方向从右到左。感觉和右对齐差不多
    ltl 文本方向从左到右。默认

    .ex1 {direction:rtl;}
    

    3、letter-spacing和word-spacing:

    letter-spacing:

    length:定义字符间的固定空间(允许使用负值)。
    默认没有额外空间
    用来设置单个字或者是字母的间距

    例:

    h1 {letter-spacing:2px;}
    h2 {letter-spacing:-3px;}
    

    letter-spacing:

    length:定义单词间的固定空间(允许使用负值)。
    默认没有额外空间
    用来设置单词间距

    p{ word-spacing:30px;}
    

    4、line-height:

    number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距
    length:设置固定的行间距。
    % :基于当前字体尺寸的百分比行间距。

    p.small {line-height:3;}
    p.big {line-height:200%;}
    

    5、text-decoration

    underline 定义文本下的一条线。 (类似于下划线)
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。(类似于删除线)

    h1 {text-decoration:overline;}
    h2 {text-decoration:line-through;}
    h3 {text-decoration:underline;}
    

    6、text-align和vertical-align:

    text-align:

    left:把文本排列到左边。默认值:由浏览器决定。
    right:把文本排列到右边。
    center:把文本排列到中间。
    justify:实现两端对齐文本效果。

    h1 {text-align:center}
    h2 {text-align:left}
    h3 {text-align:right}
    

    vertical-align:

    sub:垂直对齐文本的下标。
    super:垂直对齐文本的上标
    top:把元素的顶端与行中最高元素的顶端对齐
    text-top:把元素的顶端与父元素字体的顶端对齐
    middle:把此元素放置在父元素的中部。
    bottom:把元素的底端与行中最低的元素的顶端对齐。
    text-bottom:把元素的底端与父元素字体的底端对齐。

    img.top {vertical-align:text-top;}
    img.bottom {vertical-align:text-bottom;}
    

    7、text-indent:

    length 定义固定的缩进。默认值:0。
    % 定义基于父元素宽度的百分比的缩进。

    p { text-indent:50px; }
    

    8、text-shadow:

    h-shadow 必需。水平阴影的位置。允许负值。
    v-shadow 必需。垂直阴影的位置。允许负值。
    blur 可选。模糊的距离。
    color 可选。阴影的颜色。参阅 CSS 颜色值。

    例:

    h1 {text-shadow:5px 5px #FF0000;}
    

    9、text-transform:

    none 默认。定义带有小写字母和大写字母的标准的文本。
    capitalize 文本中的每个单词以大写字母开头。
    uppercase 定义仅有大写字母。
    lowercase 定义无大写字母,仅有小写字母。

    p.uppercase {text-transform:uppercase;}
    p.lowercase {text-transform:lowercase;}
    p.capitalize {text-transform:capitalize;}
    

    10、white-space:

    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。

    p{white-space:nowrap;}
    

    11、unicode-bidi(不全):

    bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性。
    直观体现:配合direction:rtl,可以使文字从右向左排列输出

    div.ex1{
    	direction:rtl;
    	unicode-bidi:bidi-override;
    }
    
  • 相关阅读:
    linux的软连接和硬连接
    各种Python简单功能代码
    《财报就像一本故事书》刘顺仁(二) ——财务报表
    Atitit .h5文件上传 v3
    Atitti. 语法树AST、后缀表达式、DAG、三地址代码
    Atitit.在线充值功能的设计
    Atitit。数据库 安全性 重要敏感数据加密存储解决方案
    atitit.数据验证db数据库数据验证约束
    Atitit.提升电子商务安全性 在线充值功能安全方面的设计
    Atitit.antlr实现词法分析
  • 原文地址:https://www.cnblogs.com/shx1024/p/11931218.html
Copyright © 2020-2023  润新知