字体大小
文字大小和字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性</title>
<style>
/*
font-size
字体大小，单位px
font-family
字体(谷歌默认字体微软雅黑)
*/
.p1{
/* 字体大小 */
font-size: 20px;
}
.p2{
/*
设置字体, 如果不支持, 就不起作用,
比如草书写上不起作用, 还是默认的字体。
工作中会有ui提供, 也可以有自己的字体包。
可以同时设置多个, 用逗号隔开,
第一个起作用就用第一个,
第一个不行就第二个起作用, 依次到最后, 都不行就是默认字体。
*/
font-family: 宋体;
/* font-family: 微软雅黑; */
/* font-family:宋体, 草书, 微软雅黑; */
}
</style>
</head>
<body>
<p class="p1">
在健康概念风靡零食圈之前，程前伟就已经对未来的发展趋势有了自己的判断：中国人有钱了，吃得却“不好”，市面上的大部分零食都存在食品添加剂问题，他坚信“无添加零食”时代一定会到来。
</p>
<p class="p2">
在健康概念风靡零食圈之前，程前伟就已经对未来的发展趋势有了自己的判断：中国人有钱了，吃得却“不好”，市面上的大部分零食都存在食品添加剂问题，他坚信“无添加零食”时代一定会到来。
</p>
</body>
</html>
常见的字体：
字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体颜色</title>
<style>
/*
* 颜色十六进制
* (十进制：0-9 二进制：01 十六进制：0-9 A-F)
* 从0到f,0最强，f最弱
* rgb颜色
* 0-255 0最弱，255最强，也可使用百分比RGB(100%,0%,0%)
* 红色 rgb(255,0,0);
* 绿色 rgb(0,255,0);
* 蓝色 rgb(0,0,255);
* 第一个数表示红色的浓度，第二个数表示绿色浓度，第三个数表示蓝色的浓度
* 所有的颜色都是由这三种颜色调配而来的
* rgba颜色
* RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，
* 透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
* rgb(255,0,0,0.5);
*/
.p1{
/*
十六进制：0-9 A-F
*/
color: #ffffff;
/* color: rgb(0,0,255); */
/* color: rgb(255,0,0,0.5); */
}
</style>
</head>
<body>
<p class="p1">我是字体颜色</p>
</body>
</html>
文本加粗和倾斜
以前使用标签进行加粗和倾斜
<!-- 加粗 -->
<b>加粗内容</b> // 只显示加粗
<strong>强调的内容</strong> // 突出的文本
<!-- 倾斜 -->
<em>强调文本</em>
<i>倾斜文本</i>
现在可以使用css来控制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本加粗和倾斜</title>
<style>
/*
* font-weight 加粗
* 字体加粗范围 100-900
* 100 细体 ligter
* 400 正常 normal
* 700 加粗 bold
* 900 更加粗 bolder
* font-style 倾斜
* italic 倾斜
* oblique 更倾斜
* normal 正常
*/
.p1{
font-weight: bolder;
}
h1{
font-weight: normal;
}
.p2{
font-style: oblique;
}
</style>
</head>
<body>
<p class="p1">
在健康概念风靡零食圈之前，程前伟就已经对未来的发展趋势有了自己的判断：中国人有钱了，吃得却“不好”，市面上的大部分零食都存在食品添加剂问题，他坚信“无添加零食”时代一定会到来。
</p>
<h1>helloWord</h1>
<p class="p2">
在健康概念风靡零食圈之前，程前伟就已经对未来的发展趋势有了自己的判断：中国人有钱了，吃得却“不好”，市面上的大部分零食都存在食品添加剂问题，他坚信“无添加零食”时代一定会到来。
</p>
</body>
</html>
文本水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平垂直居中</title>
<style>
/*
text-align 水平对齐
属性值：left , center , right
*/
.box1{
/* 水平对齐 left , center , right */
text-align: center;
/* 盒子的宽度 */
width: 500px;
background-color: yellow;
}
/*
text-align 对于单行文本可以，多行文本同样使用
*/
.box2{
/*
text-align 两端对齐-多行文本中用的
属性值：justify
*/
text-align: justify;
width: 500px;
background-color: rgb(0, 255, 38);
}
/*
line-height 行高
line-height的数据=height的数据，可以实现单行文本垂直居中
只适合单行文本，不适合多行文本，多行文本具体调整。
*/
.box3{
width: 500px;
background-color: yellow;
text-align: center;
/*
line-height的值与height值设置一样，可以实现单行文本垂直居中
*/
height: 100px;
line-height: 100px;
}
.box4{
width: 500px;
background-color: rgb(0, 255, 64);
text-align: center;
height: 200px;
line-height: 30px;
}
</style>
</head>
<body>
<!-- 单行文本 -->
<div class="box1">hello word!</div>
<!-- 多行文本 -->
<div class="box2">
As the Russia-Ukraine conflict, breaking out two years ago, has caused casualties and resulted in serious damages to both sides up to today, Chinese Foreign Minister Wang Yi reiterated at the Munich Security Conference (MSC) that China has stayed committed to promoting peace talks on the Ukraine issue and will not give up as long as there is a glimmer of hope.
</div>
<!-- 单行文本 -->
<div class="box3">你好，大世界!</div>
<!-- 多行文本 -->
<div class="box4">
As the Russia-Ukraine conflict, breaking out two years ago, has caused casualties and resulted in serious damages to both sides up to today, Chinese Foreign Minister Wang Yi reiterated at the Munich Security Conference (MSC) that China has stayed committed to promoting peace talks on the Ukraine issue and will not give up as long as there is a glimmer of hope.
</div>
</body>
</html>
文本间距和首行缩进
文本间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本间距</title>
<style>
/*
文本间距：词间距，字间距
一般中文间距用letter-spacing
英文间距用word-spacing 单词与单词之间留间距
*/
.p1{
letter-spacing: 10px;
}
.p2{
letter-spacing: 10px;
}
.p3{
word-spacing: 10px;
}
</style>
</head>
<body>
<p class="p1">庆历四年的春天，滕子京被降职到巴陵郡做太守。隔了一年，政治清明通达，人民安居和顺，各种荒废的事业都兴办起来了。于是重新修建岳阳楼，扩大它原有的规模，把唐代名家和当代人的诗赋刻在它上面。嘱托我写一篇文章来记述这件事情。我观看那巴陵郡的美好景色，全在洞庭湖上。衔接远山，吞没长江，流水浩浩荡荡，无边无际，一天里阴晴多变，气象千变万化。这就是岳阳楼的雄伟景象。</p>
<p class="p2">In the spring of the fourth year of Qingli, Tengzijing was demoted to Baling County to be the chief guard. A year later, politics was clear and prosperous, the people lived in peace and prosperity, and various abandoned undertakings were set up. Therefore, Yueyang Tower was rebuilt, its original scale was expanded, and the poems of famous Tang Dynasty and contemporary people were engraved on it. I was asked to write an article describing the matter. I watched the beautiful scenery of Baling County, all over Dongting Lake. Connecting the distant mountains, engulfing the Yangtze River, the flowing water is mighty and boundless, and the weather is changeable in a day. This is the majestic scene of Yueyang Tower.</p>
<p class="p3">In the spring of the fourth year of Qingli, Tengzijing was demoted to Baling County to be the chief guard. A year later, politics was clear and prosperous, the people lived in peace and prosperity, and various abandoned undertakings were set up. Therefore, Yueyang Tower was rebuilt, its original scale was expanded, and the poems of famous Tang Dynasty and contemporary people were engraved on it. I was asked to write an article describing the matter. I watched the beautiful scenery of Baling County, all over Dongting Lake. Connecting the distant mountains, engulfing the Yangtze River, the flowing water is mighty and boundless, and the weather is changeable in a day. This is the majestic scene of Yueyang Tower.</p>
</body>
</html>
首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首行缩进</title>
<style>
.p1{
font-size: 20px;
/*
text-indent 首行缩进
px单位 假如一个字符20px,40px相当于两个字符
字体大小改变，text-indent的值也要跟着改
em单位 表示此时字体的大小乘以2
*/
/* text-indent: 40px; */
text-indent: 2em;
}
</style>
</head>
<body>
<p class="p1">庆历四年的春天，滕子京被降职到巴陵郡做太守。隔了一年，政治清明通达，人民安居和顺，各种荒废的事业都兴办起来了。于是重新修建岳阳楼，扩大它原有的规模，把唐代名家和当代人的诗赋刻在它上面。嘱托我写一篇文章来记述这件事情。我观看那巴陵郡的美好景色，全在洞庭湖上。衔接远山，吞没长江，流水浩浩荡荡，无边无际，一天里阴晴多变，气象千变万化。这就是岳阳楼的雄伟景象。</p>
</body>
</html>
文本修饰
之前html中学过
<s>文本</s> -删除线
<del>文本</del> -删除线
<u>文本</u> -下划线
css中我们也可以实现
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本修饰</title>
<style>
/*
text-decoration
属性值：underline 下划线
line-through 中划线/删除线
overline 上划线
none 去掉下划线，常用在a链接上
*/
p{
/* text-decoration: underline; */
/* text-decoration: line-through; */
text-decoration: overline;
}
a{
text-decoration: none;
}
div{
/* 想要同时实现下划线，中划线，上划线 */
text-decoration: underline line-through overline;
}
</style>
</head>
<body>
<p>东晋太元年间，武陵郡有个人以打渔为生。他顺着溪水行船，忘记了路程的远近。</p>
<a href="">文本修饰</a>
<div>东晋太元年间，武陵郡有个人以打渔为生。他顺着溪水行船，忘记了路程的远近。</div>
</body>
</html>
检索大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本属性-检索大小写</title>
<style>
/*
text-transform 大小写
属性值 capitalize 首字母大写
lowercase 小写
uppercase 所有字母大写
none 默认
*/
p{
/* text-transform: capitalize; */
/* text-transform: lowercase; */
text-transform: uppercase;
}
</style>
</head>
<body>
<p>
China is playing an increasingly important role in global political and socio-economic development affairs, which has led many analysts around the world to say that China has become a major player in international development cooperation.
</p>
</body>
</html>
font属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font</title>
<style>
/*
font: 斜体 加粗 字体大小/行高 字体；
合法写法，顺序不能换
斜体 加粗前两个可以省略，后面属性不能省略，省略之后所有属性失效
*/
p{
font: italic bold 20px/1em 微软雅黑;
/* italic bold可以省略 */
font: 20px/1em 微软雅黑;
/* font: italic bold 20px/1em; */
}
</style>
</head>
<body>
<p>
大家好！I'm very glad to be here. My name is Steven. I like swimming very much. In summer, I can swimming in the pool with my friends. I feel I am a fish when I in the pool. I also like playing the computer games. If you like, you can join our team.
</p>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
