CSS文本样式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39263663/article/details/80709851

概述：

定义字体类型，大小，颜色等字体样式
设计文本样式，如对齐，行高，间距等
能够灵活设计美观，实用的网页正文版式

1，字体样式

网页字体样式包括字体类型，大小，颜色等基本效果，另外还包括一些特殊的样式，如字体粗细，下划线，斜体，大小等

1.1 定义字体类型

CSS使用font-family属性来定义字体类型，另外使用font属性也可以定义字体类型。font-family是字体专用类型专用属性，用法如下：

font-family:name
font-famile:ncursive|fantasy|monospace|serif|sans-serif

font是一个复合属性，可以设置的字体属性如下：

font:font-style || font-variant||font-weight||font-size||line-height||font=family
font:caption|icon|menu|message-box|small-caption|status-bar

CSS提供了5类通用字体。所谓通用字体就是一种备用机制，即指定的所有字体都不可用时，能够在用户系统中找到一个类似字体进行替代显示。这五类通用字体说明如下。

serif：衬线字体，
sans-serif：无衬线字体
cursive：草体
fantasy：奇异字体
monospace：等宽字体

1.2 定义字体大小

font-size

	<p style="font-size:20px">helloworld</p>
	<p style="font-size:30px">helloworld</p>

1.3 定义字体颜色

color

	<p style="color:red">helloworld</p>
	<p style="color:blue">helloworld</p>

1.4 定义字体粗细

font-weight

1.5 定义斜体

font-style: normal | italic | oblique

        <p style="font-style:normal">helloworld</p>
	<p style="font-style:italic">helloworld</p>
	<p style="font-style:oblique">helloworld</p>

1.6 定义下划线

text-decoration

	<p style="text-decoration:normal">helloworld</p>
	<p style="text-decoration:underline">helloworld</p>
	<p style="text-decoration:blink">helloworld</p>
	<p style="text-decoration:overline">helloworld</p>
	<p style="text-decoration:line-through">helloworld</p>

2，文本样式

字体样式只要涉及字符本身的显示效果，而文本样式主要涉及多个字符的排版效果。CSS在命名属性时，使用font前缀和text前缀来区分字体和文本属性。

2.1 定义文本对齐

CSS使用text-align属性来定义文本的对齐方式，该属性的用法如下。

text-align:left:right:center:justify

<div style="width:400px;height:400px;background-color:#999;">
		<p style="text-align:left">小白菜向左偏移</p>
		<p style="text-align:right">小白菜向右偏移</p>
		<p style="text-align:center">小白菜居中显示</p>
	<div>

2.2 定义垂直对齐

取值简单说明如下：

auto：将根据layout-flow属性的值对齐对象内容
baseline：表示默认值，表示将支持valign特性的对象内容与基线对齐
sub：表示垂直对齐文本的下标
super：表示垂直对齐文本的上标
top：表示将支持valign特性的对象的内容对象顶端对齐
text-top：表示将支持valign特性的对象的文本与对象顶端对齐
middle：表示将支持valign特性的对象的内容与对象中部对齐
bottom：表示将支持valign特性的对象的内容与对象底部对齐
text-bottom：表示将支持valign特性的对象的文本与对象顶端对齐
length：表示由浮点数字和的那位标识符组成的长度值或者百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分比来说为0%；

2.3 定义字距和词距

字距：letter-spacing 词距：word-spacing

2.4 定义行高

line-height : normal | length

2.5 定义缩进

text-indent：length

3，CSS3新增文本样式

3.1 定义文本阴影

text-shadow

<p style="font:bold 60px helvetica,arial,sans-serif;color:#999;text-shadow:5px 5px  5px #333">helloworld</p>

text-shadow中参数的属性：第一个水平位移，第二个垂直位移，第三个模糊半径第4个阴影颜色

3.2 设计阴影特效

1，通过阴影增加前景色与背景色的对比度

<style type="text/css">
p{
	text-align:center;
	font:bold 60px helvetica,arial,sans-serif;
	color:#fff;
	text-shadow:black 5px 5px 5px;
}
</style>
<p>helloworld</p>

2，定义多色阴影

<style type="text/css">
p{
	text-align:center;
	font:bold 60px helvetica,arial,sans-serif;
	color:#fff;
	text-shadow:black 5px 5px 5px,
		-5px 5px 4px #060;
}
</style>
<p>helloworld</p>

3，定义火焰文字

<style type="text/css">
body{background:#000;}
p{
	text-align:center;
	font:bold 60px helvetica,arial,sans-serif;
	color:#fff;
	text-shadow:0 0 4px white,
		0 -5px 4px #ff3,
		2px -10px 6px #fd3,
		-2px -15px 11px #f80,
		2px -25px 18px #f20;
}
</style>
<body>
<p>helloworld</p>
</body>

3.3 定义溢出文字

CSS新增了text-overflow属性，该属性可用设置超长文本省略显示。text-overflow属性的基本语法如下：

text-overflow:clip | ellipsis | ellipsis-word;

clip：表示不显示省略标记，而只是简单的裁剪
ellipsis：表示当对象内文本溢出时显示省略标记
ellipsis-word：表示当对象内文本溢出时显示省略标记

3.4 文本换行

word-break

3.5 添加动态内容

content

3.6 恢复默认样式

initial ，可以取消对某个元素的样式绑定

<style>
	p{
		color:red;
	}
	p#hello{
		color:initial;
	}
</style>
<body>
	<p>hahahahaha</p>
	<p id="hello">haihdiha</p>
</body>