云社区 博客 博客详情

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

CSDN 发表于 2020-10-24 22:44:18 2020-10-24
0
0

【摘要】         希望可以在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:空格空行无效,强制文本不能换行,除非遇到换行标签
。*内容超出标签边界也不换行,超出浏览器页面则会自动增加滚动条

10.text-shadow:阴影效果

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

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

举个栗子:


  
  
  1. html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>阴影效果 title>
  6. <style type="text/css">
  7. .one{
  8. font-size: 60px;
  9. text-shadow: 10px 5px 10px #6600ff;
  10. }
  11. style>
  12. head>
  13. <body>
  14. <p class="one">这就是阴影效果 p>
  15. body>
  16. html>

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

 

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

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

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

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

文章来源: blog.csdn.net,作者:不加防腐剂,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/m0_47228284/article/details/109177964

登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:VsCode自定义Markdown片段生成,矩阵、字体颜色等

下一篇:Ajax的面向对象的封装(ES5和ES6)ajax+php

评论 (0)


登录后可评论,请 登录注册

评论