1. 首页
  2. IT资讯

干了这么久前端,你有注意到CSS的这个冷知识吗?

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002F228d0699-9d61-4072-96a8-33db20f28e14″ img_width=”227″ img_height=”144″ alt=”干了这么久前端,你有注意到CSS的这个冷知识吗?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E今天要给大家介绍的CSS冷知识是 CSS变量u003Cu002Fpu003Eu003Ch1u003E如何声明CSS变量呢?u003Cu002Fh1u003Eu003Cpreu003E body{u003Cbru003E –pborder:border 1px solid;u003Cbru003E –pcolor:red;u003Cbru003E }u003Cbru003E u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E1.使用 — 声明变量,如上面代码声明了两个变量 pborder 和 pcolor。u003Cu002Fpu003Eu003Cpu003E2.变量名是对大小写敏感的。u003Cu002Fpu003Eu003Ch1u003E如何使用CSS变量呢?u003Cu002Fh1u003Eu003Cpreu003E <style type=”textu002Fcss”>u003Cbru003E body{u003Cbru003E –pborder:1px solid black;u003Cbru003E –pcolor:red;u003Cbru003E }u003Cbru003E .div1 {u003Cbru003E border:var(–pborder);u003Cbru003E background: var(–pcolor);u003Cbru003E height: 100px;u003Cbru003E width: 100px;u003Cbru003E font-size: 30px;u003Cbru003E }u003Cbru003E .div2 {u003Cbru003E border:var(–foo,10px solid #e1968e);u003Cbru003E background: var(–bar, #6e89ff);u003Cbru003E height: 100px;u003Cbru003E width: 100px;u003Cbru003E font-size: 30px;u003Cbru003E }u003Cbru003E <u002Fstyle>u003Cbru003E <div class=”div1″>this is div1<u002Fdiv>u003Cbru003E <div class=”div2″>this is div2<u002Fdiv>u003Cbru003E<u002Fbody>u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F3ec8bf25-a306-4902-9473-eadcd6ceb534″ img_width=”103″ img_height=”99″ alt=”干了这么久前端,你有注意到CSS的这个冷知识吗?” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上面的代码执行结果可以看出:u003Cu002Fpu003Eu003Cpu003E1.使用var()函数读取变量。传入的第一个参数就是变量名。u003Cu002Fpu003Eu003Cpu003E2.var()函数还可以使用第二个参数,如果第一个参数指定的变量名不存在,就是用第二个参数作为默认值。u003Cu002Fpu003Eu003Ch1u003E不同类型的变量值使用时的注意事项u003Cu002Fh1u003Eu003Cpu003E1.变量值为字符串,则可以和其他字符串进行拼接,如:u003Cu002Fpu003Eu003Cpreu003E–bar: ‘hey’;u003Cbru003E–foo: var(–bar)’ you smart’;u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E2.如果变量值是数值,则不能和其他字串拼接,如:u003Cu002Fpu003Eu003Cpreu003E –gap: 20;u003Cbru003E margin: var(–gap)px; u002F* 注意这是无效的 *u002Fu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E如果想要实现上面的功能,可以使用calc函数:u003Cu002Fpu003Eu003Cpreu003E–gap: 20;u003Cbru003Emargin: calc(var(–gap) * 1px);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E3.如果变量值带有单位,就不能写成字符串。u003Cu002Fpu003Eu003Cpreu003Eu002F* 这是无效的!!! *u002Fu003Cbru003E.foo {u003Cbru003E –foo: ’20px’;u003Cbru003E font-size: var(–foo);u003Cbru003E}u003Cbru003Eu002F* 这是有效的!!! *u002Fu003Cbru003E.foo {u003Cbru003E –foo: 20px;u003Cbru003E font-size: var(–foo);u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E变量作用域的问题u003Cu002Fh1u003Eu003Cpu003E同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效。这与 CSS 的”层叠”(cascade)规则是一致的。这里就不再给出例子了。u003Cu002Fpu003Eu003Ch1u003E兼容性检测u003Cu002Fh1u003Eu003Cpu003E在浏览器中,可使用JS检测该浏览器是否支持CSS变量u003Cu002Fpu003Eu003Cpreu003Evar support =u003Cbru003E window.CSS &&u003Cbru003E window.CSS.supports &&u003Cbru003E window.CSS.supports(‘–a’, 0);u003Cbru003Eif (support) {u003Cbru003E u002F* supported *u002Fu003Cbru003E} else {u003Cbru003E u002F* 这里需要做一些兼容性处理 *u002Fu003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003ECSS变量就说到这里啦,希望对大家日后的工作有所帮助。u003Cu002Fpu003Eu003Cpu003EPS:如果这票文章让你学到了一点知识,欢迎点赞并关注我哦,每天一点技术干货,让我陪你在大牛的路上越走越远!!!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:干了这么久前端,你有注意到CSS的这个冷知识吗?

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11238.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code