您现在的位置是:首页 > 正文

CSS文本外观属性有哪些,CSS文本外观属性(样式及应用)

2024-02-29 10:54:20阅读 1

color:文本颜色

color属性用于定义文本的颜色,其取值方式有如下3种:

预定义的颜色值,如red,green,blue等。

十六进制,如#ff0000,#ff6600等,实际工作中,十六进制是最常用的定义颜色的方式。

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

需要注意的是,如果使用RGB代码的百分比颜色值,取值0时也不能省略百分号,必须写为0%。

line-height:行间距

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

一般情况下,行距比字号大7.8像素左右就可以了

text-align:水平对齐方式

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

left:左对齐(默认值)

right:右对齐

center:居中对齐

示例h3{

text-align:center;/*文字水平对齐*/

}

text-indent:首行缩进

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

示例p{

line-height:26px;/*行间距*/

text-indent:2em;/*就是两个汉字的宽度*/

}

letter-spacing:字间距

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

word-spacing:单词间距

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

word-spacing和letter-spacing均可对英文进行设置,不同的是letter-spacing定义为字母之间的间距,而word-spacing定义为英文单词之间的间距。

word-break:自动换行

normal 使用浏览器默认的换行规则

break-all 允许在单词内执行换行

keep-all 只能自半角空格或连字符处换行。

text-overflow:文字溢出

示例#MyDIV

{

overflow:hidden;

text-overflow: clip;/*超出的文本直接修剪*/

text-overflow:ellipsis;/*超出的文本变成省略号代替*/

}

颜色半透明(CSS3

文字颜色到了css3我们可以财局半透明的格式,语法格式如下:

color:rgba(r,g,b,a)

a是alpha 透明的意思 取值范围是0-1之间。

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

前两项是必填项,后两项选填。

示例:h1{

font-size:100px;

text-shadow:1px 2px 3px rgba(0,0,0,0.5);

}

网站文章

  • 鸿蒙os移植手表手环,华为EMUI 11提前泄密,这三点将大幅提升,鸿蒙OS 2.0同步亮相...

    鸿蒙os移植手表手环,华为EMUI 11提前泄密,这三点将大幅提升,鸿蒙OS 2.0同步亮相...

    华为MATE 40系列是下半年最值得期待的手机之一,目前这款手机的各种消息也是被频繁爆料。关于MATE 40系列的外观部分基本上曝的差不多了,还有很多细节配置一直都处于保密当中。除了MATE 40系列...

    2024-02-29 10:54:12
  • ArrayList什么情况会抛出ConcurrentModificationException

    ArrayList什么情况会抛出ConcurrentModificationException

    背景 近日,在看ArrayList的源码实现,发现很多情况会抛出ConcurrentModificationException。下面总结一下大致发生的情况。 首先,ArrayList不是线程安全的。 首先来看一个例子: public static void main(String[] args){ List aList = new ArrayList(); aList.add(1); aList.

    2024-02-29 10:53:23
  • Flink中Time&Window

    Flink中Time&Window

    Time 更多代码案例可参考:https://github.com/perkinls/flink-local-train Fink支持的Time类型 Flink在流式传输程序中支持不同的时间概念。 处...

    2024-02-29 10:53:18
  • java类 对象 接口_java – 实现接口时的对象类型

    以下是我的代码……它没那么复杂.在这里,我想要理解,在类D中,b是一个接口类型变量,在该变量中,我们存储对实现该接口(B)的类(C)的新对象的引用.我们如何能够将类型C的对象分配给接口B类型变量b ....

    2024-02-29 10:53:10
  • 自动方向识别式 TXB型电平转换芯片

    自动方向识别式 TXB型电平转换芯片

    如果没有这个NE SHOT电路,直接使用4KΩ电阻,那么在电平变化时,对负载管脚电容充电的电流为VCCB/4KΩ,这个电流很小,那么上升沿和下降沿会非常缓,导致器件无法工作在高速的场合。具体分析见下图...

    2024-02-29 10:52:40
  • vscode 启动项目报错“C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run serve”

    vscode 启动项目报错“C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run serve”

    问题今天启动新项目,使用npm run serve时,vscode报错,如下:> Executing task: npm run serve <npm : 无法加载文件 C:\Program File...

    2024-02-29 10:52:32
  • Shell开发脚本 通过SFTP 定时 上传文件

    Shell开发脚本 通过SFTP 定时 上传文件

    【背景】与三方公司对接,有数据传输需求,数据传到对方的服务器,对方提供的传输方式是SFTP。【思路】数据来自于ORACLE,项目先提供在服务器上使用sqluldr2来操作【数据导出】工作,之前的博客有...

    2024-02-29 10:52:25
  • 小程序自动顺位标记排序实现逻辑

    小程序自动顺位标记排序实现逻辑

    // 商品点击排序 shareGoods(e) { var goodsId = http.dataIndex(e)[1];//获取当前点击的商品ID let sortNumArr = this.data.sortNumArr;//获取储存的数组 let chearNear = 0;//是否查询到的自定义标记 let chear...

    2024-02-29 10:51:57
  • k8s集群监控

    k8s集群监控

    Prometheus:开源的,提供监控、报警、数据库,以HTTP方式周期性抓取被监控组件状态,不需要复杂的集成过程,使用http接口接入就行。Grafana:开源的,用于做数据分析和可视化的工具。

    2024-02-29 10:51:47
  • Weblogic命令停止部署应用的方法

    weblogic控制台用命令启动暂停和部署应用程序

    2024-02-29 10:51:41