相关链接:
css部分
body {
background: #063 url("http://c.hiphotos.baidu.com/image/pic/item/b3b7d0a20cf431ad799ccaf94f36acaf2fdd98a0.jpg") repeat left top;
margin: 200px;
}
p {
}
/*css字体属性定义字体,加粗,大小,文字样式*/
/*
所有css字体属性
font : 在一个声明中设置所有的字体属性
*/
/*
Font特性
font-style : 规定字体样式
normal 标准的字体样式
italic 浏览器会显示一个斜体的字体样式
oblique 浏览器会显示一个倾斜的字体样式
inherit 规定应该从父元素继承字体样式
font-variant : 规定字体异体
normal 标准的字体
small-caps 浏览器会显示小型大写字母的字体
inhert 规定应该从父元素继承font-variant属性值
font-weight : 规定字体的粗细
normal 标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符
lighter 定义更细的字符
100 200 。。。 900 定义由粗到细的字符。400等同于nomal,而700等同于bold
inhert 规定应该从父元素继承字体的粗细
font-size/line-height 规定字体尺寸和行高
font-size 属性值
把字体的尺寸设置为不同的尺寸,从xx-small到xx-large,默认值:medium
xx-small
x-small
small
medium
large fsdaddaasdaasdasadasd daasdasdas
x-large
xx-large
smaller 把font-size 设置为比父元素更小的尺寸
larger 把font-size 设置为比父元素更大的尺寸
length 把font-size 设置为一个固定的值
% 把font-size 设置为基于父元素的一个百分比值
inhert 规定应该从父元素继承字体尺寸
font-family : 规定字体系列
family-name 用于某个元素的字体族名称或/及类族名称的一个优先表
generic-family
inherit 规定应该从父元素继承字体系列
caption : 定义被标题控件(比如按钮、下拉列表等)使用的字体。
icon : 定义被图标标记使用的字体
menu : 定义被下拉列表使用的字体
message-box : 定义被对话框使用的字体
small-caption : caption 字体的小型版本。
status-bar : 定义被窗口状态栏使用的字体
font-style : 指定文本的字体样式
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,
但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
normal 标准的字体
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承font-variant属性值。
font-weight : 指定字体的粗细
*/
/* css字型
* 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif"或"monospace")
* 特定字体系列 - 一个特定的字体系列 (如 "Times" 或 "Courier")
serif Times New Roman / Georgia serif字体中字符在行的额末端拥有额外的装饰
sans-serif Arial / Verdana "Sans"是指无 - 这些字体的末端没有额外的装饰
Monospace Courier New / Lucida Console 所有的等宽字符具有相同的宽度
*/
/*
font-family 属性设置文本的字体系列
font-family属性应该设置而几个字体名称作为一种"后备"机制,如果浏览器不支持这一种字体,
他将尝试下一种字体。
注意: 如果字体系列的名称呢个超过一个字,它必须用引号
*/
p.serif {
font-family:"Times New Roman", Times, serif;
}
p.sansserif {
font-family:Arial, Helvetica, sans-serif;
}
/* 字体样式
主要用于指定斜体文字的字体样式属性
*/
p.normal {
font-style:normal;
}
p.italic {
font-style:italic; /*斜体字*/
}
p.oblique {
font-style:oblique; /*倾斜的文字*/
}
/* 设置字体大小像素*/
h1 {
font-size:40px;
}
h2 {
font-size:30px;
}
p {
font-size:14px;
}
/* 用em来设置字体大小
为了避免Internet Explorer 中无法挑中文本的问题,许多开发者使用em代为代替像素。
1em和当前字体大小相等。可以通过这个公式将像素转换为em
*/
body {
font-size:100%;
}
h1 {
font-size:2.5em; /*40px/16=2.5em*/
}
h2 {
font-size:1.875em; /*30px/16=1.875em*/
}
p {
font-size:0.875em; /*14px/16=o.876em*/
}
/* 设置字体加粗*/
p.light {
font-weight:lighter;
}
p.thick {
font-weight:bold;
}
p.thincker {
font-weight:bolder;
}
/* 设置字体的转变 */
p.smallcaps {
font-variant:small-caps;
}
html 部分
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css练习</title>
<link rel="stylesheet" type="text/css" href="css练习.css">
</head>
<body>
<h1> h1头测试</h1>
<h2> h2头测试</h2>
<p> p测试</p>
<p class="serif">family测试</p>
<p class="sansserif">This is a paragraph, shown in the </p>
<p class="normal">normal字体</p>
<p class="italic">italic字体</p>
<p class="oblique">oblique字体</p>
<p class="light">细字体heheheeheh</p>
<P class="thick">加粗hehehehehe</P>
<p class="thincker">更粗heheheheheeh</p>
<p class="smallcaps">小写转大写,本来小写的尺寸不变flajfakfjGGlfajlFF</p>
</body>
</html>