CSS 初识_2 结构和层叠值和单位

最新推荐文章于 2022-03-05 09:54:11 发布

DK_bin

最新推荐文章于 2022-03-05 09:54:11 发布

阅读量174

点赞数

分类专栏： IT前端知识学习

本文链接：https://blog.csdn.net/qq_32124881/article/details/80300843

版权

IT前端知识学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、继承

（1）、继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。例如，如果向一个h1元素应用一个颜色,那么这个颜色将应用到h1中所有文本,甚至应用到该h1的元素中的文本。

（2）、边框就不会继承。

（3）、继承的值没有特殊性，限制连0特殊性都没有。需要注意的是，继承的特殊性没有通配符的特殊性高。所以通配符选择器往往有一种短路记成的效果。

2、层叠

P78

（1）、按权重和来源排序

按权重：如果两个样式规则因为到同一个元素，而且其中一个规则有！improtant 标志,这个重要规则将胜出。
考虑规则的来源：如果一个元素与创作人员样式表中的正常权重权重匹配，另外还与读者样式表中的正常权重样式匹配，这会使用创作人员的样式。读者的重要声明 > 创作人员的重要声明 > 创作人员的正常声明 > 读者的正常声明 > 用户代理的声明

（2）、按特殊性排序

这里的特殊性就是权重值的比较

（3）、按顺序排序

后来先到。

3、值和单位

相对长度单位

相对单位之所以得名，是因为他们是根据与其他事物的关系来度量的。所度量的实际距离可能因为不在其控制下的其他因素而改变，如屏幕分辨率，可视范围等方面。三种相对长度单位：em,exhe px

em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

	<div>文字部分的练习，主要是加粗，字号<br>
		<strong>这里练习一下字号的相对大小取值 <br>
			<em>还是字体的大小值</em>
		</strong>
	</div>

div{
	font-size: small;
	font-weight:900;
	width: 200px;
	height:300px;
	background-color: #f40;
}
strong{
	font-size: 1.5em;/*父级字体大小*/
}
em{
	font-size: 1.5em;/*相对于父级的大小*/
}

4、字体

font 语法

font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ]

<' font-style '>：指定文本字体样式

<' font-variant '>：指定文本是否为小型的大写字母

<' font-weight '>：指定文本字体的粗细

<' font-size '>：指定文本字体尺寸

<' line-height '>：指定文本字体的行高

<' font-family '>：指定文本使用某个字体或字体序列

caption：使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）

icon：使用图标标签的字体（CSS2） menu：使用菜单的字体（CSS2）

message-box：使用信息对话框的文本字体（CSS2）

small-caption：使用小控件的字体（CSS2）

status-bar：使用窗口状态栏的字体（CSS2）

5、文本

（1）、text-indent:

text-indent：[ <length> | <percentage> ] && hanging? && each-line?

<length>：用长度值指定文本的缩进。可以为负值。

<percentage>：用百分比指定文本的缩进。可以为负值。

each-line：定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）

hanging：反向所有被缩进作用的行。（CSS3）

 	<div class="xuexi">
 		<P>
 			在学习CSS的过程中，需要知道：这个元素是什么？会有什么样的效果？属于哪个大类？有哪些属性值？有没有特殊需要注意的地方？
 		</P>
 		<p>
 			text-indent属性适合所有的块级元素，不能作用于行级元素。如果图片在行的开始，会随行一起移动。
 		</p>
 		<p class="suojin">
 			这样一个属性值也可以是负值,为了避免字体显示到浏览器之外，添加一个内边距。这样会有一种悬挂的感觉。试试看 吧。这里顺便试一下继承。
 		</p>
 		<p class="baifenbi">
 			更有意思的是，这个还可以设置一个百分数，是相对于父级元素的宽度进行缩进的百分比。现在是缩进40%的效果展示。
 		</p>
	</div>

div.xuexi{
	font-weight: bold;
	width: 200px;
	height: 600px;
	text-indent: 2em;
	background-color: #f45;
}
.xuexi .suojin{
	padding-left: 4em;
	text-indent: -4em;
	background-color: red;
}
.baifenbi{
	text-indent:40%;
}

（2）、text-align: 对齐方式

left：内容左对齐。

center：内容居中对齐。

right：内容右对齐。

justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）

start：内容对齐开始边界。（CSS3）

end：内容对齐结束边界。（CSS3）

match-parent：这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的

<' direction '> 值并计算的，计算值可以是 left 和 right 。

（CSS3） justify-all：效果等同于 justify，但还会让最后一行也两端对齐。（CSS3）

	<p class="zuo">
		text-align 这个属性是文本的对齐方式。这里说的是左对齐。
	</p>
	<p class="right">
		text-align 这个属性对于右对齐的应用。
	</p>
	<p class="center">
		text-align 对于中对齐的应用。		
	</p>
	<p class="justify">
		text-align adfaad fasda gafdg hfgaf
	</p>

div{
	font-weight: bold;
	width: 200px;
	height: 500px;
	background-color: #f40;
}
.zuo{
	text-align: left;
}

.right{
	text-align: right;
}
.center{
	text-align: center;
}
.justify{
	text-align: justify;
}

（3）、text-height: 行高

line-height：normal | <length> | <percentage> | <number>

normal：允许内容顶开或溢出指定的容器边界。

<length>：用长度值指定行高。不允许负值。

<percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。

<number>：用乘积因子指定行高。不允许负值。

<div>
	<p>
		line-height 行高元素  介绍行间距的一个参数。
	</p>
</div>

div{
	font-weight: bold;
	width: 200px;
	height: 500px;
	background-color: #f40;
}
div p{
	font-size: 20px;
	line-height:200%;
}

行间距=line-height-font-size ;

行高的继承问题。line-height 值从父元素继承时，要从父元素上计算，而不是在子元素上计算。

<div>
	<p>
		line-height 行高元素  介绍行间距的一个参数。 <br>
		<em class="xieti">
			这里实验一下line-height 的继承特点
		</em>
	</p>
</div>

div{
	font-weight: bold;
	width: 200px;
	height: 500px;
	background-color: #f40;
}
div{
	font-size: 20px;
	line-height:200%;
}
p{
	line-height: 1em;
}
.xieti{
	line-height: 3em;
}

（4）、文本装饰

text-decoration:

<div>
	<p>
		line-height 行高元素  介绍行间距的一个参数。 <br>
		<em class="xieti">
			这里实验一下text-decoration的特性
		</em>
		<em class="xieti1">
			这里实验一下line-height 的继承特点
		</em>
		<em class="xieti2">
			这里实验一下line-height 的继承特点
		</em>

	</p>
</div>

div{
	font-weight: bold;
	width: 200px;
	height: 500px;
	background-color: #f40;
}
div{
	font-size: 20px;
	line-height:200%;
}
p{
	line-height: 1em;
}
.xieti{
	line-height: 3em;
	text-decoration: underline;
}
.xieti1{
	text-decoration: overline;
}
.xieti2{
	text-decoration: line-through;
}