“外部样式表”的版本间的差异
来自CloudWiki
第5行: | 第5行: | ||
* 实现了内容结构与外观表现的完全分离。 | * 实现了内容结构与外观表现的完全分离。 | ||
== 外部文件示例 == | == 外部文件示例 == | ||
− | === CSS文件:c1- | + | === CSS文件:c1-all.css === |
<nowiki>h2{ color:blue; text-align:center; } | <nowiki>h2{ color:blue; text-align:center; } | ||
p{ color:red; }</nowiki> | p{ color:red; }</nowiki> | ||
− | === html文件:h1- | + | === html文件:h1-1.html === |
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | ||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > | ||
第14行: | 第14行: | ||
<head> | <head> | ||
<title>第一个HTML页面</title> | <title>第一个HTML页面</title> | ||
− | <link type="text/css" rel="stylesheet" href="c1- | + | <link type="text/css" rel="stylesheet" href="c1-all.css" /> |
</head><body> | </head><body> | ||
<h2>这是HTML页面</h2> | <h2>这是HTML页面</h2> | ||
<hr /> | <hr /> | ||
<p>我们在学习HTML+CSS+JavaScript。</p> | <p>我们在学习HTML+CSS+JavaScript。</p> | ||
+ | </body></html></nowiki> | ||
+ | |||
+ | === html文件:h1-2.html === | ||
+ | <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | ||
+ | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml" > | ||
+ | <head> | ||
+ | <title>第二个HTML页面</title> | ||
+ | <link type="text/css" rel="stylesheet" href="c1-all.css" /> | ||
+ | </head><body> | ||
+ | <h2>这是第二个HTML页面</h2> | ||
+ | <hr /> | ||
+ | <p>我们仍在在学习HTML+CSS+JavaScript,越来越明(meng)白(bi)了</p> | ||
</body></html></nowiki> | </body></html></nowiki> | ||
2017年10月22日 (日) 14:45的版本
外部文件的来源
- CSS文件:负责页面格式的装饰
- javascript文件:负责页面点击的动作
外部文件的作用
- 实现了内容结构与外观表现的完全分离。
外部文件示例
CSS文件:c1-all.css
h2{ color:blue; text-align:center; } p{ color:red; }
html文件:h1-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>第一个HTML页面</title> <link type="text/css" rel="stylesheet" href="c1-all.css" /> </head><body> <h2>这是HTML页面</h2> <hr /> <p>我们在学习HTML+CSS+JavaScript。</p> </body></html>
html文件:h1-2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>第二个HTML页面</title> <link type="text/css" rel="stylesheet" href="c1-all.css" /> </head><body> <h2>这是第二个HTML页面</h2> <hr /> <p>我们仍在在学习HTML+CSS+JavaScript,越来越明(meng)白(bi)了</p> </body></html>
下一节 盒子的布局应用举例
返回 网页设计与开发