03_css的文本样式设置

一、css 的文字文本样式设置

  • 1、设置文字的颜色: color

颜色设置的方式:

red(红色) 颜色名表示
#RRGGBB 十六进制法
rgb(16, 78, 139) rgb表示法(红-绿-蓝(red-green-blue )
rgba(16, 78, 139,0.5) RGBa 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明

示例:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置文字的颜色</title>
		<style type="text/css">
			div {
				/* 1.设置文字的颜色:color */
				color: red;
		        color:#00ff00;
		        color:rgb(0,0,255);
		        color:rgba(0,0,255,0.6);
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 2、设置文字的大小: font-size
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置文字的大小</title>
		<style type="text/css">
			div {
				/* 2.设置文字的大小:font-size*/
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 3、设置文字是否加粗: font-weight(加粗/ 不加粗

属性值:

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。

示例:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置文字是否加粗</title>
		<style type="text/css">
			div {
				/* 3.设置文字是否加粗:font-weight(加粗/不加粗) */
				font-weight:bold;
		        font-weight:normal;
		        font-weight:bolder;
		        font-weight:lighter;
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 4、设置文字的字体: font-famil
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				/* 4.设置文字的字体:font-family */
				font-family:"microsoft yahei";
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 5、设置文字是否倾斜**: ** font-style(倾斜/不倾斜)

属性值:

normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

示例:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				/* 5.设置文字是否倾斜:font-style(倾斜/不倾斜) */
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 6、设置文字的行高**: ** line-height
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				/* 6.设置文字的行高:line-height */
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 7、设置文字首行缩进**: text-indent**
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				/* 7.设置文字首行缩进:text-indent */
				text-indent:40px;
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>

  • 8、设置文字水平对齐方式**: ** text-align

属性值:

left 把文本排列到左边。默认值:由浏览器决定
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值

示例:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				/* 8.设置文字水平对齐方式:text-align */
				/* 设置文字水平居中 */
				text-align:center	
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>
  • 9、字体的组合设置**: font(是否加粗 字号/行高 字体)**

示例:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h4 {
				/* 9.字体的组合设置:font(是否加粗 字号/行高 字体) */
				font:bold 50px/50px "microsoft yahei"
			}
		</style>
	</head>
	<body>
		<div>这是设置了文本样式</div>
		<h4>这是没有设置文本样式</h1>
	</body>
</html>
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法