当前位置:编程学习 > html/css >>

首字下沉与首行样式的如何实现?

首字下沉的效果我们可以用伪对象first-letter,需要与其它一些属性配合使用,font-size、float、padding等。伪对象first-letter参考:http://www.fun52.com/css/p_firstletter.html
我们来看下面的例子:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>suncss.com</title>
<style type="text/css">
<!--
p:first-letter{
 padding: 8px;
 font-size: 36pt;
 float: left;
 color: red;
}
-->
</style>
</head>
<body>
<p>首字下沉的效果;font-size、float、padding属性配合。</p>
</body>
</html>
首行样式我们可以用first-line伪类定义样式。
  关于伪类first-line可以参考:http://www.fun52.com/css/p_firstline.html
我们来看下面的例子:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>suncss.com</title>
<style type="text/css">
<!--
p:first-line{
 color: blue;
 font-size: 20px;
}
-->
</style>
</head>
<body>
<p>Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com Div+CSS XHTML XML 教程大全 - suncss.com </p>
</body>
</html>


补充:Css教程,常用代码 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,