CSS-文字效果

逃离我推掉我的手 2022-07-15 10:30 389阅读 0赞

###### 1.1、自定义字体: ######

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>使用@font-face自定义字体</title>
      <style>

@font-face{
        font-family: xujinglei;
        src: url('xujinglei.ttf')
           ,url('xujinglei.eot'); /* IE9+ */
       }
       div{
        font-family: xujinglei;
        font-size:18px; 
       }

</style>
     </head>
     <body>
      <div>
      这段文字使用的是徐静蕾字体。
      </div>
      <br>
    这段文字使用的是默认字体。
     </body>

![Image 1][]

![20161113180851748][]

###### 1.2、段落首字符下沉、缩进及特殊显示 ######

<title>段落首字符下沉、缩进及特殊显示</title>
      <style>

#a{text-indent:15px;}
       #b{text-indent:-6px;}
       #c{text-indent:0.5em;}
       #a:first-letter{
        float:left;
        font-size:25px;
        color:#B23AEE;
      }
      #b:first-letter{
        font-size:30px;
        color:red;
      }
      #c:first-letter{
        font-size:25px;
        color:#B23AEE;
      }
      p.uppercase:first-letter 
      {
        text-transform:uppercase;
      }

</style>
    </head>
    <body>
      <p id="a">
        段落首字符下沉和15像素的缩进
      </p>
      <p id='b'>
        if -首字符不下沉、首字符英文小写和悬挂缩进（-6像素）
      </p>
      <p id='c' class="uppercase">
        if 段落的首字符不下沉、首字母英文大写
      </p>
    </body>

![20161113184348142][]

###### 1.3、自定义文本选中样式 ######

<title>自定义文本选中样式</title>
      <style>

::selection{
        color:#9400D3;
        background:#A9A9A9;
       }
      ::-moz-selection{
        color:#9400D3;
        background:#A9A9A9;
       }

</style>
     </head>
     <body>
      自定义文本选中样式演示网页
     </body>

![20161113191325451][]

###### 1.4、文本对齐 ######

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

</style>
     </head>
     <body>
      <h1>这是标题 1</h1>
      <h2>这是标题 2</h2>
      <h3>这是标题 3</h3>
     </body>

![20161113192141451][]

###### 1.5、间隔与间距实例 ######

<title>间隔与间距实例</title>
       <style type="text/css">

p.wordspacing{word-spacing:20px;}
         /*  设置空格的长度*/
         p.letterspacing{letter-spacing:20px;}
         /*  设置字间距*/
         p.lineheight{line-height:0.3;}
         /*  设置行间距*/
         p.whitespace_normal{white-space:normal;}
         /*  默认，忽略多个空格为1个，忽略回车符*/
         p.whitespace_pre{white-space:pre;}
         /*  保留多个空格*/
         p.whitespace_nowrap{white-space:nowrap;}
         /*  忽略回车符，禁止换行，直到遇到br*/
         p.whitespace_prewrap{white-space:pre-wrap;}
         /*  保留所有空格符与回车符*/
         p.whitespace_preline{white-space:pre-line;}
         /*  忽略多个空格为1个，保留回车*/

</style>
     </head>
     <body>
       <p class="wordspacing">控 制 空 格 的 长 度</p>
       <p class="letterspacing">控制相邻两个字的间距</p>
       <p class="lineheight">使用百分比控制行间距</p>
       <p class="lineheight">使用像素值控制行间距</p>
       <p class="lineheight">使用数值（如1.2）控制行间距</p>
       <p class="whitespace_normal">空白符的默认处理，浏览器会忽略连续的多个空白符									为1个</p>
       <p class="whitespace_pre">空白符的pre处理，浏览器会保留      多个空白符，与pre标签相似</p>
       <p class="whitespace_nowrap">空白符的nowarp处理，浏览器会忽略
         回车符直到遇到br<br />br之后的内容</p>
       <p class="whitespace_prewrap">保留多个    空白符，保留
           回车符</p>
       <p class="whitespace_preline">忽略多个    空白符，保留
             回车符</p>
     </body>

![20161113192827115][]

###### 1.6、文本装饰 ######

.overline{text-decoration:overline;}
         .through{text-decoration:line-through;}
         .underline{text-decoration:underline;}
         .blink{text-decoration:blink;}
         .bold{font-weight:bold;}
         .italic{font-style:italic;}
         .oblique{font-style:oblique;}

</style>
     </head>
     <body>
       <p class="overline">文本装饰</p>
       <p class="through">文本装饰</p>
       <p class="underline">文本装饰</p>
       <p class="blink">文本装饰blink浏览器不支持</p>
       <p class="bold">粗体字</p>
       <p class="italic">italic斜体</p>
       <p class="oblique">oblique倾斜</p>
       斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
       倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
       通常情况下，两种效果在浏览器中看上去完全一样。
     </body>

![20161113200528426][]

###### 1.7、文字阴影 ######

h1{
          text-shadow: 5px 5px 5px #6600ff;
        }
        div{
          opacity:0.5;
          color:#ABABAB;
          text-outline: thickness blur color;
          text-shadow: 2px 2px 2px 2px #ABABAB,25px 25px 5px 5px #ABABAB;
        }
        div:hover{
          opacity:1;
          color:#000000;
          text-shadow: 0px 0px 0px #ABABAB;
        }

</style>
     </head>
     <body>
      <h1>文字的阴影效果</h1>
      <div>试着把鼠标移动到文字上！</div>
     </body>

![20161113202652836][]

###### 1.8、文字毛玻璃效果 ######

<title>文字毛玻璃效果</title>
       <style type="text/css">

.normal{
           width:300px;height:300px;
           border:1px solid;
           box-shadow:1px 1px 2px 2px #ccc;
           transition:all 0.5s ease;
           -webkit-transition:all 0.5s ease;
    
           -webkit-transform:scale(0.9);
           -moz-transform:scale(0.9);
           -o-transform:scale(0.9);
           -ms-transform:scale(0.9);
           transform:scale(0.9);
     
           font-size:26px;
           color:rgba(0,0,0,0);
           text-shadow: 0 0 10px black;
         }

</style>
     </head>
     <body>
       <div class='normal'>
         本实例演示毛玻璃效果。
       </div>
     </body>

![20161114114603776][]

###### 1.9、文字溢出隐藏与超长标题自动省略号 ######

<title>文字溢出隐藏与超长标题自动省略号</title>
       <style>

div.elli {
          width:200px;
          height:20px;
          border:1px solid;
          overflow:hidden; /*超出部分隐藏*/
          white-space:nowrap;/*强制在一行显示*/
          text-overflow:ellipsis;
        }
        div.clip {
          width:200px;
          height:20px;
          border:1px solid;
          overflow:hidden; /*超出部分隐藏*/
          white-space:nowrap;/*强制在一行显示*/
          text-overflow:clip;
        }
        div.hide {
          width:200px;
          height:50px;
          border:1px solid;
          overflow:hidden;
        }
        div.scroll {
          width:200px;
          height:50px;
          border:1px solid;
          overflow:scroll;
        }

</style>
     </head>
     <body>
       <div class="clip">如果此处的文字较多，将自动裁切裁切裁切裁切</div>
       <br>
       <div class="elli"><a href="#">如果此处的文字较多，将自动用省略号代替！</a></div>
       <br>
      <div class="hide">如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字较多，将自动隐藏！如果此处的文字 较多，将自动隐藏！如果此处的文字较多，将自动隐藏！</div>
       <br>
       <div class="scroll">如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！如果此处的文字较多，将出现滚动条！</div>
     </body>

![20161114143509849][]

###### 1.10、金属质感文字 ######

<title>金属质感文字</title>
       <style type="text/css">

p{
           position:relative;
           font-size:30px;
           font-weight:bold;
           color:white;
           background:black;
         }
         span.cover{
           position:absolute;
           width:100%;
           height:100%;
           background:linear-gradient(to bottom,black 0%,transparent 50%,black);
           opacity:0.5;
         }

</style>
     </head>
     <body>
       <p>
        <span class="cover"></span>
       金属质感文字
       </p>
     </body>

![20161114150730832][]

###### 1.11、隐藏文本 ######

h1{
          width:490px;
          height:200px;
          margin:0 auto;
          text-indent:-9999px;
          background:url("img/baidu.jpg") no-repeat;
        }
        .screen-reader-text {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }

</style>
     </head>
     <body>
       <h1>百度</h1>
       <a href="http://www.baidu.com">
        <img src="img/baidu.jpg" alt="" /> 
        <span class=" screen-reader-text">百度一下，你就知道</span>
       </a>
     </body>

![20161114154930539][]

###### 1.12、旋转文字 ######

div{
         -webkit-transform:rotate(-90deg);
         -moz-transform:rotate(-90deg);
         -o-transform:rotate(-90deg);
         -ms-transform:rotate(-90deg);
         transform:rotate(-90deg);
       }

</style>
     </head>
     <body>
       <div>这是一段旋转过的文字</div>
     </body>

![20161114161245595][]

[Image 1]: 
[20161113180851748]: /images/20220715/d47189525d6e4b2281ad30e85b63d67d.png
[20161113184348142]: /images/20220715/31e039334e3a4aac888b6d16223a2cf9.png
[20161113191325451]: /images/20220715/8f99ca131e624cc28d7e7dae78f89035.png
[20161113192141451]: /images/20220715/3cf0590172464974a53ed2ae849dfe9b.png
[20161113192827115]: /images/20220715/fa0dbdcee189409aaadf33f39c406a58.png
[20161113200528426]: /images/20220715/0d24f63e0af5479186c887522462f899.png
[20161113202652836]: /images/20220715/8cab9c9d3a1e4badbcb07a8bb5945ade.png
[20161114114603776]: /images/20220715/78bbc8d14e3043c69a6f244349eac3af.png
[20161114143509849]: /images/20220715/14e6c5cd95f24fd0a18297e88d6e36a3.png
[20161114150730832]: /images/20220715/cbca9b12cbc841aab740fdd6b4f32329.png
[20161114154930539]: /images/20220715/1fde82f85396494f854dacaef60e17f4.png
[20161114161245595]: /images/20220715/1ae451331f1744af8cc814fe4f453b66.png