文本属性
时间:2022-06-08
本文章向大家介绍文本属性,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文本格式化属性
3.字体样式 <i></i>
1.属性
font-style:
2.取值
1.normal(默认的) 正常显示
2.italic 斜体
<style>p{
font-style: italic;
/*font-style默认、;normal(正常显示无特殊作用)*/
}
p{
font-style: normal;
}
</style>
斜体样式:<p>这段文字用css展现斜体。hello,html!</p>
正常显示:<div>这是段正常显示的字体</div>
文本属性
1.文本颜色
color:颜色值;
p{
color: pink;
}
</style>
</head>
<body>
文本颜色:<p>这段文字颜色会变成骚粉色!</p>
</body>
2.文本的排列
text-align:水平对齐方式
取值
left/center/right
<style>
.p1{
text-align: center;
}
.p2{
text-align: right;
}
.p3{
text-align: left;
}
</style>
3.文本的修饰(a u s)
text-decoration:值;
取值
none 代表没有修饰线
underline 下划线
overline 上划线
line-through 删除线
#p1{
text-decoration:none;/*正常显示*/
}
#p2{
text-decoration:underline;/*underline下划线*/
}
#p3{
text-decoration: overline;/*overline上划线*/
}
#p4{
text-decoration: line-through; /*line-through删除线*/
}
正常显示 <p id="p1">正常显示的文字</p>
下划线<p id="p2">这是展示下划线</p>
上划线 <p id="p3">这是展示上划线</p>
删除线 <p id="p4">这是展示删除线</p>
4.首行缩进
text-indent:2em;
#p5{
text-indent:2em;/*空出2个字体空间*/
}
5.文本阴影
box-shadow:0 0 blur color;
text-shadow:0 0 blur color;
#p6{
text-align: center;
font-size: 30px;
text-shadow:1px 1px 1px red;
/*文本阴影。表示 水平阴影 垂直阴影 模糊距离 模糊颜色*/
}
注意:text-shadow(文本阴影):第一个值表示水平阴影 第二个垂直 第三模糊距离第四个模糊像素
常用取值:0 0 模糊距离 模糊颜色。
取值情况。水平大于0右偏移,垂直大于0向下偏移,负值相反!
6.行高
line-height:值;
当行高和块元素的高度一致的时候,
文字垂直居中
div{
width:800px;
height:320px;
background-color: orange;
border: 1px solid purple;
line-height:320px;/*当行高和元素块的高一致时,元素内文字将居中显示
其他的将会显示在元素块之外。line-height的取值表示在元素块一个宽度满之后,换行后与前一行的距离*/
}
行高和元素块一致的结果图像
行高的作用效果:
- 介绍几个好用的android自定义控件
- T-SQL—理解CTEs
- SQL 扩展事件
- ShapeDrawable做放大镜效果
- android放大镜效果实现
- Android StringEntity() 和 UrlEncodedFormEntity() 的区别
- 如何根据日志查看删除的数据(转译)
- 具体问题解决:分离脚本
- 独家 | 手把手教你用Python 3创建用于机器学习开发的Linux虚拟机(附安装教程、代码)
- TSQL--临时表和表变量
- 微软开源 C++ REST SDK
- 使用Autofac在ASP.NET Web API上实现依赖注入
- Universal-Image-Loader完全解析--从源代码分析Universal-Image-Loader中的线程池
- 我是怎样爬下6万共享单车数据并进行分析的(附代码)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 短视频APP制作,设置高斯模糊
- 使用 Sunny-Ngrok 将内网程序发布到外网
- Leetcode 17. 电话号码的字母组合 (dfs)
- Java实现md5和base64加密解密的示例代码
- Spring 基于 XML 的 AOP
- SpringBoot 集成 Apache Camel FTP 实现文件同步
- Spring 基于 XML 的 IOC
- 初识 Spring
- Leetcode 55. 跳跃游戏 (贪心)
- SpringBoot 报 No operations allowed after connection closed 异常解决办法
- Leetcode 15 三数之和(双指针,去重)
- 洛谷 P1886 滑动窗口 /【模板】单调队列 (单调队列、线段树、RMQ(ST表))
- SpringBoot 整合 JMSTemplate
- Leetcode 3. 无重复字符的最长子串 (滑动窗口+HashMap)
- MQ 系列之 JMSTemplate