ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5+CSS网页设计——文本外观属性

2022-01-23 13:02:54  阅读:101  来源: 互联网

标签:网页 设置 text HTML5 测试 Test 文本 CSS 属性


1.color:

color属性用于定义文本的颜色,其取值方式有如下3种:预定义的颜色值,如red , green , blue等。
十六进制,如#FF0000 ,#FF6600 , #29D794等·实际工作中,十六进制是最常用的定义颜色的方式。
.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>

<body>
    <p >测试文本1</p>
</body>
</html>

效果:

2.letter-spacing:

letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白
 letter-spacing属性,其属性值可为不同单位的数值,允许使用负值,默认为normal ,常用单位px;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        p{
            letter-spacing: 20px;
        }
    </style>
</head>

<body>
    <p >测试文本1</p>
</body>
</html>

效果:

3.word-spacing:

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        p{
            word-spacing: 20px;
        }
    </style>
</head>

<body>
    <p >abc defg</p>
</body>
</html>

效果:

4.line-height:

line-height属性用于设置行间距,所谓行间距就是行与行之间的距离,即字符的垂直间距,一般称为行高。
i line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        p{
            line-height: 50px
        }
    </style>
</head>

<body>
    <p >测试文本1</p>
    <p >测试文本2</p>
</body>
</html>

效果:

5.text-align :

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

left :左对齐(默认值)

right :右对齐
center :居中对齐

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .left{
            text-align:left;/*设置文本右对齐*/
        }
        .center{
            text-align:center;/*设置文本居中*/
        }.right{
            text-align:right;/*设置文本左对齐*/
        }
        
    </style>
</head>

<body>
    <p class="left">左对齐测试文本1</p>
    <p class="center">居中测试文本2</p>
    <p class="right" >右对齐测试文本3</p>
</body>
</html>

效果:

6.text-transform:

属性用于控制英文字符的大小写。
其可用属性值如下:
none :不转换(默认值)。
capitalize :首字母大写。
uppercase:全部字符转换为大写。

lowercase :全部字符转换为小写。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            text-transform:none;/*不转换*/
        }
        .two{
            text-transform:capitalize;/*设置首字母大写*/
        }.three{
            text-transform:uppercase;/*设置全部大写*/
        }
        .four{
            text-transform:lowercase;/*设置全部小写*/
        }
        
    </style>
</head>

<body>
    <p class="one">abcdefg</p>
    <p class="two">abccdefg</p>
    <p class="three">abcdefg</p>
    <p class="four">ABCCDEFG</p>
</body>
</html>

效果:

7.text-decoration

属性用于设置文本的下划线,上划线,删除线等装饰效果。
其可用属性值如下:
none :没有装饰(正常文本默认值)。

underline :下划线。
overline : 上划线。

line-through :删除线。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            text-decoration: none/*没有修饰*/
        }
        .two{
            text-decoration:underline/*设置下划线*/
        }.three{
            text-decoration:overline/*设置上划线*/
        }
        .four{
            text-decoration:line-through/*设置删除线*/
        }
        
    </style>
</head>

<body>
    <p class="one">测试文本1</p>
    <p class="two">测试文本2</p>
    <p class="three">测试文本3</p>
    <p class="four">测试文本4</p>
</body>
</html>

效果:

 8.text-indent

属性用于设置首行文本的缩进。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            text-indent: 0em
        }
        .two{
            text-indent: 2em;/*缩进2个字符单位*/
        }
        
    </style>
</head>

<body>
    <p class="one">测试文本。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
    <p class="two">测试文本。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
    
</body>
</html>

效果:

 9.white-space

属性可设置空白符的处理方式。
其属性值如下:
normal:常规(默认值),文本中的空格﹑空行无效,满行(到达区域边界)后自动换行
pre :预格式化,按文档的书写格式保留空格﹑空行原样显示。
nowrap:空格空行无效,强制文本不能换行,除非遇到换行标签<br />。内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            white-space: normal/*常规显示*/
        }
        .two{
            white-space: pre/*保留空格﹑空行原样显示。*/
        }
        .three{
            white-space: nowrap/*空格空行无效,强制文本不能换行*/
        }
        
    </style>
</head>

<body>
    <p class="one">测试文本1。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
    <p class="two">测试文本2。。。。。。。。      。。。。。。。。。。   。。。。。。。。。。
        。。。。。。。。。。。。。。。</p>
    <p class="three">测试文本3。。。。。。       。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
        。。。。。。。。</p>
    
</body>
</html>

效果:

 10.text-shadow

属性可以为页面中的文本添加阴影效果。
h-shadow用于设置水平阴影的距离

 v-shadow用于设置垂直阴影的距离,

blur用于设置模糊半径,

color 用于设置阴影颜色。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{
            text-shadow: 20px 20px 20px blue;
        }
            
    </style>
</head>

<body>
    <p class="one">测试文本1</p>    
</body>
</html>

效果:

11. text-overflow

属性用于处理溢出的文本。
clip:修剪溢出文本,不显示省略标签“..."。
 ellipsis:用省略标签“..."替代被修剪文本,省略标签插入的位置是最后一个字符。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
    <style>
        .one{            
            text-overflow:clip
        }
        .two{            
            text-overflow: ellipsis
        }
        
        
    </style>
</head>

<body>
    <em class="one">测试文本1。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</em>
    <em class="two">测试文本2。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</em>
    
    
</body>
</html>

效果:

 

标签:网页,设置,text,HTML5,测试,Test,文本,CSS,属性
来源: https://blog.csdn.net/shengming_tutou/article/details/122645823

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有