CSS选择符之通配符,网页中如何用

Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用
CSS 的 page-break-after:always;。

一般没有系统的学习过,只是在网上看一些片断教程的人。见到最多的可能也就是:

<p>第 1 页</p> <div
style=”page-break-after:always;”></div> <p>第 2
页</p> <div style=”page-break-after:always;”></div>
<p>第 3 页</p>

  • 元素选择符(例如:body 、a 、li )
  • ID选择符(例如:#head、#body、#foot)
  • 类选择符(例如:.red、.item、.content)

任何浏览器都支持
page-break-after:always;,但 page-break-after 的其他属性值
left、right、inherit、avoid 则总有一些浏览器不支持。page-break-after
应用于 position 值为 relative 或 static 的非浮动块级元素。元素或父元素的
display 为 none 时,page-break-after 不起作用。

今天我们把所有的选择符统统拿出来说个遍。

上面把 page-break-after 应用在一个空白的
div,使看起来更像一个分页符,其实 page-break-after
应用在当前页的最后一个标签,比如下面的代码:

1)通配符选择符

<p>第 1 页</p> <p style=”page-break-after:always;”>第
1 页</p> <p>第 2 页</p> <p
style=”page-break-after:always;”>第 2 页</p> <p>第 3
页</p> <p>第 3 页</p>

  所谓通配符其实只是一个星号而已,但这么一个简单的星号作用却是很强大的。通配符一般用来对页面所有元素应用样式。

page-break-after 的元素在打印时,必须是可显示的,否则不起作用。

  例如:

相关阅读

    

  • 用样式表实现友好打印

/*将页面中所有元素的内边距和外边距设置为0*/
*
{
    margin:0;
    padding:0;
}

 

在有些情况下,可以对特定元素的所有后代元素(后代元素其实就类似是子元素<p>pppp<strong>strong</strong></p>,strong就是P的后代元素)应用样式。例如,将页面中h1标签所包含的所有后代元素的字体设置为黄色,例如:

 

永利皇宫 1永利皇宫 2代码

<style type=”text/css”>

*{font-size:14px;}
h1{color:blue;}/*将h1下面所有的内容设为蓝色*/
h1 *{color:yellow;}/*将h1下面所有的子标记中的内容设为黄色*/
h1 p *{color:red;}/*将h1下面P标记下面的所有内容设为红色*/
</style>
<h1>h1
<span>h1里面包含个span</span>
<p>h1里面的P<strong>三级strong</strong></p>
</h1>

 

效果如图:

永利皇宫 3

最后关于通配符还有一点想说的就是,效率的问题。通配符把所有标签都要初始化一遍,浏览器的渲染消耗一定的资源。但是我在想,对于这点资源,除非是那种对性能要求极高,否则我认为没必要太刻意在乎,毕竟还是很方便吗!

2)类选择符

  通配符与标签作为选择符确实很强大,也很好用,但涉及的范围太广泛。如果希望同一个标签在不同位置显示不同的样式,那就需要改变选择符的使用方式,否则存在的弊端太多,这个时候就应该考虑换个方式去定义CSs样式。

  类这个概念可能我们大家在C#编程中都接触过,这里提的类选择器其实跟C#中的类是差不多的概念,目的就是体现复用性。减少相同的样式定义多次。

  来看例子:

  

<style type=”text/css”>
永利皇宫 ,div
{
    font-size:14px;
    color:#ff0000;
    text-decoration:underline;
}
</style>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>

 

网站地图xml地图