讲给后台程序员看的前端系列教程(17)——文本样式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100587874

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

在前端开发中经常需要对文本设定样式。故,在本节中专门讨论与文本相关的属性及其设置方式。

字体样式属性

CSS中常用字体样式属性如下:

font-size

font-size属性用于设置字号,常用单位为px

font-family

font-family 属性用于设置字体。常用字体有:微软雅黑,宋体,黑体等

font-weight

font-weight 属性用于设置字体粗细,其常用属性值如下:

  • normal:标准字符
  • bold:粗体字符
  • bolder:加粗字符
  • lighter:纤细字符
  • 整数n*100:取值范围为100-900,值越大字体越粗

font-style

font-style 属性用于设置字体风格,其常用属性值如下:

  • normal:标准字体
  • italic:斜体字体
  • oblique:倾斜字体

书写顺序

我们可利用font对字体进行一系列的设置,基本语法如下:

选择器{font:font-style font-weight font-size font-family;}

在使用font属性时请务必按照该顺序书写,各个属性之间以空格隔开。

示例

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fon属性</title>
		<style type="text/css">
			p {
				font: italic 25px "隶书";
				color: yellowgreen;
			}
		</style>

	</head>
	<body>
		<p>好雨知时节,当春乃发生。随风潜入夜,润物细无声。</p>
		<p>千里莺啼绿映江,水村山郭酒旗风。南朝四百八十寺,多少楼台烟雨中。</p>
		<p>本文作者:谷哥的小弟</p>
		<p>博客地址:http://blog.csdn.net/lfdfhl</p>
	</body>
</html>

效果如下:
在这里插入图片描述

文本外观属性

CSS中常用文本外观属性如下:

color

color 属性用于设置文本的颜色

text-decoration

text-decoration 属性用于设置文本的装饰效果,其常用属性值如下:

  • none:无装饰效果
  • underline:下划线
  • overline:上划线
  • line-through:删除线

text-align

text-align属性用于设置文本内容的对齐方式,其常用属性值如下:

  • left:左对齐(默认值)
  • right:右对齐
  • center:居中对齐

text-indent

text-indent属性用于设置首行文本的缩进,其常用单位为em。

示例

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本属性</title>
		<style type="text/css">
			p {
				font-family: "微软雅黑";
				font-size: 16px;
				color: firebrick;
			}

			.p2 {
				text-indent: 2em;
			}

			.p3 {
				text-indent: 50px;
			}
		</style>

	</head>
	<body>
		<p class="p1">段落1:这是正常显示的文本内容,即未设置段落1文本的首行缩进效果。</p>
		<p class="p2">段落2:使用text-indent:2em;设置段落2文本首行缩进2个字符的效果。</p>
		<p class="p3">段落3:使用text-indent:50px;设置段落3文本首行缩进50像素的效果。</p>
	</body>
</html>

效果如下:
在这里插入图片描述

综合示例

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本属性示例</title>
		<style type="text/css">
			h2 {
				color: red;
				text-align: center;
			}

			p {
				font-size: 16px;
				color: seagreen;
				text-align: center;
			}

		</style>
	</head>
	<body>
		<h2>山居秋暝</h2>
		<p>空山新雨后,天气晚来秋。</p>
		<p>明月松间照,清泉石上流。</p>
		<p>竹喧归浣女,莲动下渔舟。</p>
		<p>随意春芳歇,王孙自可留。</p>
	</body>
</html>

效果如下:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页