码迷,mamicode.com
首页 > Web开发 > 详细

CSS字体设置

时间:2015-08-07 23:59:17      阅读:346      评论:0      收藏:0      [点我收藏+]

标签:字体

字体颜色设置: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>

运行的结果

技术分享


</pre><pre name="code" class="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>

运行结果:

<img src="http://img.blog.csdn.net/20150807235228635" alt="" />
</pre><pre name="code" class="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>

运行的结果:

<img src="http://img.blog.csdn.net/20150807235305830" alt="" />


版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS字体设置

标签:字体

原文地址:http://blog.csdn.net/zzy1078689276/article/details/47346497

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!