您的位置:时时app平台注册网站 > web前端 > 你要求知道的多个 CSS 工夫彩世界网址

你要求知道的多个 CSS 工夫彩世界网址

2019-10-11 04:40

您需求明白的多少个 CSS 本事

2013/03/05 · CSS · CSS

英语原稿:Three CSS features you need to know about ,翻译:外刊IT评论

彩世界网址 1

各样浏览器之间的竞争的恐慌意味着越来越多的人今日始发应用这几个补助最新、最初进的W3C Web标准的设备,以一种更具交互性的方式来探访网络。那象征大家算是能够运用更有力越来越灵敏的CSS来成立更轻巧,越来越好敬爱的浏览器前端代码。以后让大家来看一看一些大概你还不明了的令人欢乐的CSS 功效

在CSS中用attr()显示HTML属性值

attr()功效早在CSS 2.1行业内部中就早就出现,但未来才初步普遍流行。它提供了多个神奇的主题在CSS中利用HTML标签上的属性,在众多状态下都能帮您节省了过去须要Javascript管理的进程。

要想使用这些作用,你需求用到三种成分:多个:before 或 :after CSS伪类样式, .content品质,和一个分包你想选用的HTML属性名称的attr()表明式。举个例子,想去突显<h3>标题上的data-prefix个性的值,你能够写成那样:

CSS

h3:before { content: attr(data-prefix) " "; } <h3 data-prefix="Custom prefix">This is a heading</h3>

1
2
3
4
5
h3:before {
    content: attr(data-prefix) " ";
    }
 
    <h3 data-prefix="Custom prefix">This is a heading</h3>

鲜明,那么些例子并不曾显得它有多大用处,只是呈现了它的为主用法。让大家来试贰个更平价的事例,attr()的叁个极好的选择就是当顾客打字与印刷页面时将页面链接彰显出来。为了促成这些,你能够这么写:

CSS

@media print { a:after { content: " (link to " attr(href) ") "; } } <a href=" our home page</a>

1
2
3
4
5
6
7
@media print {
    a:after {
    content: " (link to " attr(href) ") ";
    }
    }
 
    <a href="http://example.com">Visit our home page</a>

假诺您通晓了那些手艺,你就能够吃惊于广大时候它能给您的办事带来的造福!

提示:在新版的CSS3正规中,attr()功效被扩充,可以用在各类CSS标记中。

选拔counter()在列表中自动增多序号

除此以外贰个在CSS 2.1在就已经支撑的功用是counter(),使用它,你能有助于的在页面标题,区块和别的各类一而再出现的页面内容上增加序号。有了它,你就无需限制于只可以采用<ol>来贯彻这几个效应,你能够越来越灵活的在页面上使用自定义数字种类。

驷不比舌正是它的确很轻松:在:before伪类里的content属性参与counter():

CSS

body { counter-reset: heading; } h4:before { counter-increment: heading; content: "Heading #" counter(heading) "."; }

1
2
3
4
5
6
7
8
body {
    counter-reset: heading;
    }
 
    h4:before {
    counter-increment: heading;
    content: "Heading #" counter(heading) ".";
    }

若是您想明白越多关于这几个counter归零和自增方法的学识,请参见关于那些核心的Mozilla
Developer Network页面。里面有个极好的怎么选取嵌套counter的例子。

使用calc()做算术

终极,但不是最不主要的,让大家的话说calc()功用。这一个函数能令你推行简单的算术总计,举个例子总结成分的长度宽度,免去了你写不易维护的Javascript代码。那么些函数扶持具备轻便的为主算术运算,包含加减乘除。

比方说,你想创设几个要素,使它的宽度占满它的父成分,但还要留出一部分像素宽做任何用处:

CSS

.parent { width: 100%; border: solid black 1px; position: relative; } .child { position: absolute; left: 100px; width: calc(90% - 100px); background-color: #ff8; text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }
 
    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }

能够呢,不是吗?更详细的牵线请参见W3C CSS calc 规范。

大家可以更上一层楼清楚的意识,CSS已经成熟到在一些方法可以代替javascript,非常大的简化了web开垦人士的干活。如若您还不上马使用那几个作用,那只能算得在犯傻。

赞 1 收藏 评论

彩世界网址 2

本文由时时app平台注册网站发布于web前端,转载请注明出处:你要求知道的多个 CSS 工夫彩世界网址

关键词: