CSS-文字效果

最新推荐文章于 2025-05-19 09:06:42 发布

转载最新推荐文章于 2025-05-19 09:06:42 发布 · 644 阅读

文章标签：

#css

css 专栏收录该内容

25 篇文章

订阅专栏

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>

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>

1.3、自定义文本选中样式

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

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

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

1.4、文本对齐

  <title>文本对齐</title>
  <style type="text/css">

    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>

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>

1.6、文本装饰

   <title>文本装饰</title>
   <style type="text/css">

     .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>

1.7、文字阴影

  <title>文字阴影</title>
  <style>

    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>

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>

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>

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>

1.11、隐藏文本

   <title>隐藏文本</title>
   <style type="text/css">

     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>

1.12、旋转文字

   <title>旋转文字</title>
   <style type="text/css">

    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>