查看“外部样式表”的源代码
←
外部样式表
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==CSS样式表分类== *行内样式、内嵌样式表、外部样式表 ===行内样式=== *<标记名 style=“样式属性1:属性值1 ;样式属性2:属性值2 ; … ; " > *[[文件:w2-3.png|500px]] ===内嵌样式表=== *内嵌样式表的样子如下: *[[文件:w2-5.png]] === 外部样式表 === *外部样式表——独立的样式表文件 *作用:将样式表单独作为一个文件存放,由网页来引用它,实现了内容结构与外观表现的完全分离。 *[[文件:W2-1.png]] == 外部样式表 VS 内嵌样式 == *在学习外部样式表之前,我们的CSS规则是定义在网页本身的: <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> <style> h2{ color:blue; text-align:center; } p{ color:red; } </style> </head> <body> <h2>这是HTML页面</h2> <hr /> <p>我们在学习HTML+CSS+JavaScript。</p> </body></html></nowiki> *现在有了'''外部样式表''',我们可以把CSS规则单独定义在样式表里: 如下所示,分别在同一目录下建立两个文件:CSS文件和html文件。 === CSS文件文件:c1-all.css === <nowiki>h2{ color:blue; text-align:center; } p{ color:red; }</nowiki> === html文件:h1-1.html === *[[文件:W2-44.png]] *以上红框里的代码,就表示网页本身不在定义样式,而是引用的CSS文件里的。 *这样,CSS样式单独写在一个文件里,就实现了CSS代码和HTML代码的分离。 == CSS代码的多次引用 == *事实上,定义了一个CSS文件后,我们可以在多个html网页中引用它: *如,下面两个文件,就都引用了我们刚才定义的c1-all.css文件,它们的样式是完全一样的。 === CSS文件文件:c1-all.css === <nowiki>h2{ color:blue; text-align:center; } p{ color:red; }</nowiki> === html文件:h1-1.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,这是我们制作的第一个HTML页面。</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> 返回 [[网页设计与开发]]
返回至
外部样式表
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息