CSS语法，文本笔记（二）

最新推荐文章于 2023-04-27 11:01:48 发布

，Durant

最新推荐文章于 2023-04-27 11:01:48 发布

阅读量62

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48798359/article/details/112824617

版权

主要内容

CSS中字体相关样式

font-family
指定字体
可以为文字指定多个字体，不同字体间用“，”隔开
字体名字中间有空格的，要用双引号引起来
font-size
字体大小
多用px/em单位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css文字属性</title>
		<style>
			.p1{font-size: 48px;}
			.p2{
				font-size: 48px;
				/* font-family: 宋体,微软雅黑; 
				1.建议用国际写法
				2.中文正文建议用 宋体
				3.多个字体用逗号隔开，如果前面的字体和电脑字体匹配就使用前面的，如果都不匹配 系统默认的字体
				4.字体的名称中间有空格用双引号包裹
				*/
				font-family: "simSun","microsoft yahei";
			}
		</style>
	</head>
	<body>
		<h1>css文字属性</h1>
		<p class="p1">font-size 文字大小</p>
		<p class="p2">font-family 字体</p>
	</body>
</html>

在这里插入图片描述

font-style
字体倾斜效果
normal不倾斜，oblique和italic倾斜
Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
font-weight
字体粗细
大多浏览器可以实现：正常和加粗效果

属性	释义
normal	正常粗细
bold	粗细
bolder	加粗体
lighter	比正常粗体细
100~900	共9个层次，数字越大，字体越粗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>font-style样式</title>
		<style>
			.h1{font-style: normal;}
			.h2{font-style: oblique;}
			.w1{font-weight: 100;}
			.w2{font-weight: 900;}
			.w3{font-weight: normal;}
			.w4{font-weight: lighter;}
			.w5{font-weight: bold;}
			.w6{font-weight: bolder;}
		</style>
	</head>
	<body>
		<h1 class="h1">文字样式-normal</h1>
		<h1 class="h2">文字样式-italic</h1>
		<h2 class="wi">文字粗细100</h2>
		<h2 class="w2">文字粗细900</h2>
		<h2 class="w3">文字粗细normal</h2>
		<h2 class="w4">文字粗细lighter</h2>
		<h2 class="w5">文字粗细 bold</h2>
		<h2 class="w6">文字粗细 bolder</h2>
	</body>
</html>

text-transform
英文字母大小写转换

属性	释义
capiaalize	单词首字母大写
uppercase	全部大写
lowercase	全部小写

text-decoration
文本的装饰效果

属性	释义
underline	文字加下划线
line-through	文字加删除线
overline	文字加上划线

text-indent
段落内容首行缩进（悬挂缩进）
字词间距
英文文本
letter-spacing 字母和字母间距：normal/数值
word-spacing 单词和单词间距
中文文本
letter-spacing字和字之间的间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>text相关css</title>
		<style>
			.p1{text-transform: capitalize;}
			.p2{text-transform: lowercase;}
			.p3{text-decoration: underline;}
			.p4{text-decoration: overline;}
			.p5{text-decoration: line-through;}
			a{text-decoration: none;}
			.p6{text-indent: 2em;}
		</style>
	</head>
	<body>
		<h1>文字的首行缩进</h1>
		<p class="p6">北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。北国风光，千里冰封，万里雪飘。</p>
		<h1>文字的装饰线</h1>
		<a href="">normal 正常</a>
		<p>normal正常</p>
		<p class="p3">underline下划线</p>
		<p class="p4">overline上划线</p>
		<p class="p5">line-through</p>
		<h1>文字转换</h1>
		<p class="p1">text-transform</p>
		<p class="p2">captalize首字母大写 Uppercase全大写 lowercase全小写</p>
	</body>
</html>

在这里插入图片描述

overflow
visible（默认）/hidden（超出部分隐藏）/scroll（出现滚动条）/auto（浏览器自动处理）
text-overflow
clip（不显示省略标记，简单剪裁）|ellipsis(文本溢出显示省略标记)
white-space：normal/pre（空白被保留）/nowrap（不换行）/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本溢出</title>
		<style>
			.myp{
				background-color: gold;
				line-height: 50px;
				width: 200px;
				/* 文字不换行 */
				white-space: nowrap;
				/* 内容溢出 */
				/* overflow:scroll; */
				overflow: hidden;
				/* 文本溢出 */
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<p class="myp">我是一行很长很长的文本.海域分布有大小岛屿7600多个，其中台湾岛最大，面积35798平方千米。</p>
	</body>
</html>

line-height
段落内部的行高
注意：文字在每一行自动上下居中
text-align
文本的水平位置
left,左对齐（默认值）
right，右对齐
center，居中对齐
justify，两端对齐
justify对于主要用于英文
只能对多行中的非最后一行进行两端对齐
vertical-align(垂直对齐方式)
baseline/top/text-top/middle/botton/…
(该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐)