CSS样式更改——文本Content

简介: CSS样式更改——文本Content

前言


上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法。


文本Content

1).首行缩进文本
<div style='text-indent:2em'></div>  可以设置负数 也可使用百分数 像素

2).文本对齐方式

<div style='text-align:center'></div>left   左边right   右边center  中间justify 两端对齐
3).字间距
<div style='word-spacing:2em'></div> 可以设置负数 也可使用百分数 像素

4).文本间距

<div style='letter-spacing:2em'></div> 可以设置负数 也可使用百分数 像素

5).文本转换

<div style='text-transform:none'></div>none         不转换uppercase    大写lowercase    小写capitalize   首字母大写
6).文本修饰
<div style='text-decoration:none'></div>none          不修饰underline     下划线overline      上划线line-through  中划线blink         文本闪烁
7).文本空白符的处理
<div style='white-space:normal'></div>pre-line 合并空白符序列,但是保留换行符normal   忽略空白符nowrap   文本不会换行,直到<br>出现才换行pre      空白会被浏览器保留pre-wrap 保留空白符序列,但是正常地进行换行
8).文本方向
<div style='direction:ltr'></div>ltr     从左到右rtl     从右到左
9).文本行高
<div style='line-height:2'></div> 可使用百分数 像素

10).文本阴影

<div style='text-shadow:1px 1px 1px red'></div>

11).字符换行

<div style='word-wrap:normal'></div>normal 只在允许的断字点换行break-word 在长单词、URL地址内部进行换行
12).处理溢出文本
<div style='text-overflow:ellipsis'></div>clip           修剪文本ellipsis      省略符号来代表被修剪的文本string        使用给定的字符串来代表被修剪的文本
13).文本轮廓
<div style='text-outline:1px 1px red'></div>

14).文本换行

<div style='text-wrap:none'></div>normal          只在允许的换行点进行换行。none            不换行。元素无法容纳的文本会溢出unrestricted    在任意两个字符间换行。suppress        压缩元素中的换行。浏览器只在行中没有其它有效换行点时进行换行

参考文档:W3C官方文档(CSS篇)


二、总结


这篇文章主要介绍了CSS样式更改篇中的文本Content基本设置,希望让大家对CSS样式更改有个简单的认识和了解。

相关文章
|
1天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
9 1
|
1天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
11 0
|
1天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
13 0
|
1天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
1天前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
|
1天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
1天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 入门:给网页添加样式
【4月更文挑战第30天】CSS是网页设计的关键,用于控制网页样式和布局。它通过选择器(如元素、类和ID)来设定颜色、字体、对齐、背景等属性。CSS可内嵌、外部引用或行内设置。布局技巧包括浮动、定位和弹性盒子。响应式设计利用媒体查询适应不同设备。不断实践和学习CSS,能提升网页的吸引力和用户体验。一起探索CSS的魅力吧!
|
11月前
|
前端开发 JavaScript API
css 里面的 content 属性你有注意过吗?
content 属性是用来在元素中插入内容的,它只能用在 ::before 和 ::after 这两个伪元素上,它的值可以是一个字符串,也可以是一个图片,还可以是一个计数器。
198 0
|
前端开发
CSS Content 属性 新发现
CSS Content 属性 新发现
CSS Content 属性 新发现
|
前端开发
CSS Content 属性妙用
CSS Content 属性妙用,你知道吗?
714 0

热门文章

最新文章