CSS
CSS,又称层叠样式表,用于渲染HTML元素标签的样式。
我们在创建HTML文档时,如果不使用样式美化页面,就是这个样子的:
使用样式文件排版美化后,就是这样子的:
CSS可以通过以下方式添加到HTML中:
-
内联样式 - 在HTML元素中使用
style
属性 -
内部样式表 - 在HTML文档头部
<head>
区域使用<style>
元素来包含CSS - 外部引用 - 使用外部 CSS 文件
内联样式
在标签中使用样式属性,如下改变段落的字体颜色:
<p style="color:blue;">潘高陪你学编程</p>
内部样式表
对单个文件定义样式,就可以使用内部样式表。在<head>
部分通过 <style>
标签定义内部样式表:
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
<p>潘高陪你学编程</p>
</body>
</html>
外部引用
当同一样式会被多个HTML文档引用时,就应该使用外部样式表。这样,修改一个CSS文件,就可以改变整个网站的外观。
<head>
<link rel="stylesheet" type="text/css" href="/css/mystyle.css">
</head>
当同时使用以上三种方式时,内部样式表
的样式会覆盖 内联样式
,外部引用
的样式会覆盖内部样式表
的样式。
很显然在建站时,更推荐使用外部引用
。将样式文件独立出来,不仅便于统一修改,还减少了冗余代码量。不过,在极个别情况下,选择使用 内部样式表
修改单个HTML文档样式,或使用 内部样式表
修改单个标签的样式,也是很方便的。
JS
JS,即JavaScript ,可以使 HTML 页面具有更强的动态和交互性。
<script>
标签
<script>
标签既可包含脚本语句,也可通过 src
属性指向外部脚本文件。
<script>
document.write("潘高陪你学编程");
</script>
或
<script src="/js/myjs.js"></script>
<noscript>
标签
只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript>
元素中的内容。
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>