根据在HTML文件中CSS样式表的位置, 将CSS文件分为: 头部CSS, 主体CSS, 外部CSS
1. 编写头部CSS
head
<html>
<head>
<style type="text/css">
<!--
h3{color:black; font-size:35px; font-family:黑体}
p{background:yellow; color:red; font-family:宋体}
-->
</style>
<title>编写头部CSS文件</title>
</head>
<body>
<h3 align="center">编写头部CSS文件</h3>
<hr>
<p>
在HTML文件的头部应用内部样式表方法添加CSS.
</p>
</body>
</html>2. 编写主体的CSS
body
<html>
<head>
<title>编写主体CSS文件</title>
</head>
<body>
<center>
<h1 style="color:green;font-size:35px;font-family:黑体">编写主体CSS文件</h1>
</center>
<hr>
<p style="background:cyan;color:red;font-size:25px;font-family:隶书">
在HTML文件的主体应用嵌入式样表方法添加CSS.
</p>
</body>
</html> 3. 编写外部的CSS
(1). 应用链入外部样式表方法在HTML文件内调用外部定义的CSS文件
CSS代码:
<!CSS文件的代码>
<style type="text/css">
<!--
h3{color:black;font-size:35px;font-family:黑体}
p{background:orange;color:blue;font-size:25px;font-family:隶书}
-->
</style>
HTML代码:
Html
<html>
<head>
<title>编写外部CSS文件</title>
<link rel=stylesheet type="text/css" href="niuniu1.css">
</head>
<body>
<h3 align="center">编写外部CSS文件</h3>
<hr>
<p>在HTML文件应用链入外部样式表方法调用外部CSS.</p>
</body>
</html> (2). 应用导入外部样式表方法在HTML文件内调用外部定义的CSS文件
字体的设置font-family: 字体 可以一次定义多个字体.
font-size:字号
font-style:字体样式 normal,italic, oblique(正常,斜体,歪斜体)
font-weight:字体加粗 normal,bold,bolder,lighter,number
font-variant:字体变体 normal,small-caps(英文字体显示为小型的大写字母)
font:组合设置字体属性
font属性是一种复合属性, 可以同时对文字设置多个属性.
基本语法:
font: font-family|font-size|font-style|font-weight|font-variant
如: p{font: italic bold small-caps 15pt/18pt 宋体;} 属性之间要用空格间隔开.
实例:
Code
<html>
<head>
<title>综合设置字体实例</title>
<style type="text/css">
<!--
h3{font-family:黑体;font-size:25px;font-weight:bolder}
.p1{font:italic samll-caps 15pt/20pt 宋体;}
-->
</style>
</head>
<body>
<center>
<h3>CSS基本概念</h3>
</center>
<hr>
CSS(Cascading Style Sheet)即层叠样式表, 简称样式表.<br>
<p class=p1>CSS(Cascading Style Sheet)即层叠样式表, 简称样式表. </p>
</body>
</html>