• css笔记——文本样式

    聊聊text-decoration、text-indent、text-transform、letter-spacing、word-spacing、vertical-align。下面是一些常用设置文本样式的css样式：

    text-decoration: underline;                  /* 设置文字下划线 */

    text-indent: 35px;                                /* 设置缩进 */

    text-transform: uppercase;                 /* 设置英文字母转大写 */

    letter-spacing: 3px;                             /* 设置字间距 */

    word-spacing: 10px;                            /* 设置词间距 */

     vertical-align: -20px;                          /* 设置垂直对齐 */

    目录：

    1.text-decoration

    2.text-indent

    3.text-transform

    4.letter-spacing

    5.word-spacing

    6.vertical-align

    7.white-space

    1.text-decoration

    定义什么请移步：w3school

    说明

    这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。

    默认值： none
    继承性： no
    版本： CSS1
    JavaScript 语法： object.style.textDecoration="overline"

    可能的值

    值描述
    none 默认。定义标准的文本。
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。
    blink 定义闪烁的文本。
    inherit 规定应该从父元素继承 text-decoration 属性的值。

    示例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文本实例-设置文本字体效果</title>
    <style type="text/css">
    h2 {
        text-decoration: underline;
    }

    .p1 {
        text-decoration: overline;
    }

    .p2 {
        text-decoration: line-through;
    }

    .sp1 {
        text-decoration: blink;
    }

    .decoration {
        text-decoration: underline;
        padding: 10px;
    }
    </style>
</head>

<body>
    <h1>none默认。定义标准的文本</h1>
    <h2>underline定义文本下的一条线。</h2>
    <p class="p1">overline定义文本上的一条线。</p>
    <p class="p2">line-through定义穿过文本下的一条线。</p>
    <span class="sp1">blink定义闪烁的文本。</span>
    <div class="decoration">
        <span class="sp2">inherit规定应该从父元素继承 text-decoration 属性的值。</span>
    </div>
</body>

</html>

    注释：IE、Chrome 或 Safari 不支持 "blink" 属性值。

    效果图

    2.text-indent

     定义什么请移步：w3school

    说明

    用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。允许指定负值，这会产生一种“悬挂缩进”的效果。

    默认值： not specified
    继承性： yes
    版本： CSS1
    JavaScript 语法： object.style.textIndent="50px"

    可能的值

    值描述
    length 定义固定的缩进。默认值：0。
    % 定义基于父元素宽度的百分比的缩进。
    inherit 规定应该从父元素继承 text-indent 属性的值。

    示例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .indent{
            width: 300px;
            margin: 0 auto;
        }
        .text1{
            text-indent: 20px;
        }
        .text2{
            text-indent: 20%;
        }
    </style>
</head>
<body>
<div class="indent">
    <div class="text1">测试测试测试</div>
    <div class="text2">测试测试测试</div>
</div>
</body>
</html>

    效果图

    3.text-transform

     定义什么请移步：w3school

    说明

    这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。

    默认值： none
    继承性： yes
    版本： CSS1
    JavaScript 语法： object.style.textTransform="uppercase"

    可能的值

    值描述
    none 默认。定义带有小写字母和大写字母的标准的文本。
    capitalize 文本中的每个单词以大写字母开头。
    uppercase 定义仅有大写字母。
    lowercase 定义无大写字母，仅有小写字母。
    inherit 规定应该从父元素继承 text-transform 属性的值。

    示例

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .uppercase1 {
        text-transform: uppercase;
    }

    p.uppercase2 {
        text-transform: uppercase;
    }

    .uppercase2 input {
        text-transform: uppercase;
    }

    p.lowercase {
        text-transform: lowercase;
    }

    p.capitalize {
        text-transform: capitalize;
    }

    .text_transform {
        text-transform: uppercase;
    }

    p.inherit {
        text-transform: inherit;
    }
    </style>
</head>

<body>
    <h1 class="uppercase1">This Is An H1 Element</h1>
    <p class="uppercase2">This is some text in a paragraph.
        <input type="text" placeholder="This is some text in a paragraph.">
    </p>
    <p class="lowercase">This is some text in a paragraph.</p>
    <p class="capitalize">This is some text in a paragraph.</p>
    <div class="text_transform">
        dddd
        <p class="inherit">This is some text in a paragraph.</p>
    </div>
</body>

</html>

    效果图

    在input框中输入： wet

    显示结果：

    然后分别执行以下代码：

    document.getElementsByClassName('uppercase1')[0].innerHTML;
document.getElementsByClassName('uppercase1')[0].innerText;
document.getElementsByClassName('uppercase2')[0].innerHTML;
document.getElementsByClassName('uppercase2')[0].innerText;
document.getElementsByTagName('input')[0].value;

     

    从上图可以看出，虽然个input添加了 text-transform: uppercase;  但是，css只是改变了页面显示的文本样式，但真实的value值并没有发生改变

    4.letter-spacing

     定义什么请移步：w3school

    说明

    默认值： normal
    继承性： yes
    版本： CSS1
    JavaScript 语法： object.style.letterSpacing="3px"

    可能的值

    值描述
    normal 默认。规定字符间没有额外的空间。
    length 定义字符间的固定空间（允许使用负值）。
    inherit 规定应该从父元素继承 letter-spacing 属性的值。

    示例

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .text_letter_spacing {
        width: 500px;
        margin: 20px auto;
    }

    .p1 {
        letter-spacing: -0.5em;
    }

    .p2 {
        letter-spacing: 20px;
    }
    </style>
</head>

<body>
    <div class="text_letter_spacing">
        <p class="p1">This is text 1</p>
        <p class="p2">This is text 2</p>
    </div>
</body>

</html>

    效果图

    5.word-spacing

     定义什么请移步：w3school

    说明

    默认值： normal
    继承性： yes
    版本： CSS1
    JavaScript 语法： object.style.wordSpacing="10px"

    可能的值

    值描述
    normal 默认。定义单词间的标准空间。
    length 定义单词间的固定空间。
    inherit 规定应该从父元素继承 word-spacing 属性的值。

    示例

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>增加或减少单词间距（字间隔）</title>
    <style type="text/css">
    p.spread {
        word-spacing: 30px;
    }

    p.tight {
        word-spacing: -0.5em;
    }
    </style>
</head>

<body>
    <div>
        <p class="spread">This is some text. This is some text.</p>
        <p class="tight">This is some text. This is some text.</p>
    </div>
</body>

</html>

    效果图

    6.vertical-align

    定义什么请移步：w3school

    说明

    默认值： baseline
    继承性： no
    版本： CSS1
    JavaScript 语法： object.style.verticalAlign="bottom"

    可能的值

    值描述
    baseline 默认。元素放置在父元素的基线上。
    sub 垂直对齐文本的下标。
    super 垂直对齐文本的上标
    top 把元素的顶端与行中最高元素的顶端对齐
    text-top 把元素的顶端与父元素字体的顶端对齐
    middle 把此元素放置在父元素的中部。
    bottom 把元素的顶端与行中最低的元素的顶端对齐。
    text-bottom 把元素的底端与父元素字体的底端对齐。
    length 通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
    % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
    inherit 规定应该从父元素继承 vertical-align 属性的值。

    示例

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vertical-align</title>
    <style type="text/css">
    div {
        color: pink;
        font-size: 25px;
    }

    div span {
        color: #000;
        font-size: 15px;
    }

    .test1 {
        vertical-align: baseline;
    }

    .test2 {
        vertical-align: sub;
    }

    .test3 {
        vertical-align: super;
    }

    .test4 {
        vertical-align: top;
    }

    .test5 {
        vertical-align: text-top;
    }

    .test6 {
        vertical-align: middle;
    }

    .test7 {
        vertical-align: bottom;
    }

    .test8 {
        vertical-align: text-bottom;
    }

    .test9 {
        vertical-align: 22px;
    }

    .test10 {
        vertical-align: 30%;
    }
    </style>
</head>

<body>
    <div>father<span class="test1">vertical-align: baseline默认。元素放置在父元素的基线上</span></div>
    <div>father<span class="test2">vertical-align: sub垂直对齐文本的下标。</span></div>
    <div>father<span class="test3">vertical-align: super垂直对齐文本的上标</span></div>
    <div>father<span class="test4">vertical-align: top把元素的顶端与行中最高元素的顶端对齐</span></div>
    <div>father<span class="test5">vertical-align: text-top把元素的顶端与父元素字体的顶端对齐</span></div>
    <div>father<span class="test6">vertical-align: middle把此元素放置在父元素的中部。</span></div>
    <div>father<span class="test7">vertical-align: bottom把元素的顶端与行中最低的元素的顶端对齐。</span></div>
    <div>father<span class="test8">vertical-align: text-bottom把元素的底端与父元素字体的底端对齐。</span></div>
    <div>father<span class="test9">vertical-align: 22px上移22px</span></div>
    <div>father<span class="test10">vertical-align: 30%上移30%</span></div>
</body>

</html>

    效果图

    7.white-space

    定义什么请移步：w3school

    说明

    white-space 属性设置如何处理元素内的空白。

    这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

    默认值： normal
    继承性： yes
    版本： CSS1
    JavaScript 语法： object.style.whiteSpace="pre"

    可能的值

    值描述
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签；文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。。
    nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列，但是正常地进行换行。
    pre-line 合并空白符序列，但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

    示例

    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .white-space-demo {
        width: 170px;
        background-color: pink;
    }

    p {
        font-size: 18px;
    }

    .p1 {
        white-space: pre;
    }

    .p2 {
        white-space: nowrap;
    }

    .p3 {
        white-space: pre-wrap;
    }

    .p4 {
        white-space: pre-line;
    }
    </style>
</head>

<body>
    <div class="white-space-demo">
        <p>the     latest  update  of  oracle solaris</p>
        <p>使用white-space pre效果</p>
        <p class="p1">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space nowrap效果</p>
        <p class="p2">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space pre-wrap效果</p>
        <p class="p3">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
        <p>使用white-space pre-line效果</p>
        <p class="p4">the     latest  update  of  oracle solaris啦    啦 啦 啦啦啦</p>
    </div>
</body>

</html>

    效果图

    推荐：

    我对CSS vertical-align的一些理解与认识（一）

    CSS vertical-align的深入理解(二)之text-top篇

    CSS深入理解vertical-align和line-height的基友关系
  • 相关阅读:
    Java精选笔记_EL表达式
    Java精选笔记_文件上传与下载
    Java精选笔记_Servlet事件监听器
    windows 下安装perl Tk 模块
    html 基础
    用grep 筛选fastq 序列
    php 统计fasta 序列长度和GC含量
    perl 截取 fastq文件
    Java_基础知识回顾
    Git_期末总结
  • 原文地址：https://www.cnblogs.com/yingzi1028/p/7675716.html
Copyright © 2020-2023  润新知