CSS3学习 second

最新推荐文章于 2022-07-16 08:12:00 发布

jzwsc

最新推荐文章于 2022-07-16 08:12:00 发布

阅读量764

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/jzwsc/article/details/8933218

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天是学习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>

效果图如下：

jzwsc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3学习 second

今天是学习CSS3的第二天，今天天气不错，很晴朗。之前学了选择器来进行插入文字什么的，就是before、after这样的选择器，在这样的选择器上，可以进行文字的修饰。Insert title hereh2:before{ content:"COLUMN"; color:white; background-color:orange; font-family:'Comi
复制链接

扫一扫