文本属性,css

1、文本属性

    （1）、color 文本颜色，color属性用于指定文本的颜色，有3种表现形式。可用名字，如red，可用十六进制数，如#ff0000表示红色，使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)，CSS3的hsl：使用色相、饱和度、亮度来定义颜色。

详情看

hsl（）函数与hsla（）函数_t1220130004的博客-CSDN博客​​​​​​

h1 {color: red;}

<h1>标题1</h1>

    （2）、text-align 文本对齐方式，text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）。

<style type="text/css">
	h1 {text-align: left;	/*左对齐*/}
	h2 {text-align: center;	/*居中对齐*/}
	h3 {text-align: right; /*右对齐*/}
	p {text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/}
</style>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<p>当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>

 

     （3）、text-decoration 文本修饰，text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

a、none：默认，定义标准的文本，没有任何修饰。

b、underline：定义在文本下方的一条线

c、overline：定义在文本上方的一条线

d、line-through：定义穿过文本的一条线

<style type="text/css">
	h1 {text-decoration: none;}
	h2 {text-decoration: overline;}		
	h3 {text-decoration: line-through;}		
	h4 {text-decoration: underline;}
	h5 {/* 文字闪烁，只在火狐中支持 */
		text-decoration: blink;}
</style>

    （4）、text-transform 文本转换，text-transform用于转换文本的大小写（主要用于英文），其取值有：

1. none：默认

2. capitalize：文本中每个单词以大写字母开头

3. uppercase：所有单词字母都大写

4. lowercase：所有单词字母都小写

 

h1 {text-transform:uppercase;}

<h1>jkkllkjk</h1>

     （5）、text-indent 文本缩进，text-indent 属性规定文本块中首行文本的缩进。取值有：

1. 数值：表示像素值

2. 百分比：基于父元素宽度的百分比的缩进。

• p {
          text-indent:50px;
      }

  

       (6)、text-shadow 文本阴影,

  text-shadow用于设置文本的阴影效果。语法格式是

  text-shadow: h-shadow v-shadow blur color;前两项都是必填项,

• h1 {
  		text-shadow: 2px 2px #FF0000;
  	}	

  

       (7)direction 文本方向,

  direction 用于指定文本的方向。取值如下：   

1.  ltr：默认的，文本方向从左到右 left to righ

2.  rtl：文本方向从右到左。right to left

3. <!-- 简单的右对齐,其实这是direction的默认效果,文字不会倒着写 -->
   <div style="direction:rtl;">this is a test</div>

   

         (8)letter-spacing 字符间距,letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字

•         (9)word-spacing 字间距,word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落

• <p style="letter-spacing: 5px;">空间可怜见军火库军火库尽快结婚打算多少就回家看了回家看了</p>
  <p style="word-spacing:10px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptates aut suscipit, vitae consequuntur libero obcaecati atque sit veritatis, voluptatum et officia. Impedit est expedita porro sed, adipisci cupiditate fuga.</p>
  

  

   

  (10) line-height 行高,line-height 用于设置文字行与文字行之间的距离。取值如下：

• number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

• length：设置固定的行间距 px em 。

• %：基于当前字体尺寸的百分比行间距。

  (11) word-break,规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

  值	描述
  normal	使用浏览器默认的换行规则。
  break-all	允许在单词内换行。
  keep-all	保持同行显示，不是中文日语其实和normal一样