CSS文本样式实际应用中应该如何操作?

Python进阶学习交流
关注

4. text-indent文本缩进

text-indent文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}5. letter-spacing 设置字符间距

增加或减少字符之间的空间。

<style>     h1 {       letter-spacing:2px;}      h2 {        letter-spacing:-3px;}</style>

6.  line-height设置行高

指定在一个段落中行之间的空间。

<html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=640, user-scalable=no">        <title>项目</title>        <style>            p.small {                line-height: 70%;            }
           p.big {                line-height: 200%;            }</style>    </head>
   <body>        <p>            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>        </p>
       <p class="small">            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>        </p>
       <p class="big">            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>        </p>
   </body>
</html>

7.  word-spacing 设置字间距

增加一个段落中的单词之间的空白空间。

<html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=640, user-scalable=no">        <title>项目</title>        <style type="text/css">            p {                word-spacing: 30px;            }</style>    </head>
   <body>
       <p>            This is some text. This is some text.        </p>
   </body>
</html>

8. vertical-align 设置元垂直居中

设置文本的垂直对齐图像。

<html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=640, user-scalable=no">        <title>项目</title>        <style>            img{                width: 200px;                height: 100px;            }            img.top {                vertical-align: text-top;
           }
           img.bottom {                vertical-align: text-bottom;
           }</style>    </head>
   <body>        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>    </body>
</html>

9. text-shadow 设置文本阴影

设置文本阴影。

<html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=640, user-scalable=no">        <title>项目</title>        <style>         h1{            text-shadow: 2px 2px #FF0000;     }</style>    </head>
   <body>    <h1>Text-shadow effect</h1>    </body>
</html>

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作,通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示,能够更直观的看到运行的效果,能够更好的理解。使用Html语言,代码结构更佳的清晰,能够帮助你更好的学习。

声明: 本文由入驻OFweek维科号的作者撰写,观点仅代表作者本人,不代表OFweek立场。如有侵权或其他问题,请联系举报。
侵权投诉

下载OFweek,一手掌握高科技全行业资讯

还不是OFweek会员,马上注册
打开app,查看更多精彩资讯 >
  • 长按识别二维码
  • 进入OFweek阅读全文
长按图片进行保存