今天是学习CSS3的第二天,今天天气不错,很晴朗。
之前学了选择器来进行插入文字什么的,就是before、after这样的选择器,
在这样的选择器上,可以进行文字的修饰。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
h2:before{
content:"COLUMN";
color:white;
background-color:orange;
font-family:'Comic Sans MS',Helvetica,sans-serif;
padding:1px 5px;
margin-right:10px;
}
</style>
</head>
<body>
<h2>我国人名</h2>
</body>
</html>
如下图的效果
如果要指定个别元素不进行插入的话,需要用到content属性中的none属性值,
h2.sample:before{
content:none
}
效果如下图所示:
以上好像是CSS2的内容,,CSS3中可以用normal属性值。
下面继续学习,抓紧时间,挤牙膏的方法呀!
除了插入文字,还可以插入图片的,
h2:before{
content:url(Public/images/disk.png);
background-color:white;
}
效果如下图:
为什么要插入呢?插入图像可以很方便,不用编程了,
如下一段代码:
h1.new:after{
content:url(Public/images/printer.png)
}
对于h1这样的标签,class=“new”的就会在后面插入一个图片,表现这个是个特殊的。
如下图所示:
下面再学一招,将alt属性的值作为图像的标题来进行显示,但是这个功能好像只有opera浏览器支持,
先不管这些了,
看看如何使用content属性来插入项目编号吧!
挺简单的,就是自己命名一个计数器,指明那个元素进行计数,然后通过before什么的,把相应计数器文本加载前面。
h1:before{
content:counter(mycounter);
color:blue;
font-size:42px;
}
h1{
counter-increment:mycounter;
}
最终学习成功出来了!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
h2:before{
content:"COLUMN";
color:white;
background-color:orange;
font-family:'Comic Sans MS',Helvetica,sans-serif;
padding:1px 5px;
margin-right:10px;
}
h2.sample:before{
content:none
}
h2:before{
content:url(Public/images/disk.png);
background-color:white;
}
h1.new:after{
content:url(Public/images/printer.png)
}
img:after{
content:attr(alt);
display:block;
text-align:center;
margin-top:5px;
}
h1:before{
content:counter(mycounter);
color:blue;
font-size:42px;
}
h1{
counter-increment:mycounter;
}
div{
text-shadow:-5px 5px 20px gray;
color:navy;
font-size:50px;
font-weight:bold;
font-family:宋体;
}
div.sample{
background-color:#aaff00;
display:inline;
}
span{
background-color:#aaff00;
}
</style>
</head>
<body>
<h2>我国人名</h2>
<h2 class="sample">我不要插入</h2>
<h1 class="new">我是新的!</h1>
<p><img src="Public/images/email_go.png" alt="go,邮件!" /></p>
<h1>大标题</h1>
<p>有一些文字,在这里看看</p>
<h1>大标题</h1>
<p>有一些文字,在这里看看</p>
<h1>大标题</h1>
<p>有一些文字,在这里看看</p>
<div>你好呀,我有阴影!</div>
<div class="sample">div元素</div>
</body>
</html>
效果图如下: