CSS的all(属性) 笔记
2024-06-11 20:33:17
测试代码
<!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>
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</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>效果截图
CSS的all(属性) 笔记相关推荐
- css列表格式属性,css list-style-type属性笔记
list-style-type属性定义及用法 在css中,list-style-type属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性. 目前,所有主流浏览器都支持list ...
- html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具 font字体 CSS外观属性 快捷操作emmet语法 练习案例-体育页面 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字号 p ...
- 常见的CSS字体样式属性/font-size/font-family/font-weight/font-style/font综合属性/@font-face属性/学习笔记
一.常见的CSS字体样式属性 1.font-size属性:用于设置字体字号 该属性的值有 相对长度单位:em(相对当前对象内文本字体尺寸)px(像素,最常用) 绝对长度单位:in(英寸)cm(厘米)m ...
- 《CSS揭秘》读书笔记
摘要 <CSS揭秘>主要是介绍了使用CSS的技巧,通过47个案例来灵活的使用CSS进行实现,同时在实现过程中注重CSS代码的灵活性与健壮性.通过阅读这本书有利于我们编写高质量的CSS代码以 ...
- 《CSS新世界》读书笔记
前言 本文为<CSS新世界>的读书笔记.推荐去读原著. <CSS新世界>微信读书APP链接:CSS新世界-张鑫旭-微信读书 (qq.com) 1. 尺寸属性值:fit-cont ...
- html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- css文本外观属性中设置字体,css 文本外观属性(text) 和 字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...
- HTML+CSS前端开发学习笔记
HTML+CSS 学习路线: 1.HTML 1.1基础概念 web标准: 基本结构标签: html骨架: <!DOCTYPE>标签:文档类型的声明标签 <!DOCTYPE html& ...
最新文章
- 2017全球大数据产业八领域典型公司盘点分析
- java 非静态语句块_静态初始化代码块与非静态初始化代码块之间的区别是什么？...
- 合理的布局，绚丽的样式，谈谈Winform程序的界面设计
- 透过汇编另眼看世界之DLL导出函数调用
- 有哪些命令行的软件堪称神器？
- 关于eclipse的一些简单配置
- Spring Boot基础学习笔记09：Thymeleaf模板引擎
- 源码安装collectd系统监控和统计工具
- osea/ Overview 概述
- 李宏毅机器学习——概率分类模型
- 冒泡排序详解（Java实现）
- 如何利用极致业务基础平台做一个通用企业ERP之十一销售出库单设计
- linux怎么安装uwf命令,linux实题小练
- Latex论文下载学习教程
- 实战 | Python爬取B站柯南弹幕+Gephi梳理主线剧情
- HDUOJ 1392凸包graham算法
- 自平衡小车TB6612FNG驱动直流电机控制接线介绍
- 识破面试官的套路：十个典型的面试问题剖析
- B模式超声成像仿真(MATLAB k-Wave仿真)
- 央妈是怎么印钱的(1)--资产负债表