CSS 字体(font)实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
CSS 字体(font)实例- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
- 轮廓（Outline） 实例
- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01设置文本的字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>01设置文本的字体</title>
<style type="text/css">
body {
background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151207120828824-739848359.jpg);
}
p.serif {font-family: "Times New Roman",Georgia,Serif;}
p.sansserif {font-family: Arial,Verdana,Sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
02设置字体尺寸
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>02设置字体尺寸</title>
<style type="text/css">
body {
background-color: #CCFFFF;
}
h1 {
font-size: 300%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}
</style>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<p>我是一个段落</p>
</body>
</html>
03设置字体风格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>03设置字体风格</title>
<style type="text/css">
body {
background-color: #CCFFFF;
}
h1 {
font-style: normal;
}
h2 {
font-style: italic;
}
p {
font-style: oblique;
}
</style>
</head>
<body>
<h1>One always has time enough, if one will apply it well.</h1>
<h2>One always has time enough, if one will apply it well.</h2>
<p>One always has time enough, if one will apply it well.</p>
</body>
</html>
04设置字体的异体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>04设置字体的异体</title>
<style type="text/css">
body {
background-color: #CCFFFF;
}
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">One always has time enough, if one will apply it well.</p>
<p class="small">One always has time enough, if one will apply it well.</p>
</body>
</html>
05设置字体的粗细
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>05设置字体的粗细</title>
<style type="text/css">
body {
background-color: #CCFFFF;
}
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">Where is the 哈哈 point?</p>
<p class="thick">Where is the 哈哈 point?</p>
<p class="thicker">Where is the 哈哈 point?</p>
</body>
</html>
06所有字体属性在一个声明之内
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>06所有字体属性在一个声明之内</title>
<style type="text/css">
body {
background-color: #CCFFFF;
}
p.sty1 {
font: italic arial, sans-serif;
}
p.sty2 {
font: italic bold 20px/100px arial, sans-serif;
}
</style>
</head>
<body>
<p class="sty1">Where is the 哈哈 point?</p>
<p class="sty2">Where is the 哈哈 point?</br>
(我的大小20px行高100px)</p>
</body>
</html>
CSS字体实例总结
