“什么是样式表”的版本间的差异
来自CloudWiki
(→内嵌样式表) |
|||
第20行: | 第20行: | ||
*这种方式标记代码繁琐而且不能共享和移植,一般很少使用。 | *这种方式标记代码繁琐而且不能共享和移植,一般很少使用。 | ||
*试一试:在[http://www.w3school.com.cn/tiy/t.asp?f=html_styles W3C编辑器]试验行内样式 | *试一试:在[http://www.w3school.com.cn/tiy/t.asp?f=html_styles W3C编辑器]试验行内样式 | ||
+ | |||
+ | <nowiki><html> | ||
+ | <head> | ||
+ | <title>样式规则</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | <h2>静夜思</h2> | ||
+ | <p>床前明月光,</p> | ||
+ | <p>疑是地上霜。</P> | ||
+ | <p style="color:red;">我是郭德刚,</P> | ||
+ | <p>低头思故乡。</P> | ||
+ | </body> | ||
+ | </html></nowiki> | ||
===内嵌样式表=== | ===内嵌样式表=== | ||
*内嵌样式表的使用规则如下: | *内嵌样式表的使用规则如下: | ||
第29行: | 第44行: | ||
*[[文件:w2-5.png]] | *[[文件:w2-5.png]] | ||
*试一试:在[http://www.w3school.com.cn/tiy/t.asp?f=html_style W3C编辑器]上将以下网页文件设定为红色字体,字体类型为隶书、大小为24px | *试一试:在[http://www.w3school.com.cn/tiy/t.asp?f=html_style W3C编辑器]上将以下网页文件设定为红色字体,字体类型为隶书、大小为24px | ||
− | <nowiki><html> | + | <nowiki> <html> |
<head> | <head> | ||
<title>样式规则</title> | <title>样式规则</title> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <style type="text/css"> | ||
+ | h2 { | ||
+ | color:blue; | ||
+ | } | ||
+ | |||
+ | p{ | ||
+ | color:red; | ||
+ | font-size:30px; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
第38行: | 第63行: | ||
<p>床前明月光,</p> | <p>床前明月光,</p> | ||
<p>疑是地上霜。</P> | <p>疑是地上霜。</P> | ||
− | <p>我是郭德刚,</P> | + | <p >我是郭德刚,</P> |
<p>低头思故乡。</P> | <p>低头思故乡。</P> | ||
</body> | </body> | ||
第44行: | 第69行: | ||
=== 外部样式表 === | === 外部样式表 === | ||
− | *[[ | + | *外部样式表——独立的样式表文件 |
+ | *作用:将样式表单独作为一个文件存放,由网页来引用它,实现了内容结构与外观表现的完全分离。 | ||
+ | *[[文件:W2-1.png]] | ||
+ | |||
+ | |||
+ | *在学习外部样式表之前,我们的CSS规则是定义在网页本身的: | ||
+ | |||
+ | *现在有了'''外部样式表''',我们可以把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> | ||
+ | |||
+ | |||
=== 样式的混合使用 === | === 样式的混合使用 === |
2018年10月19日 (五) 03:45的版本
目录
CSS样式表简介
- CSS,(英文全称:Cascading Style Sheets),称为层叠式样式表。
- 用于设置网页中文本,图像等各种元素的外观样式及版面布局。
CSS作用和规则
CSS样式表分类
- 行内样式
- 内嵌样式表
- 外部样式表——独立的样式表文件
行内样式
- <标记名 style=“样式属性1:属性值1 ;样式属性2:属性值2 ; … ; " >
- 行内样式使用范围小,只适用于某一个标签,对其他标签不起作用
- 这种方式标记代码繁琐而且不能共享和移植,一般很少使用。
- 试一试:在W3C编辑器试验行内样式
<html> <head> <title>样式规则</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h2>静夜思</h2> <p>床前明月光,</p> <p>疑是地上霜。</P> <p style="color:red;">我是郭德刚,</P> <p>低头思故乡。</P> </body> </html>
内嵌样式表
- 内嵌样式表的使用规则如下:
<HEAD> <STYLE type="text/css"> 样式规则 </ STYLE> </HEAD>
- 试一试:在W3C编辑器上将以下网页文件设定为红色字体,字体类型为隶书、大小为24px
<html> <head> <title>样式规则</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h2 { color:blue; } p{ color:red; font-size:30px; } </style> </head> <body> <h2>静夜思</h2> <p>床前明月光,</p> <p>疑是地上霜。</P> <p >我是郭德刚,</P> <p>低头思故乡。</P> </body> </html>
外部样式表
- 在学习外部样式表之前,我们的CSS规则是定义在网页本身的:
- 现在有了外部样式表,我们可以把CSS规则单独定义在样式表里:
如下所示,分别在同一目录下建立两个文件:CSS文件和html文件。
CSS文件文件:c1-all.css
h2{ color:blue; text-align:center; } p{ color:red; }
html文件:h1-1.html
CSS代码的多次引用
- 事实上,定义了一个CSS文件后,我们可以在多个html网页中引用它:
- 如,下面两个文件,就都引用了我们刚才定义的c1-all.css文件,它们的样式是完全一样的。
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,这是我们制作的第一个HTML页面。</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>
样式的混合使用
下一节 CSS常用属性
返回 网页设计与开发