CSS字体设置

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

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

时间: 2024-10-12 22:14:49

CSS字体设置的相关文章

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

css 字体样式设置

css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识.以下是我精心整理的css字体样式属性知识,供大家学习参考: css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

超链接字体颜色设置(通过html/css的设置方法)

超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标时的颜色 四中超链接状态分别对应的css属性:a{}.a:hover{} .a:visited{}.a:active{},通常只写a{}.a:hover{}即可,如果你需要其他两种字体颜色设置请参照一下顺序来书写 a{color:red;} a:visited{color:green;} a:hov

CSS中文字体设置

字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈

[css]单/多行居中&amp;字体设置

行高和字号 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. line-height: 40px; 文字,是在自己的行里面居中的.比如,现在文字字号14px,行高是24px.那么: 为了严格保证字在行里面居中,我们的工程师有一个约定: 行高.字号,一般都是偶数.这样,它们的差,就是偶数,就能够被2整除. 单行文本垂直居中 需要注意的是,这个小技巧,行高=盒子高. 只适用于单行文本垂直居中!!不适用于多行. 如果想让多行文本垂

CSS字体无法设置成功的问题

在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误.xp 系统不支持 类似微软雅黑的中文. 方案一: 你可以使用英文来替代. 比如 font-family:"Microsoft Yahei". 方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误.使用 Unicode 写中文字体名称,浏览器是可以正确的解析的. font-family: "\5FAE\8F6F\96C5\9ED1&

CSS字体

CSS字体 导航1.字体类型2.字体大小3.字体样式4.字体粗细 1.字体系列 font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体". 多个字体系列是用一个逗号分隔指明:实例p{font-family:"Times New Roman", Tim

CSS字体大小: em与px、pt、百分比之间的对比

CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争论.找到一个确定的答案是困难的, 因为这个问题,本身就是如此难以回答. 接触这些单位 1.  “Ems”(em):“em”是一个可伸缩的单位, 用于web文档媒体展示.一个em等于当前的字体大小,例如,如果文档的字体大小是12 pt,1 em等于12 pt.Ems在本质上是可伸缩的,所以2 em相当于