博客

最新推荐文章于 2024-01-24 16:32:11 发布

无梦相赠X

最新推荐文章于 2024-01-24 16:32:11 发布

阅读量129

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_54603642/article/details/112848531

版权

css中字体相关样式

font相关属性

font-family：（指定字体）
可以为文字指定多个字体，不同字体用“，”隔开
字体名字中间有空格的要用“ ”引起来
font-size：（字题大小）
单位多用px/em单位
font-style：（字体倾斜效果）
normal（正常）/italic（斜体) /oblique(强制斜体)
italic 是使文字倾斜 oblique是使没有倾斜属性的文字倾斜（列如，思源黑体)
font-weight：（文字粗细）
100~900（从小到大）/lighter （最细）/normal（正常）/ bold（粗）/ bolder（特粗）
文字的简写：font：样式粗细大小/行高字体
例如：font： italic bold 40px/30px “simsun”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black{
				font-size: 40px;
				font-family: "simsun";
				font-style: italic;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p class="black">你好世界</p>
	</body>
</html>

text相关属性

text-transform： (文字转换)
capitalize (单词首字母大写)/ uppercase（全部大写）/ lowercase（全部小写）
text-decoration： (文字装饰)
normal (正常)/ underline（下划线）/upperline（上划线）/line-through（删除线）
text-ident：（首行缩进）
一般2em（首行缩进2字符）

text-align：（文字对齐间距）
left(左)/ right（右）/center（居中）
justify：主要用于英文，只能对多行中的非最后一行进行两端对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black{
				text-transform: capitalize;
				text-decoration: underline;
				text-indent: 2em;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p class="black">你好word</p>
	</body>
</html>

间距

英文文本
word-spacing（单词与单词间距)：数字+px/normal
letter-spacing（字母和字母间距)：数字+px/normal

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black{
				word-spacing: 10px;
				letter-spacing: 3px;
			}
		</style>
	</head>
	<body>
		<p class="black">hello word</p>
	</body>
</html>

中文文本
letter-spacing（汉字间距）：数字+px/normal

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black{
				letter-spacing: 3px;
			}
		</style>
	</head>
	<body>
		<p class="black">你好世界</p>
	</body>
</html>

有关溢出进行处理

内容溢出及处理
overflow： visible（可见）/auto（浏览器自动处理）/scroll（出现滚动条）hidden（超过部分隐藏）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本溢出</title>
		<style type="text/css">
			.map{
				background-color: gold;
				line-height: 50px;
				width: 200px;
				white-space: nowrap;
				/* 文字不换行 */
			/* 内容超过溢出 */
			overflow: hidden;
		/* 	overflow: hidden; */	
		</style>
	</head>
	<body>
		<p class="map">中华人民共和国国徽，中间是五星照耀下的天安门，周围
		是谷穗和齿轮。</p>
	</body>
</html>

文本溢出及处理
text-overflow：clip（不显示省略标记）/ elliptical（文本溢出显示省略标记）
white-space：normal（正常）/pre（空白被保留）/nowrap文字不换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本溢出</title>
		<style type="text/css">
			.map{
				background-color: gold;
				line-height: 50px;
				width: 200px;
				white-space: nowrap;
				/* 文字不换行 */
			/* 内容超过溢出 */
			overflow: scroll;
		/* 	overflow: hidden; */
	 		/* 文本溢出 */
			text-overflow: ellipsis;
			}
			
		</style>
	</head>
	<body>
		<p class="map">中华人民共和国国徽，中间是五星照耀下的天安门，周围
		是谷穗和齿轮。</p>
	</body>
</html>

行内元素垂直对齐

vertical：baseline/top（顶部）/text-top/middle（中间）/bottom（底部）

如何设置一行文本超出显示3个小点

white-space: nowrap;
overflow: scroll;
text-overflow: ellipsis;

css盒子模型

width和height
只定义内容的大小，不包含边框和边距，如果内容太多,超过了width或height,那么默认情况下将忽略width或height的设置
overflow属性(overflow-x overflow-y)
定义内容超过width和heigth时的显示方式

scroll;使用滚动条, 不论内容是否超出
auto;根据情况，如果内容超出了width,则出现横向滚动条，如果内容超过了height,则出现纵向滚动条,否则不显示滚动条
hidden;超出部分被隐藏
visible;默认值，忽略width或height

css盒子模型-边框

边框全写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<p class="black">你好世界</p>
	</body>
</html>

边框单独写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black{
				border-bottom: 1px solid red;
				border-top: 1px dashed green;
				border-left: 1px dotted gold;
				border-left: 1px dotted gold;
			}
		</style>
	</head>
	<body>
		<p class="black">你好世界</p>
	</body>
</html>

拆分
border-width border-style border-color border-left

css盒子模型-内边距

padding (内边距)
边框和内容之间的空白宽度
注意:这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding的综合设置
例: padding:2px;(四个内边距都为2px)
padding的单边设置
例: padding-left:2px;(左边的边框和内容之间的距离为2px)

css盒子模型-背景

background-colorimage（定义标签的背景颜色)
background-image（定义背景图片，可定义多个背景）
background-repeat(背景-重复)
定义背景图片的显示方式
1. repeat,图片重复
2. repeat-x,图片横向重复
3. repeat-y,图片纵向重复
4. no-repeat,图片不重复
background-position(定义背景图片的位置)
1. 直接使用两个定位单词
  例:background-position: right top;
2. 使用x、y坐标
  例:background-position: 20px 30px;

无梦相赠X

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
博客

css中字体相关样式font相关属性font-family：（指定字体）可以为文字指定多个字体，不同字体用“，”隔开字体名字中间有空格的要用“ ”引起来font-size：（字题大小）单位多用px/em单位font-style：（字体倾斜效果）normal（正常）/italic（斜体) /oblique(强制斜体)italic 是使文字倾斜 oblique是使没有倾斜属性的文字倾斜（列如，思源黑体)font-weight：（文字粗细）100~900（从小到大）/lig
复制链接

扫一扫