CSS尺寸与文本讲解。HTML、CSS笔记（四）。

最新推荐文章于 2021-06-17 05:13:49 发布

阿牛大牛中

最新推荐文章于 2021-06-17 05:13:49 发布

阅读量631

点赞数 2

分类专栏： css html

本文链接：https://blog.csdn.net/weixin_46351593/article/details/105675757

版权

css 同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

html

16 篇文章 2 订阅

订阅专栏

文章目录

CSS尺寸（Dimention）
文本
回顾一下之前的

上次主要说了HTML列表、长度单位、颜色单位还有字体样式，内容还是比较详细的，这次我们继续说点别的！！！CSS尺寸和文本！！

CSS尺寸（Dimention）

行高line-height属性

在CSS中，并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高间接设置行间距，行高越大行间距越大。
使用line-height设置行高。
行高类似我们小时候上课用的单线本，单线本是一行一行的，线与线之间的距离就是行高。网页上的字就是处在看不见的线中，而文字会默认在我们的行高中垂直居中显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行间距</title>
		<style>
			p.small {
					line-height:70%;
					}
			p.big {
					line-height:40px;
				}
		</style>
	</head>

	<body>
		<p>
			这是一个标准行高的段落。<br>
			这是一个标准行高的段落。<br>
			大多数浏览器的默认行高约为110%至120%。<br>
		</p>

	<p class="small">
		这是一个更小行高的段落。<br>
		这是一个更小行高的段落。<br>
		这是一个更小行高的段落。<br>
		这是一个更小行高的段落。<br>
		</p>

		<p class="big">
			这是一个更大行高的段落。<br>
			这是一个更大行高的段落。<br>
			这是一个更大行高的段落。<br>
			这是一个更大行高的段落。<br>
		</p>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GA6EW6hT-1587522188680)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/1行高.jpg)]

通过line-height可以间接设置行间距，可能的值：

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。（比百分号常用）
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行间距</title>
		<style>
			div.box{
				width: 200px;
				height:200px;
				background-color: #bfa;
				
			}
					
		</style>
	</head>

	<body>
		<div class="box" >
			<a href="#">我是一个超链接</a>
		</div>
	</body>
</html>

这段代码的效果是这样的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IJr58gjg-1587522188682)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/2行高居上.jpg)]

如何运用刚才我们学的将这一行文本放到居中位置呢？

/*
* 对于单行文字来说，可以将行高设置为和父元素的高度一致，
* 	这样可以使单行文本在父元素中垂直居中。
*/
line-height: 200px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7QCvxt9-1587522188684)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/3行高居中.jpg)]

注意：这适用于单行文本在父元素中居中！！！

在上次说的font简写属性中可以将多个设置字体的属性结合起来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PX7R3Wb9-1587522188686)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/4font属性.jpg)]

而这时我们也可以直接同时设置行高。在字体大小后可添加行高字体大小/行高。将上面的代码写成font:italic samll-caps bold 50px/60px "微软雅黑"这样就等同于将行高设置为60px了。当然这个值是可选的，如果时指定则会使用默认值。

使用font简写属性的陷阱(当使用font不设置行高时，会指定默认值)：

.p2{
	line-height：150px;
	font:italic small-caps bold 50px "微软雅黑";
}

大家说这样能起到效果么？不行！！我们写font的时候line-height被指定默认值了，所以我们最好把行高写在字体大小后面。

尺寸的其他属性

heigh、width属性

height属性:

值	描述
auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

width属性：

值	描述
auto	默认值。浏览器可计算出实际的宽度。
length	使用 px、cm 等单位定义宽度。
%	定义基于包含块（父元素）宽度的百分比宽度。
inherit	规定应该从父元素继承 width 属性的值。

max-height、max-width属性

max-height属性：

值	描述
none	默认。定义对元素被允许的最大高度没有限制。
length	定义元素的最大高度值。
%	定义基于包含它的块级对象的百分比最大高度。
inherit	规定应该从父元素继承 max-height 属性的值。

max-width属性：

值	描述
none	默认。定义对元素的最大宽度没有限制。
length	定义元素的最大宽度值。
%	定义基于包含它的块级对象的百分比最大宽度。
inherit	规定应该从父元素继承 max-width 属性的值。

min-height、min-width属性

min-height属性：

值	描述
length	定义元素的最小高度。默认值是 0。
%	定义基于包含它的块级对象的百分比最小高度。
inherit	规定应该从父元素继承 min-height 属性的值。

min-width属性：

值	描述
length	定义元素的最小宽度值。默认值：取决于浏览器。
%	定义基于包含它的块级对象的百分比最小宽度。
inherit	规定应该从父元素继承 min-width 属性的值。

其实都差不多，属性值是length或者是一个百分数，我们就不一一赘述了。

文本

text-transform属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>transform</title> 
		<style>
			p.uppercase {text-transform:uppercase;}
			p.lowercase {text-transform:lowercase;}
			p.capitalize {text-transform:capitalize;}
	</style>
</head>

	<body>
		<p class="uppercase">This is some text.</p>
		<p class="lowercase">This is some text.</p>
		<p class="capitalize">This is some text.</p>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zwWttHjA-1587522188687)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/5test-transform.jpg)]

一共有以下可能的值：

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

其中capitalize是根据空格区分每个单词的。

当然，这玩意对中文没啥卵用。。。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OiEhPeWm-1587522188688)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/6晕菜.gif)]

text-docoration属性

text-decoration 属性规定添加到文本的修饰，下划线、上划线、~~删除线~~等。可能的值：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
			<title>decoration</title> 
			<style>
				h1 {text-decoration:overline;}
				h2 {text-decoration:line-through;}
				h3 {text-decoration:underline;}
			</style>
	</head>
	<body>
    <a href="#">我是超链接</a>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<h3>This is heading 3</h3>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eFrc6TH5-1587522188690)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/7decoration.jpg)]

注意超链接默认添加下划线，也就是超链接的text-decoration的默认值是underline。

letter-spacing属性

letter-spacing属性可以指定字符间距。可能的值：

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>letter-spacing</title> 
		<style>
			h1 {letter-spacing:2px;}
			h2 {letter-spacing:-3px;}
		</style>
	</head>

	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L5WdNmhk-1587522188692)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/8letter-spacing.jpg)]

world-spacing属性

worl-spacing属性可以设置单词之间的间距。可能的值：

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>word-spacing</title> 
		<style>
			p{ 
				word-spacing:30px;
			}
		</style>
	</head>
	<body>
		<p>
			This is some text. This is some text.
		</p>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDnMylam-1587522188693)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/9world-spacing.jpg)]

这个wold-spacing实际上就是设置词与词之间空格的大小。这东西也是有点弱智，对中文也没啥卵用。。。

text-align属性

text-align属性指定元素文本的水平对齐方式。可能的值：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>text-align</title> 
		<style>
		h1 {text-align:center}
		h2 {text-align:left}
		h3 {text-align:right}
	</style>
	</head>
	
	<body>		
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<h3>This is heading 3</h3>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lnEiNUuF-1587522188695)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/10text-align.jpg)]

这个对齐的方式text-align属性我们用的比较多。是通过调整文本之间的空格的大小来达到效果的。

text-indent属性

text-indent 属性规定文本块中首行文本的缩进。可能的值：

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

注意： 负值是允许的。如果值是负数，将第一行左缩进。负值可以将一些不想显示的文字隐藏起来，这样可以让用户看不见，但是搜索引擎能看见。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>text-indent</title> 
		<style>
			p {
				text-indent:50px;
				}
		</style>
		</head>
	<body>

		<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q89WfplJ-1587522188696)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/11text-indent.jpg)]

但是一般我们写中文文章开头都是缩进两个字体大小，如果采用默认值还好，可以直接将text-indent的值设置为32px但是如果我们将字体大小做了调整呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C5sJl5F6-1587522188697)(/Users/mac/Desktop/MarkDown /HTML:CSS（四）/12em.jpg)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>text-indent</title> 
		<style>
			p {
				text-indent:2em;
				font-size: 20px;
				}
		</style>
	</head>
	<body>

		<p>在我更年轻，更脆弱的岁月中，父亲给了我一些建议，从那以后我就一直在思考。他对我说：“只要您想批评任何人，只要记住，这个世界上的所有人都没有拥有您所拥有的优势。”</p>

	</body>
</html>