CSS学习总结(1)

来源:转载

1.display和visibility

(1)

div { display: none;}div:hover { display: block;}

(2)

div { visibility: hidden;}div:hover { visibility: visible;}

这两者本质是相同的,不同的是在运行的时候(2)尽管内容没有显示,1但是div的空间依然是保留的;而(1)则不会保留空间显示出空白部分。

2.css选择器的组合形式

(1)div p
两者之间隔了空格,表示descendent的关系,后者是前者的后代。(所有后代)
(2)div>p
用>,表示后者是div的孩子。(孙子则不会被选中)
(3)div+p
表示p是div的相邻的兄弟。

3.使用pseudo-element

可以使用pseudo-element在某个元素的内容前面后者后面加上图片

<!--html--><h1>this is a heading.</h1>
/* css */h1::before { content:url(smile.gif);}

4.常见的一种样式

<body> <h2 style="border-left:12px solid #AA0000; background-color:#EEEEEE;padding:10px 20px;"> This is a heading. </h2></body>

显示的效果是:

分享给朋友:
您可能感兴趣的文章:
随机阅读: