欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-25 12:01:15
Hello,大家好呀,老规矩我来介绍一下自己,我本科是某双非学校的电子商务专业,现在某985学校的电子信息专业的研究生,跨考让我对很多知识都不能熟练运用,希望可以在CSDN与大家一起成长,如有错误请大家多多批评指教! CSS 英文全称为Cascading Style Sheet,中文译为“层叠样式表”。CSS以 HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且可以针对不同的浏览器设置不同的样式。在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>

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

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

 

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

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

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

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

本文地址:https://blog.csdn.net/m0_47228284/article/details/109177964