css教程
首页 html教程 css教程 关于
接着,我们开始学习css的文本设置

文字颜色

文字颜色的设置比背景设置还简单:color:red;
颜色的格式和背景颜色的格式是一样的,这里就不再赘述了

文本对齐方式

众所周知,文本对齐方式一般有三种:居左、居中和居右
设置的方法很简单:text-align:left/*center,right*/;
为什么我说是一般呢?因为强大的css中还有一种:两端对齐!
值为justify
听起来不是很好理解,我们来举一个例子:
在css中写上:
.text{
    text-align:justify;
    width:150px;/*你先不用理解这句话,这句话是为了让你看到效果的,意思是把宽度设为150像素*/
}
在html里写上: < p class="text">hello world!I am studying css.< /p>
运行的结果是:

hello world!I am studying css.


其实就是有一部分居左,有一部分居右,剩下的居中

文本修饰

其实没啥,就是上划线、下划线和删除线
格式就是:text-decoration:none/*overline,line-through,underline*/
这个功能的其中一个作用就是可以删除链接讨厌的下划线

大小写转换

如果你希望让一个文本全部大写或者全部小写,你不需要人工调整,你只需要请出css来帮你就可以了
格式就是:text-transform:capitalize/*让每个单词首字母大写*//*uppercase,lowercase*/

字体

大家有没有发现我在编写网页时,html和css的代码字体好像和其他的不一样?
这是怎么做到的?
很简单,只需要在css中输入:font-family: xxx,在冒号后输入你想要的字体
如果你想要的字体是多个单词(或汉字),那么你需要使用双引号,比如:font-family:"宋体"

文字大小

这个非常简单,直接使用font-size:...;
冒号后是你的字体大小,一般采用像素(px)作为单位
当然,如果你非常需要让其他人可以再IE上正常显示你的网页你可能疯了,因为我觉得使用IE的人也疯了,那你可以使用em,他们的换算关系是:16px=1em,下文为了简便,把像素和em直接简写成了像素

字体粗细

如果你需要设置特定粗细的字体,那你可以使用这个声明:font-weight:... 值有两种,一种是数字,一种是css给定的数值(用字母表示)
数字的单位是啥我也不知道,所以就慢慢试吧,我只知道400是正常的,700是粗体的
css给定的有:normal(正常),bold(加粗),bolder(再加粗),lighter(加细)

文本缩进

没啥好说的,就是text-indent:...,在引号后填写你需要的缩进长度,一般使用像素作为单位

字符间距

使用letter-spacing:...能够调整字符的间距
默认值为0,值可以是正的也可以是负的,单位一般使用像素

单词间距

讲完了字符间距,我们来说说单词间距
代码很简单:word-spacing:...
默认值是0,值可以是正的也可以是负的,单位一般使用像素

调整行间距

既然字符和单词的间距可以调了,那行间距可以调吗?
当然可以!只需要输入line-height:x%
这个行间距有点难调,因为它的默认值一般在110%到120%之间,不同浏览器稍有不同,所以还不如不用

文本方向

其实没啥用,我不知道和居左居右有啥差别,就告诉大家代码吧:direction: rtl/*默认是从左到右:ltr*/

禁用文字环绕

你是不是见过有些人使用LaTeX超出了网页的范围?
其实不需要LaTeX,正常的文本也能实现!
只需要在css中加上:white-space:nowrap;就可以了
其实它的真正意思是取消文字环绕,所以会有这样的结果
咦?这个英文单词好神奇,叫做现在说唱(now rap)!
别乱讲!那是"no wrap"!

文字阴影

在word等编辑文档的工具中,都有添加文字阴影这一个选项,html其实也有,只需要使用:text-shadow:r d c;
在代码中,r表示向右多少,d表示向下多少,c表示阴影的颜色
一般来说,r和d使用像素作为单位,且一般是2px

font属性的简写

如果你是一个懒人,你可以写成:font:font-style font-variant font-weight font-size/line-height font-family
冒号后的都是具体的值而不是我写的名称