CSS-文本样式的控制

最新推荐文章于 2023-11-16 13:36:27 发布
最新推荐文章于 2023-11-16 13:36:27 发布
阅读量248 收藏 1
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57149894/article/details/115740169
版权

这里写目录标题

一、背景属性(background-color)

CSS中的background-color属性，用于设置某个元素的背景。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style type="text/css">
		body
		{
			background-color: yellow;
		}
	</style>
	</head>
	<body>
			这个网页背景色为黄色
	</body>
</html>

在这里插入图片描述

二、颜色属性(color)

CSS中的color属性，用于设置某个元素的文本(字体)颜色。

在这里插入图片描述

三、排列属性(text-align)

文本的排列属性是用来设置文本的水平对齐方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#body
			{
				margin: 0 auto;
				width: 80%;
				background-color: beige;
			}
			h1
			{
				text-align: center;  //文本居中
			}
			#yi
			{
				text-align: right;   //文本右对齐
			}
			#er
			{
				background-color: antiquewhite;
				width: 50%;
				height: 80%;
				margin: 0 auto;
				text-align: justify;	//文本两端对齐
			}
			#san
			{
				text-align: left;     //文本左对齐
			}
		</style>
	</head>
	<body>
		<div id="body">
			<h1>今日比赛</h1>
			<div id="yi">
				北京时间4月18日
			</div>
			<div id="er">
				库里轰下47分7篮板，并命中11记三分球，连续10场比赛得分30+，
				追平2012年的科比，在历史上33岁或以上球员中并列第一。末节，
				库里扭伤脚踝吃止疼药坚持作战。
			</div>
			<div id="san">
				(腾讯体育)
			</div>
		</div>
		
	</body>
</html>

在这里插入图片描述

当text-align设置为“justify”，每一行被展开为宽度相等，左右外边距是对齐。

四、文本修饰(text-decoration)

主要有text-decoration:none;  text-decoration:overline;  text-decoration:line-through;  text-decoration:underline

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			a
			{
				text-decoration: none; //去掉了链接的下划线
			}
			#yi
			{
				text-decoration: overline; //在文字加上划线
			}
			#er
			{
				text-decoration: line-through; //在文字加删除线
			}
			#san
			{
				text-decoration: underline; //在文字加下划线
			}
		</style>
	</head>
	<body>
			<p><a href="#">我是链接</a></p>
			<p id="yi">我是文字一</p>
			<p id="er">我是文字二</p>
			<p id="san">我是文字三</p>
	</body>
</html>

在这里插入图片描述

五、文本转换(text-transform)

主要是文本中的字母大小写转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#yi
			{
				text-transform: uppercase;	//所有字母转化为大写
			}
			#er
			{
				text-transform: lowercase;	//所有字母转化为小写
			}
			#san
			{
				text-transform: capitalize;   //所有字母的首字母转化为大写
			}
		</style>
	</head>
	<body>
			<p id="yi">yellow one mountain</p>
			<p id="er">YELLOW ONE MOUNTAIN</p>
			<p id="san">yellow one mountain</p>
	</body>
</html>

在这里插入图片描述

六、文本缩进(text-indent)

指定文本的第一行的缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#yi
			{
				width: 80%;
				margin: 0 auto;
				background-color: antiquewhite;
				text-indent: 2rem;	//首行缩进
			}
			
		</style>
	</head>
	<body>
			<p id="yi">北京时间4月17日，ESPN记者Rachel Richols
			对斯蒂芬-库里进行了专访。在谈到续约问题时，库里表示他
			会优先考虑留在勇士。库里暗示他想要成为科比、诺维茨基那样的球员。
			库里说道：“一直留在一支球队，这是我优先考虑的事情。你
			可以看看像德克（诺维茨基）、科比（布莱恩特）这样的家伙，
			我曾和他们对抗过，外界对他们的评价很高。他们对自己的球队表示出了一种敬意。
			
			“你永远不知道未来会发生什么。但我感觉，对我来说那意味着很多。
			当然，你也希望保持竞争力，想要待在你曾夺得总冠军的球队。如果
			我二者可以兼得的话，那就是我的最终目标了。”
			</p>

			
	</body>
</html>

在这里插入图片描述

七、文本字体系列属性(font-family)

八、文本字体大小属性(font-size)

九、文本字体粗细属性(font-weight)

十、文本字体样式属性(font-style)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.normal
			{
				font-style: normal; //正常显示文本
			}
			.italic
			{
				font-style: italic; //斜体
			}
			.oblique
			{
				font-style: oblique; //倾斜的文字-文字向一边倾斜(和斜体类似)
			}
		</style>
	</head>
	<body>
		<p class="normal">我是正常字体</p>
		<p class="italic">我是斜体</p>
		<p class="oblique">我也是斜体，但一般不支持这种写法</p>
	</body>
</html>

十一、行高属性(line-height)

用于指定文本中一行的高度，常用百分比的值来设置，如：
`line-height:150%`,表示文本行间距为当前字符尺寸的1.5倍
childhood,
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Css样式--文本样式详解
09-25
本样式包括所谓的文本缩进：text-indent、水平对齐：text-align:center;left;right、字间隔和字母间距、字符转换：text-transform等等，在本文将为大家详细介绍下，感兴趣的朋友可以参考下
CSS--文本溢出完美样式
02-25
在网页设计中，CSS（Cascading Style Sheets）起着至关重要的作用，它允许我们对网页的布局和样式进行精细控制。"CSS--文本溢出完美样式"这一主题聚焦于解决一个常见的问题：当文本内容过多，超出其容器的边界时，...
CSS控制文本样式
qq_54282411的博客
06-17 712
1. CSS字体样式属性 （1） font-size：字号大小 font-size属性用于设置字号，属性值可以使用相对长度单位和绝对长度单位。 CSS长度单位 相对长度单位 说明 em 相对于当前对象内文本的字体尺寸 px 像素（常用） 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 例如： p{font-size:12px;} （2）font-family：字体 font-family属性可以同时指定多个字体，中间用逗号隔开。如果
CSS基础知识介绍——通过CSS控制文本样式
qq_37196494的博客
07-18 155
定义文字颜色 通过CSS设置字体：font-family、font-variant font-family、font-size、font-variant（设置字体的变形）、font-weight、font-style 3.字体粗细与斜体：font-weight、font-style font-weight设置字体粗细样式的参数说明表 参数 说明 Bol...
CSS Text文本格式
weixin_30306905的博客
06-05 109
Text Color 颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定： 十六进制值 - 如"＃FF0000" 一个RGB值 - "RGB（255,0,0）" 颜色的名称 - 如"红" 参阅CSS 颜色值查看完整的颜色值。 一个网页的背景颜色是指在主体内的选择： 实例 body {color:blue;}h1 {color:#00ff00;}h2 {c...
css文本控制
TRAMP～
03-08 774
越界省略号 .text-overflow {    display:block;/*内联对象需加*/    width:31em;    word-break:keep-all;/* 不换行 */    white-space:nowrap;/* 不换行 */    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */    text-overflow:e
头歌教学实践平台 Web前端开发基础 CSS-文本与字体样式
最新发布
01-20
在Web前端开发中，CSS...通过学习和实践这些CSS文本与字体样式，你可以创建更加精致且适应性强的网页。头歌教学实践平台提供的源码txt格式资料，将帮助你更好地理解和应用这些知识点，进一步提升你的Web前端开发技能。
tailwindcss-typography:Tailwind CSS插件生成排版工具和文本样式组件
05-02
如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-typography@2.x ）。 安装 npm install tailwindcss-typography 用法 // tailwind.config.js module . exports =...
css文字控制与css文本样式示例和属性
09-25
主要介绍了css文字控制与css文本样式示例和属性,需要的朋友可以参考下
css_控制文本
子龙修仙的博客
05-14 334
CSS 文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。l 基本属性属性描述示例color设置文本颜色color:red;background-color背景颜色 text-align 对齐方式text-align:center/left/rightline-height设置行高line-height:30px;line-height...
CSS文本样式设置
机器人视觉感知
04-04 242
(1)字体的设置font-family:"GillSans"，中间用空格分开。 select、textarea、input需要强制继承input,select,input{font-family:inherit}。设定首选字体，替代字体。字体列表为字体栈(font-stack)。 windows与os x上默认共有的字体有:arial，comic Sans MS,Courier New，Georg...
20180610-CSS-文本样式-文本样式
cutebright00的博客
06-10 396
&lt;p style="text-align:left"&gt;&lt;/p&gt;&lt;p align="left"&gt;&lt;/p&gt;只有IE中会居中margin：0 auto0表示上下边距，auto表示左右边距自动。加上margin  会在 所有浏览器中居中显示，如下图vertical-align属性：只能改变行内垂直对齐属性，不能改变块的垂直对齐属性。应用格式：sub   下标...
CSS文本控制总结
chen__cheng的博客
04-16 348
CSS文本控制总结1. 字体属性1.1 字体系列1.2 字体大小1.3 字体粗细1.4 文字样式（斜体）1.5 字体颜色1.6 行高（行间距）1.7 文字复合写法2. 文本样式2.1 大小写转换2.2 文本线条2.3 文本阴影2.4 文本空白处理2.5 文本溢出处理3 段落控制3.1 文本对齐3.2 文本缩进3.3 字符间隔3.4 文本排版模式 1. 字体属性 字体属性定义字体系列、大小、粗细和文本样式（粗细等） 1.1 字体系列 font-family 用法： p { font-family:
CSS文本属性
weixin_69146952的博客
10-12 126
可以单独设置 text-decoration-line、 text-decoration-color、和 text-decoration-style属性。text-indent属性将页面上的段落的第一行进行缩进（首行缩进），这是一种最常用的文本格式化效果。语法：text-shadow：x-shadow y-shadow blur color。通过文本属性，您可以改变文本的颜色，字符间距，对齐文本，装饰文本，对文本进行缩进等等。text-decoration 属性设置文本装饰线条的位置，综合属性。
前端三刺客---CSS
m0_62476684的博客
09-15 1935
CSS
CSS文本属性总结
bestyjava的博客
08-31 727
文本修饰 (1)text-decoration: 文本修饰（横线） 4个属性值 overline line-through underline blink (1)overline 定义文本上的一条横线 欢迎加群四九·九七·五四·六一四交流，备注CS。 (2)line-through 这个属性值时最有用的，一般商家降价促销后面的价格会用横线划去表示那是之前的价格 (3)...
CSS---关于font文本属性设置样式总结
COCOLI_BK的博客
11-16 2674
用于指定文本中单词之间的间距，设置固定值为单词间距，如10px。会破坏单词的完整性，可能会影响阅读体验，要谨慎使用。用于设置字间距，设置固定值为字间距，如10px。用于设置文本的装饰线，是下表属性的简写。设置文本在水平或垂直方向的。
CSS之文字样式
weixin_45604020的博客
06-22 6209
CSS字体属性定义字体，颜色、大小，加粗，文字等的样式。
CSS中TEXT-SIZE属性可控制文本尺寸
07-11
请注意，除了`font-size`属性外，还有其他CSS属性可用于控制文本尺寸和样式，例如`font-family`用于指定字体系列，`font-weight`用于设置字体粗细等。 感谢你的指正，如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值