Web前端新人笔记之文本属性 - 来治猩猩的我-htmlチュートリアル-php.cn

Web前端新人笔记之文本属性 - 来治猩猩的我

WBOY

リリース： 2016-05-20 13:49:18

オリジナル

1268 人が閲覧しました

<span style="font-family: Microsoft YaHei; font-size: 15px;">前一段时间因工作时间减缓了更新笔记的时间。我也不知道有没有会观看并且能不能帮到一些初学者，这只是我的一些小随笔而已。<br>当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们，更希望你们也可以从中体会到、领悟到一些新的知识作为积累并加以巩固。<br>像我一样写下自己每时每刻的成长记录。</span>

ログイン後にコピー

文本属性

<span style="font-size: 16px;"><strong><span style="font-family: Microsoft YaHei;">文本缩进<br></span></strong></span><span style="font-family: Microsoft YaHei; font-size: 15px;">　　将Web页面上的一个段落第一行缩进，这是一种最常用的文本格式化效果。有的网站在段落的第一个字母前放一个很小的透明图像，这些图像将文本推到后面来制造一种缩进文本的感觉。另外一些网站则使用完全标准的空格(spacer)标记。而在CSS中有一种更好地方法实现文本缩进。那就是text-indent属性。<br><img src="http://images2015.cnblogs.com/blog/707288/201605/707288-20160503090414185-958006375.png" alt=""><br>通过使用text-indent属性，所有元素的第一行都可以缩进一个给定长度，甚至该长度可以是负值。<br></span>

ログイン後にコピー

<span style="color: #008000;">/*</span><span style="color: #008000;">
*    text-indent的单位是em
</span><span style="color: #008000;">*/</span><span style="color: #000000;">
p{
      text</span>-<span style="color: #000000;">indent：3em;  
 }<br><span style="color: #000000;"><br>p{<br>      text-<span style="color: #000000;">indent：-3em;
 }<br>/*<br>*　　用百分比实现文本缩进<br>*/<br>p{<br>　　　　text-indent:3%;<br>}</span></span></span>

ログイン後にコピー

<span style="font-size: 16px;"><strong> 水平对齐<br></strong>　　　<span style="font-size: 15px;">与</span><span style="font-size: 15px;">text-indent相比，text-align是一个更基本的属性，它会影响一个元素中的文本行相互之间的对齐方式。。<br><img src="http://images2015.cnblogs.com/blog/707288/201605/707288-20160503091608607-581686070.png" alt=""><br><strong><span   style="max-width:90%">注意</span></strong>：将块级元素或表元素居中，这要通过在这些元素上适当地设置左、右外边距来实现。<br><strong><span style="font-size: 16px;">行高<br></span></strong><span style="font-size: 15px;">　　line-height属性是指文本行基线之间的距离，而不是字体的大小。它确定了将各个元素框的高度增加或者减少。<br><img src="http://images2015.cnblogs.com/blog/707288/201605/707288-20160503092130404-203272595.png" alt=""></span></span></span>

ログイン後にコピー

垂直对齐文本

　　在CSS中，vertical-algin属性只应用于行内元素和替换元素。表单输入元素和图像，verticl-align属性不能继承。

　　文本转换

　　默认值none对文本不做任何改动，将使用源文档中原有的大小写。顾名思义，uppercase和lowercase将文本转化为全大写或全小写字符。

　　capitalize只对每个单词的首个字母大写。

　　文本装饰

　　underline会对元素加下划线；

　　overline会在元素顶端加上划线；

　　line-through则在文本中间画一个贯穿线。等价于HTML中的S和Strike；

　　blink会让文本闪烁；

　　文本阴影

<span style="color: #008000;">/*</span><span style="color: #008000;">
*  要定义一个相对于文本向右移5像素向下偏移0.5的绿色阴影，而且不模糊可以写作       
</span><span style="color: #008000;">*/</span><span style="color: #000000;">
p{
     text</span>-shadow: green 50x <span style="color: #800080;">0</span><span style="color: #000000;">.5em;
   }</span>

ログイン後にコピー

　　处理空白符