字体颜色设置:color
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
</head>
<style type="text/css">
div{
color: blue;
}
a{
color: red;
}
</style>
<body>
<div><span>Hello World!</span></div>
<a>你好!</a>
<p style="color:#D95624;">11111</p>
</body>
</html>
运行结果:
字体大小设置:font-size
<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
</head>
<style type="text/css">
div{
font-size: 22pt;
}
a{
/*浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素,同时W3C标准推荐的也是em作为字体大小的度量单位*/
font-size: 1em;
}
</style>
<body>
<div>二号字 ,磅值为:22</div>
<a>1em的字体</a>
<p style="font-size: 32px;">32像素的字体</p>
<span style="font-size: 200%">2em的字体</span>
</body>
</html>
运行的结果
字体类型:font-family
<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
</head>
<style type="text/css">
div{
/*仿宋*/
font-family:仿宋_GB2312;
}
a{
/*微软雅黑,宋体*/
font-family : 微软雅黑,宋体;
}
</style>
<body>
<div>仿宋_GB2312</div>
<a>微软雅黑,宋体</a>
<p style="font-family:黑体;">黑体</p>
<span style="font-family: Times New Roman;">Times New Roman</span>
</body>
</html>
运行结果:
其它:
<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
</head>
<style type="text/css">
div{
/*文本斜体显示*/
font-style: italic;
}
a{
/*字体加粗*/
font-weight:bold;
}
</style>
<body>
<a>字体加粗</a>
<div>文本斜体显示</div>
<span style="border-bottom: 1px solid black;">加下划线</span>
</body>
</html>
运行的结果: