网页基础样式及网页布局_网页样式与布局-CSDN博客

本文链接：https://blog.csdn.net/qq_51745142/article/details/111357228

//文本color 设置文字颜色text-align 文本对齐方式 center居中 left居左 right居右 justify两端对齐text-indent 文本缩进font-size 控制文字大小line-height 当文本的行高和盒子的高度一致时，文本垂直居中//文本的修饰text-decoration 文本修饰none underline下划线 overline上划线 line-through删除线 blink设置文本闪烁font-weight

摘要由CSDN通过智能技术生成

//文本

color 设置文字颜色

text-align 文本对齐方式 center居中 left居左 right居右 justify两端对齐

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
    
				height: 100px;
				width: 100px;
				border: red solid 1px;
			}
			p{
    
				color: blue;
				text-align:1.left 2.center 3.right
			}
		</style>
	</head>
	<body>
		<div>
			<p>兔子诶</p>
		</div>
</body>
</html>

text-align三种方式的结果如下图所示：
在这里插入图片描述

text-indent 文本缩进，常用单位为em或px。常见用法为段落开头需要缩进两个字符。

例子如下：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
    
				height: 100px;
				width: 100px;
				border: red solid 1px;
			}
			p{
    
				color: blue;
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<div>
			<p>兔子诶兔子诶兔子诶兔子诶</p>
		</div>
</body>
</html>

显示结果如下：
在这里插入图片描述
font-size 控制文字大小一般浏览器文字大小一般为16px

line-height 设置行高当文本的行高和盒子的高度一致时，文本垂直居中

//文本的修饰

text-decoration 文本修饰none underline下划线 overline上划线 line-through删除线 blink设置文本闪烁（在大部分浏览器中无法使用）

font-weight 字重 bold加粗 bolder更粗 normal正常值 lighter更细的字体

单位为磅，默认为100-900之间。

font-style 字体风格 normal标准格式 italic倾斜 oblique倾斜（两个倾斜任记一个）

font-family 字体类型后加宋体等等…

复合标签（需要写完整）：font:italic bold 16px/1.5（1.5行高） “黑体”

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#none{
    
				text-decoration: none;/*文本修饰：none*/
			}
			#underline{
    
				text-decoration:underline;/*文本修饰：下划线*/
			}
			#overline{
    
				text-decoration:overline;/*文本修饰：上划线*/
			}
			#line-through{
    
				text-decoration:line-through;/*文本修饰：删除线*/
			}
			#bold{
    
				font-weight:bold ;/*字重：加粗*/
			}
			#bolder{
    
				font-weight:bolder;/*字重：更粗*/
			}
			#weight-normal{
    
				font-weight:normal;/*字重：正常*/
			}
			#ligher{
    
				font-weight:lighter