CSS的all(属性) 笔记

最新推荐文章于 2024-04-21 14:30:45 发布
kfepiza
最新推荐文章于 2024-04-21 14:30:45 发布
阅读量315
点赞数
分类专栏： HTML CSS JS 文章标签： css css3
本文链接：https://blog.csdn.net/kfepiza/article/details/116571158
版权
HTML CSS JS 专栏收录该内容
80 篇文章 2 订阅
订阅专栏
测试代码

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>css的all</title>
<style id="FirstStyleTag">
legend{font-size:30px;}
.FieldsetTestContainer>.Body{width:100px; height:100px; background-color:cyan; }
.FieldsetTestContainer>legend{font-size:20px;}

table{position:relative; border-collapse:collapse; border:1px solid #888888; left:50%; transform:translate(-50%); width:80%; }
caption{font-size:25px; }
thead{background:black; color:white;}
tbody>:nth-child(odd){background-color:#eeeeff;}


</style><script>function dgebi(x){if(x && x.constructor===String)x=document.getElementById(x); return x;} ; function dcept(p,tn){var e=document.createElement(tn); p=dgebi(p).appendChild(e); return e;} ; const FirstStyleTag=dgebi("FirstStyleTag");

const fontFamilyVs=['宋体' , '仿宋' , '微软雅黑' , 'Consolas' , 'Hack' , '"Fira Code"' , 'Source Code Pro' , 'Droid Sans Mono' , 'Source Code Pro' ]

const globalVs=["inherit" , 'initial' , "unset" , "revert"  ];

const displayVs=['inline' , 'block' , 'inline-block' , 'flex' , 'inline-flex' , 'grid' ,' inline-grid' , 'box' , '-webkit-box' , 'inline-box' , '-webkit-inline-box' ]

const positionVs=['static' , 'fixed' , 'absolute' , 'relative' ];

const someVs1=['100px' , 'solid' , 'black' , '40%' , 'center' , 'space-between' , '666' , 'hello' , 'auto' , 'scroll' , 'automatic' ];

function cFieldset010(p,title,headerHtml,cssK,cssVs,footerHtml , 指定测试标签){ p=dgebi(p); var tagName = 指定测试标签; tagName = tagName?tagName:"DIV";
	let f=dcept(p,"fieldset"); f.classList.add("FieldsetTestContainer"); f.id=title;
	let l=dcept(f,"legend"); if(title)l.innerHTML=title;
	let h=dcept(f,"header"); if(headerHtml)h.innerHTML=headerHtml;
	let section=dcept(f,"section"); let code=dcept(section,"code");
	let n=dcept(f,"nav"); n.className="Toolbar"
	let b=dcept(f,tagName); b.className="Body TestingArea";
	let footer=dcept(f,"footer"); if(footerHtml)footer.innerHTML=footerHtml;
	
	dcept(n,"label").innerHTML=cssK+":";
	let btn=dcept(n,"button"); btn.innerHTML="style.cssText=''"; btn.onclick=function(){	b.style.cssText='';	code.innerText=b.style.cssText; 	};
	for(let v of cssVs){let btn=dcept(n,"button"); btn.type="button"; btn.innerHTML=v; btn.onclick=function(){b.style.setProperty(cssK,v);  code.innerText=b.style.cssText; };  };
	
	f.testingSonHtml = function(html){b.innerHTML=html; return f;};
	return f;
}

</script></head><body style="margin:0; font-size:16px; "><header id="BodyHeader"></header><div id="BodyBody">

<nav id="BodyFontFamily"><label>body的font-family:</label></nav>
<nav id="CodeFontFamily"><label>code的font-family:</label></nav>
<script>const BodyFontFamily=dgebi("BodyFontFamily") , CodeFontFamily=dgebi("CodeFontFamily");</script>

<div id="Div010"></div>

<style>.pSonPre>p{white-space:pre-wrap; }</style>
<fieldset class="pSonPre" ><legend>来自MDN的说明</legend>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/all" >mdn的说明链接</a>
<h2>all</h2>
<p>CSS all 简写属性 将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。</p>
<h2>语法</h2>
<p>/* Global values */
all: initial
all: inherit
all: unset

/* CSS Cascading and Inheritance Level 4 */
all: revert;
all 属性is specified as one of the CSS 全局 keyword values. Note that none of these values affect the unicode-bidi 与 direction 这两个属性。</p>
<h2>取值</h2>
<p>initial
该关键字代表改变该元素或其父元素的所有属性至初始值。
inherit
该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited values
unset
该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。
revert (en-US)
指定依赖于声明所属的样式表原点的行为：
User-agent origin
相当于 unset
User origin
将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。
Author origin
将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于revert的目的，“作者”原点包括“覆盖”和“动画”原点。</p>
<h2>正式语法</h2>
<p>initial | inherit | unset | revert</p>
<h2>示例</h2>
<p><big>HTML</big>
&lt;blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
&lt;/blockquote>
Phasellus eget velit sagittis.
<big>CSS</big>
body {
  font-size: small;
  background-color: #F0F0F0;
  color: blue;
}

blockquote {
  background-color: skyblue;
  color: red;
}</p>
</fieldset>

<fieldset><legend>来自W3school的说明和示例</legend>
	<a href="https://www.w3school.com.cn/cssref/pr_all.asp">来自W3school的说明和示例链接</a>
	<h3>定义和用法</h3>
	<p>all 属性将除 unicode-bidi 和 direction 之外的所有属性重置为其初始值或继承的值。</p>
	
	<table>
		<caption>属性值</caption>
		<colgroup><col/>	<col/></colgroup>
		<thead>
			<tr><th>值</th>	<th>描述</th></tr>
		</thead><tbody>
			<tr><td>initial</td>	<td>将此属性设置为其默认值。参阅 initial。</td></tr>
			<tr><td>inherit</td>	<td>从其父元素继承此属性。参阅 inherit。</td></tr>
			<tr><td>unset</td>	<td>如果可继承，则将应用于元素或元素父元素的所有属性更改为其父值，否则将其更改为初始值。</td></tr>
		</tbody>
	</table>

	<fieldset ><legend>W3school示例代码</legend><div id="W3school示例代码"></div></fieldset>
	<fieldset ><legend>W3school示例效果</legend><div id="W3school示例效果">
		<style> 
			#w3schoolex1 {			  background-color: yellow;			  color: red;			}
			#w3schoolex2 {			  background-color: yellow;			  color: red;			  all: inherit;			}
			#w3schoolex3 {			  background-color: yellow;			  color: red;			  all: initial;			}
			#w3schoolex4 {			  background-color: yellow;			  color: red;			  all: unset;			}
		</style>
		<p>未设置 all 属性：</p>
		<div id="w3schoolex1">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
		<p>all: inherit:</p>
		<div id="w3schoolex2">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
		<p>all: initial:</p>
		<div id="w3schoolex3">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
		<p>all: unset:</p>
		<div id="w3schoolex4">Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</div>
	</div></fieldset>
	<script>dgebi("W3school示例代码").innerText = dgebi("W3school示例效果").innerHTML; </script>

</fieldset>

<fieldset><legend>来自菜鸟教程的说明和示例</legend>
	<a href="https://www.runoob.com/cssref/css3-pr-all.html">来自菜鸟教程的说明和示例链接</a>
	<h3>定义和用法</h3>
	<p>all 属性用于重置所有属性，除了 unicode-bidi 和 direction。</p>
	<table>
		<caption>属性值</caption>
		<colgroup><col/>	<col/></colgroup>
		<thead>
			<tr>
				<th>值</th>	<th>描述</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>initial</td>	<td>修改所有元素属性或父元素的值为其初始化值</td>
			</tr>
			<tr>
				<td>inherit</td>	<td>修改所有元素属性或父元素的值为其父元素的值</td>
			</tr>
			<tr>
				<td>unset</td>	<td>修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值</td>
			</tr>
		</tbody>
	</table>

	<fieldset ><legend>菜鸟教程示例代码</legend><div id="菜鸟教程示例代码"></div></fieldset>
	<fieldset ><legend>菜鸟教程示例效果</legend><div id="菜鸟教程示例效果">
		<style> 
			#菜鸟教程ex1 {  background-color: yellow;  color: red;}
			#菜鸟教程ex2 {  background-color: yellow;  color: red;  all: inherit;}
			#菜鸟教程ex3 {  background-color: yellow;  color: red;  all: initial;}
			#菜鸟教程ex4 {  background-color: yellow;  color: red;  all: unset;}
		</style>
		<p>没有 all 属性:</p>
		<div id="菜鸟教程ex1">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
		<p>all: inherit:</p>
		<div id="菜鸟教程ex2">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
		<p>all: initial:</p>
		<div id="菜鸟教程ex3">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>
		<p>all: unset:</p>
		<div id="菜鸟教程ex4">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</div>

		<p><b>注意：</b> Internet Explorer 和 Safari 浏览器不支持 all 属性。</p>
	</div></fieldset>
	<script>dgebi("菜鸟教程示例代码").innerText = dgebi("菜鸟教程示例效果").innerHTML; </script>

</fieldset>






</div><footer id="BodyFooter"></footer><script>const BodyHeader=dgebi("BodyHeader") ,    BodyBody=dgebi("BodyBody") ,    BodyFooter=dgebi("BodyFooter");
ft=cFieldset010;
const Div010 =et=dgebi("Div010"); 
ft(et , "all设置全局4值测试div标签"
,`<h3>前言:</h3>`
,"all",globalVs
,`<h3>总结:</h3>`
).testingSonHtml('hello world');


ft(et , "all设置全局4值和display和position的值测试"
,`<h3>前言:看看all能不能放入其它一些值</h3>`
,"all",[].concat(globalVs).concat(displayVs).concat(positionVs)
,`<h3>总结:all不能放入display和position的值</h3>`
).testingSonHtml('hello world');



ft(et , "all设置全局4值和其它值测试"
,`<h3>前言:看看all能不能放入其它一些值</h3>`
,"all",[].concat(globalVs).concat(someVs1)
,`<h3>总结:all不能放入全局4值以外的这些的值</h3>`
).testingSonHtml('hello world');


ft(et , "all设置全局4值测试p标签"
,`<h3>前言:</h3>`
,"all",globalVs
,`<h3>总结:</h3>`
,"P"
).testingSonHtml('\
这是一个p标签<br/>第二行<br/>第三行\
');



ft(et , "all设置全局4值测试h1标签"
,`<h3>前言:</h3>`
,"all",globalVs
,`<h3>总结:</h3>`
,"h1"
).testingSonHtml('\
这是一个h1标签<br/>第二行<br/>第三行\
');


ft(et , "all设置全局4值测试b标签"
,`<h3>前言:</h3>`
,"all",globalVs
,`<h3>总结:</h3>`
,"b"
).testingSonHtml('\
这是一个b标签<br/>第二行<br/>第三行\
');



ft(et , "all设置全局4值测试em标签"
,`<h3>前言:</h3>`
,"all",globalVs
,`<h3>总结:</h3>`
,"em"
).testingSonHtml('\
这是一个em标签<br/>第二行<br/>第三行\
');



ft(et , "all设置全局4值测试ol li标签"
,`<h3>前言:</h3>`
,"all",globalVs
,`<h3>总结:</h3>`
,"ol"
).testingSonHtml('\
这是一个ol li标签<li>第一行</li><li>第二行</li><li>第三行</li>\
');


</script><style id="LastStyleTag">
body{}
code{font-family:consolas;}
</style><script>const LastStyleTag=document.getElementById("LastStyleTag");
for(let v of fontFamilyVs){ let t;
	t=dcept(BodyFontFamily,"button"); t.type="text"; t.innerHTML=v; t.onclick=function(){LastStyleTag.sheet.cssRules[0].style.setProperty("font-family",v);}
	t=dcept(CodeFontFamily,"button"); t.type="button"; t.innerHTML=v; t.onclick=function(){LastStyleTag.sheet.cssRules[1].style.setProperty("font-family",v);}
}

</script></body></html>
效果截图

在这里插入图片描述
kfepiza
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的all(属性) 笔记

测试代码<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title>css的all</title><style id="FirstStyleTag">legend{font-size:30px;}.FieldsetTestContainer>.Body{width:100px; height:100px; background-co
复制链接

扫一扫