CSS文本相关属性

最新推荐文章于 2022-10-09 20:12:46 发布

奶恩兔米球邱

最新推荐文章于 2022-10-09 20:12:46 发布

阅读量155

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/qiu199812/article/details/112818133

版权

一.CSS中的长度单位

px和em
px,像素
根据显示器分辨率的不同，像素的大小也是不同的
em,以当前字符的高度为基准
如果当前字体的高度为12px,那么1em就是12px
注意: -般以font-size为准，如果没有定义font-size, 则以浏览器默认大小(16px) 为准

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{ background-color: #FF0000;}
			.w1{ width: 100px;}
			.w2{ text-indent: 2em;}
			.w3{ width: 50%;}
			/* 块级别元素默认是100%，高是自适应 */
		</style>
	</head>
	<body>
		<p class="w1">文字px像素</p>
		<p class="w2">文字em 1个字符宽度 默认字符宽16px</p>
		<p class="w3">文字% 百分比</p>
	</body>
</html>

效果：

二.CSS中的颜色表达

网页中颜色采用RGB模式显示(显示器)

RGB颜色在CSS中的表达方式
1.直接使用颜色的英文单词，如red

注意:很多浏览器不支持颜色的单词表示

2.使用三色的数值，如rgb(120,222,100)

注意:数值在0~255之间

3.使用三色的百分比，如rgb(10%,20%, 100%)
4.使用三色数值的十六进制，如#0000ff

注意:推荐使用这种方式，十六进制值前加#

<html>
	<head>
		<meta charset="utf-8">
		<title>css中的颜色表示</title>
		<style>
			.color1{
				background-color: gold;
			}
			.color2{
				background-color: rgb(255,0,0);
				/* 红，绿，蓝取值范围0-255 */
			}
			.color3{
				background-color: rgb(0%,100%,0%);
				/* 红，绿，蓝取值范围0%-100% */
			}
			.color4{
				background-color: #0000FF;
				/* 位数2 2分割 00红 00绿 ff蓝 */
				/* 取值0-f 16进制 */
			}
			.color5{
				background-color: #ff0;
			}
		</style>
	</head>
	<body>
		<p>1. 英文单词表示</p>
		<p class="color1">只要能写出的颜色单词都可以用</p>
		<p class="color2">2. rgb颜色表示</p>
		<p class="color3">3.通过0-255，百分比表示</p>
		<p class="color4">4. 16进制颜色表示</p>
		<p class="color5">5. 16进制简写</p>
	</body>
</html>

效果：

三.CSS中字体相关样式

1. font 属性

1.1 font-family

字体
可以为文字指定多个字体,不同字体间用",”隔开
字体名字中间有空格的，要用双引号引起来

1.2 font-size

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

效果：

1.3 font-style

字体倾斜效果
normalI正常、oblique和italic倾斜
Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜（强制倾斜）!

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.h1{font-style: normal;}
			.h2{font-style: oblique;}
		</style>
	</head>
	<body>
		<h1 class="h1">文字样式-normol</h1>
		<h1 class="h2">文字样式-italic</h1>
	</body>
</html>

效果：

1.4 font-weight

字体粗细
大多浏览器可以实现:正常和加粗效果

normal	正常
bold	粗体
bolder	加粗体
light	比正常粗体细
100~900	工9个层次，数字越大，字体越粗

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.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>
		<h2 class="w1">文字粗细100</h2>
		<h2 class="w2">文字粗细900</h2>
		<h2 class="w3">文字粗细normol</h2>
		<h2 class="w4">文字粗细lighter</h2>
		<h2 class="w5">文字粗细bold</h2>
		<h2 class="w6">文字粗细bolder</h2>
	</body>
</html>

效果：

1.5 文字的简写

font :样式粗细大小/行高字体家族
font:italic bold 48px/100px “simsun”

2. text 属性

2.1 text-transform

英文字母大小写转换

capitalize	首字母大写
uppercase	全部大写
lowercase	全部小写

2.2 text-decoration

文本的装饰效果

underline	下划线
overline	上划线
line-through	删除线

<html>
	<head>
		<meta charset="utf-8">
		<title></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;}
		</style>
	</head>
	<body>
		<a href="#">normal 正常</a>
		<p class="p3">underline 下划线</p>
		<p class="p4">overline 上划线</p>
		<p class="p5">line-through 删除线</p>
		<h1>文字转换</h1>
	</body>
</html>

效果：

2.3 text-indent

段落内容首行缩进(悬挂缩进)
字词间距

letter-spacing	字母间距(汉字间距)
word-spacing	单词间距
line-height	行间距

注：一般设行间距1.5 ；设置行高，文字有且只有一行文字会垂直居中

2.4 text-align

文本的水平位置

left	左对齐(默认值)
right	右对齐
center	居中对齐
justify	两端强制对齐，最后一行左对齐

2.4 内容溢出处理

overflow:visible (默认) /hidden (超出部分隐藏) /scroll (出现滚动条) /auto (浏览器自动处理)

2.5 文本溢出处理

white-space: nowrap 文字不换行
overflow (内容溢出):visible可见| auto自动（超过出现滚动条）| scroll 不管是否超过都出现滚动条| hidden 超过隐藏
text-overflow(文本溢出):clip 截断 | ellipsis 行尾三个点

<html>
	<head>
		<meta charset="utf-8">
		<title>文本溢出</title>
		<style>
			.myp{ 
				background-color: gold;
				line-height: 100px;
				width: 300px;
				/* 文字不换行 */
				white-space: nowrap;
				/* 内容溢出 */
				overflow: hidden;
				/* 文本溢出 */
				text-overflow:ellipsis
				
				}
			.myp img{
				/* 行内元素垂直对齐 */
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<p class="myp">
			<img src="http://statics.qikuedu.com/qikux/logo.png" alt="" height="20">
			我是一行很长很长的文本56个民族共同组成的统一的多民族国家。
			</p>
	</body>
</html>