1、CSS的使用方式
CSS可以通过以下三种方式添加到HTML中:
- 行内样式:在HTML元素中使用"style"属性;
- 内部样式:在HTML文档头部<head>区域,使用<style>元素来包含CSS;
- 外部引用:使用外部CSS文件;
1.1 行内方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-01</title>
</head>
<body>
<p style="color:red;text-align:left;">这是CSS的使用方式(行内样式)。</p>
</body>
</html>
1.2 内部方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-02</title>
<style>
p{
color:red;
text-align:left;
}
</style>
</head>
<body>
<p>这是CSS的使用方式(内部样式)。</p>
</body>
</html>
1.3 外部方式
外部方式是通过<link>标签的href属性引用外部css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-03</title>
<link rel="stylesheet" href="./03.css">
</head>
<body>
<p>这是CSS的使用方式(外部引用)。</p>
</body>
</html>
该示例引用的外部文件为同一目录下的03.css。
/*03.css*/
p{
color:red;
text-align:left;
}
2、JS的使用方式
JS可以通过以下三种方式添加到HTML中:
- 行内方式:在HTML元素中使用事件属性;
- 内部方式:在HTML文档体部<body>区域,使用<script>元素来包含JS;
- 外部引入:在HTML文档头部<head>区域或体部<body>区域,使用<script>元素引入外部JS文件;
2.1 行内方式
在HTML元素中使用事件属性调用JS,如下面案例中的onclick属性,当点击div或a元素,会激发JS函数alert(),弹出相应提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-01</title>
</head>
<body>
<!--行内方式-->
<div onclick="alert('JS的使用方式:行内方式')" style="width:200px;height:100px;background:red;">请点击</div>
<a href="javascript:void(0)" onclick="alert('这是a标签的JS使用方式(行内方式)')">这是一个超链接</a>
</body>
</html>
2.2 内部方式
在HTML文档体部<body>区域,使用<script>元素来包含JS。一般来说,script标签需要放在其调用到的元素下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-02</title>
</head>
<body>
<!--内部方式-->
<div style="width:200px;height:100px;background:red;" id="box">请点击</div>
<script>
var oDiv = document.getElementById('box');
oDiv.onclick = function(){
alert('JS的使用方式:内部方式,script标签需要放在其调用到的元素下方。');
}
</script>
<!--JS行内方式调用内部方式。-->
<p id="BT">
请点击下面的按钮!
</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction()
{
document.getElementById("BT").innerHTML="JS行内方式调用内部方式。";
}
</script>
</body>
</html>
2.3 外部引入
HTML文档既可以在头部<head>也可以在体部<body>其调用到的元素下方引入外部JS文件。为了防止HTML文档在完全加载(就绪)之前运行JS,在头部<head>区域中引入JS文件,文件需要加入window.onload = function(){},所需要引入的语句在{}中编辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-03</title>
<!--外部方式-->
<script src="./03.js"></script>
</head>
<body>
<div style="width:200px;height:100px;background:red;" id="box">请点击!</div>
</body>
</html>
JS文件:
/*在head标签中引入的JS文件03.js*/
window.onload = function () {
var oDiv = document.getElementById('box');
oDiv.onclick = function(){
alert('这是JS的使用方式(内部方式),script标签需要放在body标签的底部。');
};
};
3、CSS与JS的使用方式的比较
行内方式 | 内部方式 | 外部方式 | |
---|---|---|---|
CSS | 在HTML元素中,使用style属性设置CSS样式; | 在<head>区域中,使用<style>标签设置CSS样式; | 在<head>区域中,使用<link>标签的href属性设置CSS样式; |
JS | 在HTML元素中,使用事件属性设置JS; | 在<body>区域中,使用<script>标签设置JS,<script>标签需要放在其调用到的元素下方 | 在<head>区域或<body>区域中,使用<script>标签的src属性设置JS。 |