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=不透明

示例：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、设置文字的大小: font-size

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

属性值：

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

示例：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4、设置文字的字体: font-famil

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

属性值：

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

示例：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6、设置文字的行高**: ** line-height

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

7、设置文字首行缩进**: text-indent**

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

属性值：

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

示例：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

9、字体的组合设置**: font(是否加粗字号/行高字体)**

示例：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相关阅读:
【数据结构】线性表（四）双向链表的各种操作（插入、删除、查找、修改、遍历打印）
什么是物联网
 dart 学习之字符串插值,空变量 null,避空运算符,条件属性访问,集合字面量,箭头语法
 LED驱动IC：HC2160，内置60V功率MOS升压型LED恒流驱动IC。供应LED灯杯单节电池以上供电的LED灯串平板显示LED背光大功率LED照明
 【Linux】kill 命令使用
 深入了解 JavaScript 中的 DOM 和 BOM
C++ 原子操作与无锁编程
 笙默考试管理系统-MyExamTest----codemirror（38）
C++:拷贝构造函数的初始化列表
 一篇文章带你入门软件测试
原文地址：https://blog.csdn.net/qq_40236497/article/details/132810993