文本样式text

text-transform 可以用来设置文本的大小写

可选值:

1、none 文本正常显示 (默认值)

2、capitalize设置单词首字母大写

3、uppercase 设置单词大写

4、lowercase 设置单词小写

text-decoration可以用来设置文本的样式

可选值

1、none 文本正常显示 默认值

2、underline 文本添加下划线

3、overline 文本添加上划线

4、line-through 删除线

letter-spacing可以指定字符间距

可选值:

1、px

word-spacing可以设置单词之间的间距

可选值:

1、px

text-align文本对齐方式

可选值

1、left文本左对齐

2、right文本右对齐

3、center文本居中对齐

4、justify俩端对齐

注意:设置前确保有设置的空间

text-indent设置首行缩进

直接设置长度单位 px em rem;

text-overflow设置文本溢出包含元素发生的事件

white-space设置单行文本省略号(得有宽度)

设置文本的单行省略步骤:

1、width:200px;设置固定宽度

2、white-space:nowrap;设置文本不换行

3、overflow:hidden;裁剪多余文本

4、text-overflow:ellipsis;多余文本以省略号显示

text-shadow设置文本阴影

text-shadow:h-shaodw v-shadow blur color;

(参数之间以空格隔开)

参数:

1、h-shadow:设置阴影的水平位移距离(正值向右,负值向左)(必须填写)

2、v-shadow:设置阴影的垂直位移距离(正值向下,负值向上)(必须填写)

3、blur:设置阴影的模糊半径;(值越大阴影越模糊)(是可选值 ,如果不写 默认是0px)

4、color:设置阴影颜色;(一般用rgba形式, 可以设置透明度。)(是可选值,如果不写,默认是字体颜色)

在 HTML 中设置文本样式主要有以下几种常见方法: ### 使用内联样式 内联样式是直接在 HTML 标签中使用 `style` 属性来设置文本样式。这种方式简单直接,但不利于样式的复用和维护。 ```html <p style="font-family: '黑体'; color: blue; font-size: 18px;">这是使用内联样式设置的文本</p> ``` ### 使用内部样式表 内部样式表是在 HTML 文件的 `<head>` 标签中使用 `<style>` 标签来定义样式。这种方式可以对多个元素应用相同的样式,提高了样式的复用性。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <style> p { font-family: "华为彩云"; color: green; font-size: 20px; } </style> </head> <body> <p>这是使用内部样式表设置的文本</p> </body> </html> ``` ### 使用外部样式表 外部样式表是将样式代码写在一个独立的 `.css` 文件中,然后在 HTML 文件中使用 `<link>` 标签引入。这种方式可以使 HTML 文件和样式文件分离,便于维护和管理。 **style.css 文件** ```css p { font-family: Arial, sans-serif; color: red; font-size: 16px; } ``` **HTML 文件** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部样式表示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>这是使用外部样式表设置的文本</p> </body> </html> ``` ### 设置特定文本样式属性 可以通过设置不同的 CSS 属性来改变文本样式,例如字体、颜色、大小、对齐方式等。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>设置文本样式属性</title> <style> #myText { font-family: "黑体"; /* 设置字体 */ color: purple; /* 设置颜色 */ font-size: 22px; /* 设置字体大小 */ text-align: center; /* 设置文本对齐方式 */ font-weight: bold; /* 设置字体粗细 */ text-decoration: underline; /* 设置文本装饰 */ } </style> </head> <body> <p id="myText">这是设置了多种样式属性的文本</p> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值