CSS基础知识（五）_css父元素百分比-CSDN博客

本文链接：https://blog.csdn.net/qq_43641432/article/details/101795115

单位

长度单位：

px像素：一个像素相当于屏幕中的一个小点。屏幕实际上是由像素点构成的，但是这些像素点是不能直接看见的。

不同的显示器一个像素的大小也不相同，显示效果越好，像素越小。

百分比：可以将单位设置成一个百分比的形式。浏览器会根据其父元素的样式来计算该值。

使用百分比的好处：当父元素的属性发生变化时，子元素也会按照比例发生变化

在创建一个自适应界面时，经常使用百分比作为单位。

em ：和百分比类似，相对于当前元素字体大小计算的。

一em相当于一个字体的像素。

当字体大小发生改变时，em也会随之改变。（设置字体相关的样式时，使用）

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				
				width:200px;
				height: 200px;
				background-color: red;
			}
			.box1{
				font-size: 1px;
				
				width:10em;
				height: 50%;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
		</div>
		
	</body>

字体的样式（一）：

用color设置字体颜色。

用font-size设置字体大小。---设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中，设置的font-size实际上设置的是格的高度，一般情况下文字都要比格子小，根据字体的不同，显示字体也不同（浏览器默认大小16px）

用fong-family设置字体样式。当采用某种字体时，浏览器支持则使用，不支持则不使用，使用默认字体。--该样式可以同时指定多个字体，浏览器会优先使用前面字体。

<style type="text/css">
			.p1{
				color: #7CFC00;
				font-size: 20px ;
				font-family: "微软雅黑",arial;
			}
		</style>

颜色单位

在css中可以直接只用颜色的单词来表示不同的颜色。

也可以使用rgb值表示不同的颜色。

通过三种不同的颜色浓度来表示出不同的颜色。

颜色浓度可以用0-255之间的值来表示，也可以用%表示

background-color:rgb(161,123,215);

background-color:rgb(10%,20%,70%);

使用16进制的rgb值表示颜色。使用三组两位十六进制数组（每组表示一个颜色）表示颜色。语法#红绿蓝

00-ff 0表示最小，f表示最大

像是两位重复的元素可以简写，#ff0000--->#f00

字体分类

serif（衬线字体）：

sans-serif(非衬线字体)：横平竖直

可以将字体设置为大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式。

一般将字体的大分类指定为font-family中的最后一个字体。

                <p style="font-size: 50;font-family: serif;">衬线字体</p>
		<p style="font-size: 50;font-family: sans-serif;">非衬线字体</p>
		<p style="font-size: 50;font-family: monospace;">等宽字体</p>
		<p style="font-size: 50;font-family: cursive;">草书字体</p>
		<p style="font-size: 50;font-family: fantasy;">虚幻字体</p>

字体的其他样式：

font_style可以用来设置文字的斜体

可选值：normal--->默认值，文字正常显示 italic--->文字会以斜体的样式显示

oblique--->文字会以倾斜的方式显示

font-weight 设置粗体

bold文字加粗显示

bolder文字更粗显示

lighter更细

该样式也可以指定100-900之间的某个值，但是由于计算机一班没那么多级别的字体。

font-variant：设置小型大写字母。

可选值：normal 正常。

small-caps小型大写字母：将所有的字母都以大写形式显示，比大写字母的显示小一点

font

使用该样式可以设置字体相关的所有的样式。可以将所有样式的值统一写在font样式中。不同的值之间使用空格隔开。

使用font设置字体样式时，使用斜体，加粗，小大字母，没有顺序要求，如果不写则使用默认值。但是要求文字的大小和字体必须写

字体必须是最后一个样式大小必须是倒数第二个。

实际上使用简写属性也会有一个比较好的性能。

<style type="text/css">
			.box1{
				width: 100px;
				height:150px;
				background-color: #00FFFF;
				font-style: italic;
				font-weight: bolder; 
			}
			/*
			.p2{
				font-size: 50px;
				font-family: "微软雅黑";
				font-style: italic;
				font-weight: bold;
				font-variant: small-caps;
			}
			*/.p2{
				font:   small-caps 50px "微软雅黑";
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<p style="font-size: 50;font-family: serif;">衬线字体</p>
		<p style="font-size: 50;font-family: sans-serif;">非衬线字体</p>
		<p style="font-size: 50;font-family: monospace;">等宽字体</p>
		<p style="font-size: 50;font-family: cursive;">草书字体</p>
		<p style="font-size: 50;font-family: fantasy;font-weight: bold;">虚幻字体</p>
		<p style="font-variant: small-caps;">answefcefgvw</p>
		<div class="p2">
			<p>时间都去哪了！下雨了 absjs</p>
		</div>

行高

行间距：= 行高-字体大小

在css中并没有直接设置行间距的方式，只能通过设置行高，间接设置

使用line-height间接设置行高

使用百分数表示：相对于字体去计算行高。

可以直接传一个正整数：1表示一倍行高。行高会设置为字体大小相应的倍数。

对于单行文本来说，可以将行高设置为和父元素的高度一样，这样可以使单行文本在父元素中垂直居中。

在字体大小后也可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值。

.p1{
				line-height: 40px;
				
			}

文本样式

text-transform设置文本的大小写

可选值：

none 默认值---不做任何处理

capitalize 单词的首字母大写（通过空格来识别单词的）

uppercase 所有的字母都大写

lowercase 所有的字母都小写

	text-transform: capitalize;

text-decoration 文本修饰--给文本上方下方添加线

可选值：

none 不作任何改变

underline 定义下划线

overline 定义上划线

line-through 定义一条穿过文本的线（删除线）---（超链接会默认添加下划线）

.p1{
				line-height: 40px;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				line-height: 100px;
				text-decoration: line-through; 
			}
			.p1{
				font: 30px/50px "微软雅黑";
			}
			a{
				text-decoration: none;/*去除下划线*/
			}