css Text之文本属性的用法笔记

原创 PHP笔记  2017-03-23 17:08  阅读 933 views 次

通过文本的css样式属性,我们可以控制文本的表现,比如我们可以改变文本的颜色、对齐文本、字符间距、缩进等等。

文本的样式属性

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

格式:

选择器{
属性:属性值;
}

1、文本颜色color

文本的颜色是用color样式属性来设置的,属性的属性值为颜色值/颜色的名称/RGB值。

实例:

......
<body>
<style type="text/css">
h1{
color:#EE6AA7;
}
p{
color:#9932CC;
}
</style>
<h1 id="i">我是标题</h1>
<p>我是段落</p>
</body>
......

运行结果:

2、文本方向direction

direction 属性规定文本的方向(书写方向)。

实例:

......
<body>
<style type="text/css">
#d{
width:300px;
height:200px;
border:1px solid red;
}
h1{
color:#EE6AA7;
direction:rtl; //文本方向从右到左
}
p{
color:#9932CC;
}
</style>
<div id="d">
<h1 id="i">我是标题</h1>
<p>我是段落</p>
</div>
</body>
......

运行结果:

3、字符间距letter-spacing

letter-spacing 属性增加或减少字符间的空白(字符间距)。

实例:

......

<body>
<style type="text/css">
#d{
width:300px;
height:200px;
border:1px solid red;
}
h1{
letter-spacing:15px
}
p{
letter-spacing:-3px
}
</style>
<div id="d">
<h1 id="i">我是标题</h1>
<p>我是段落</p>
</div>
</body>

......

运行结果:

本文地址:https://www.ggbiji.com/css-text.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情