就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.
在DIV+CSS网页中时常使用html注释与css注释,而各种注释大多作用是在重要代码处加上注释说明注明意思。比如写了一段代码是比较特殊的时常需要改动的CSS代码,为了以后一下即可找到此段代码,这个时候加入CSS 注释加以说明,即可起到说明提示作用
CSS注释语法和例子
/* 注释内容 *//*
注释内容
注释内容
*/ /* ----------文字样式开始---------- */
.dreamduwhite12px
{
color:white
font-size:12px
}
.dreamdublack16px
{
color:black
font-size:16px
}
/* ----------文字样式结束---------- */
注释作用,起到被注释CSS代码样式不生效(不起作用),被注释代码或内容在浏览器中没有任何体现,只具有查看CSS代码时候提示说明备注作用。
第一步:我们需要准备一个图像作为一个例子,我想在深色背景的背景上放置白色文字。
第二步:将图像和字母放在一个div元素中
将图像和字母放在一个div标签中。在示例中,将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签,也可以使用span标签。
1
2
3
4
<div class = "example" >
<img src="image/greatwall.jpg">
<p>万里长城</p>
</div>
第三步:指定position属性
为每个元素设置css的position属性。
对作为父元素的div指定为position:relative,以及对包含该字符串的p标签设置为absolute。img标签不动。
把p标签的位置设置为top:0left:0。
为了把图像放在横向上,请指定为img标签的宽度为width : 100%。
1
2
3
4
5
6
7
8
9
10
11
12
.example{/*父元素div*/
position: relative/*相対定位*/
}
.example p {
position: absolute/*绝対定位*/
color: white/*文字设为白色*/
top: 0
left: 0
}
.example img {
width: 100%
}