CSS-设置文本样式

最新推荐文章于 2024-04-30 19:38:51 发布

娃娃救葫芦爷

最新推荐文章于 2024-04-30 19:38:51 发布

阅读量647

点赞数

分类专栏： CSS基础

本文链接：https://blog.csdn.net/cc098818/article/details/99343496

版权

CSS基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、设置文字的字体


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的字体</title>
<style type="text/css">
	.p1{
		font-family: "Times New Roman",Arial
	}
	
	.p2{
		font-family: 微软雅黑,黑体,宋体
	}
</style>
</head>
<body>
<p class="p1">Study hard and make progress every day.</p>
<p class="p2">好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
2、设置文字的倾斜效果


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的倾斜效果</title>
<style type="text/css">
	p{
		font-style: italic;
	}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
3、设置文字的加粗效果


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的加粗效果</title>
<style type="text/css">
	p{
		font-weight: bold;
	}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p style="font-weight: normal;">好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
4、设置英文字母大小写转换


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置英文字母大小写转换</title>
<style type="text/css">
	.p1{
		text-transform: capitalize;
	}
	
	.p2{
		text-transform: uppercase;
	}
	
	.p3{
		text-transform: lowercase;
	}
</style>
</head>
<body>
<p>study Hard And Make Progress Every Day.</p>
<p class="p1">study Hard And Make Progress Every Day.</p>
<p class="p2">study Hard And Make Progress Every Day.</p>
<p class="p3">study Hard And Make Progress Every Day.</p>
</body>
</html>

运行结果：
在这里插入图片描述
5、设置文字的大小


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的大小</title>
<style type="text/css">
	p{
		font-size: 36px;
	}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
6、设置文字的装饰效果


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字的装饰效果</title>
<style type="text/css">
	.p1{
		text-decoration: none;
	}
	
	.p2{
		text-decoration: underline;
	}
	
	.p3{
		text-decoration: line-through;
	}
	
	.p4{
		text-decoration: overline;
	}
</style>
</head>
<body>
<p class="p1">无装饰</p>
<p class="p2">下划线</p>
<p class="p3">删除线 原价990</p>
<p class="p4">上划线</p>
</body>
</html>

运行结果：
在这里插入图片描述
7、设置段落首行缩进


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>置段落首行缩进</title>
<style type="text/css">
	p{
		text-indent: 2em;
	}
</style>
</head>
<body>
<p>
高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到，“我所说的都关乎细节与诚实，但吐露真相只会带来更多的坏处。”并称，“在Sun与oracle的并购会议上，到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示，在收购Sun的早期阶段，oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重，足以影响软件开发者的工作。
</p>
</body>
</html>

运行结果：
在这里插入图片描述
8、设置字词间距


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置字词间距</title>
<style type="text/css">
	p{
		word-spacing: 20px;
		letter-spacing: 2px;
	}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
9、设置文字的行高


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置字词间距</title>
<style type="text/css">
	p{
		line-height: 1.5;
	}
</style>
</head>
<body>
<p>
高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到，“我所说的都关乎细节与诚实，但吐露真相只会带来更多的坏处。”并称，“在Sun与oracle的并购会议上，到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示，在收购Sun的早期阶段，oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重，足以影响软件开发者的工作。
</p>
</body>
</html>

运行结果：
在这里插入图片描述
10、设置段落之间的距离


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置段落之间的距离</title>
<style type="text/css">
	p{
		border: 1px red solid;
		margin: 1px;
		padding: 10px;
	}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
11、设置文本的水平位置


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文本的水平位置</title>
<style type="text/css">
	p{
		border: 1px red solid; 
	}
	
	.box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify}
	.box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:center;}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p style="text-align: left;">好好学习，天天向上。</p>
<p style="text-align: right;">好好学习，天天向上。</p>
<p style="text-align: center;">好好学习，天天向上。</p>

<div class="box1">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
<div class="box2">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
</body>
</html>

运行结果：
在这里插入图片描述
12、设置文字和背景的颜色


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字和背景的颜色</title>
<style type="text/css">
	p{
		color: blue;
		background-color: red;
	}
</style>
</head>
<body>
<p>Study hard and make progress every day.</p>
<p>好好学习，天天向上。</p>
</body>
</html>

运行结果：
在这里插入图片描述
13、设置段落的垂直对齐方式


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

运行结果：
在这里插入图片描述

娃娃救葫芦爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-设置文本样式

1、设置文字的字体<!DOCTYPE html><html><head><meta charset="UTF-8"><title>设置文字的字体</title><style type="text/css"> .p1{ font-family: "Times New Roman",Arial }...
复制链接

扫一扫