CSS与CSS3基础知识(二)——文本外观属性

        希望可以在CSDN与大家一起成长,如有错误请大家多多批评指教!

        CSS 英文全称为Cascading Style Sheet,中文译为“层叠样式表”。CSS以 HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且可以针对不同的浏览器设置不同的样式。在CSS与CSS3基础知识(一)(点击可复习)中学习了字体样式属性,现在一起学习CSS的文本外观属性吧!

1.color:文本颜色

取值方法有三种:预定义的颜色名:如red,green等

                             十六进制,如#ff000等

                              RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0,0),即红,绿,蓝。

2.letter-sapcing:字间距

属性值可以为不同单位的数值,允许使用负值,默认为normal。

3.word-spacing:单词间距

用于定义英文单词之间的间距,对中文字符无效。属性值可以为不同单位的数值,允许使用负值,默认为normal。

4.line-height:行间距

行间距就是行与行之间的距离,即字符的垂直距离

5.text-transform:文本转换

用于控制英文字符的大小写,其属性值如下:

none:不转换

capitalize: 首字母大写

uppercase:全部字符转换为大写

lowercase:全部字符转换为小写

6.text-decoration:文本装饰

用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性值如下:

none:没有装饰

underline:下划线

overline:上划线

line-through:删除线

*如果希望文字同时有下划线和删除线效果,就可以在属性后同时写underline,line-through。

p{text-decoration:underline line-through;}

7.text-align:水平对齐方式

用于设置文本内容的水平对齐,相当于HTML中的align对齐属性,可用属性值如下:

left:左对齐(默认)

right:右对齐

center:居中对齐

8.text-indent:文本缩进

用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比%,允许使用负值。建议使用em作为设置单位。

*text-indent属性仅适用于块级元素,对行内元素无效(块级和行内元素会在之后的博客里进行补充哦)

9.white-space:空白符处理

*在HTML制作网页的时候,无论你写多少个空格,最后浏览器都只显示一个,所有我们需要CSS的white-space设置空白符的处理方式,其属性值如下:

normal:文本中的空格、空行无效,满行后自动换行

pre:预格式化,按文档的书写格式保留空格、空行原样显示

nowrap:空格空行无效,强制文本不能换行,除非遇到换行标签<br/>。*内容超出标签边界也不换行,超出浏览器页面则会自动增加滚动条

10.text-shadow:阴影效果

用于为页面中的文本添加阴影效果,其基本语法格式如下:

选择器{text-shadow:h-shadow(水平阴影距离) v-shadow(垂直阴影距离) blur(模糊半径) color(阴影颜色)}

举个栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影效果</title>
    <style type="text/css">
    .one{
        font-size: 60px;
        text-shadow:10px 5px 10px #6600ff;
    }
    </style>
</head>
<body>
<p class="one">这就是阴影效果</p>
</body>
</html>

****注意:当设置阴影的水平和垂直距离参数均为正值时,阴影的投射方向在右下角。为负值时,在左上角。阴影的模糊半径参数只能是正值,数值越大阴影向外模糊的范围也越大。

11.text-overflow:标示对象内文本的溢出

用于标示对象内文本的溢出,其可用属性值如下:

ellipsis:用省略标签“...”标示被修建文本,省略标签插入的位置是最后一个字符

clip:修建溢出文本,不显示省略标签“....”

猜你喜欢

转载自blog.csdn.net/m0_47228284/article/details/109177964