第5章 CSS
1
CSS
CSS简介
CSS作用
网页展现的样式从网页中独立出来集中管理
2
CSS
多个网页文件共享样式文件
多个样式文件套用在一个网页文件上
HTML
文件1
HTML
文件N
CSS
样式文件
HTML
CSS
样式文件N
CSS
样式文件1
3
CSS
定义样式格式
选择器{ 规则}
选择器(Selector)
规则(Rule)
4
<html><head> <title>选择符的应用</title></head>
<style type="text/css"> /*定义样式*/
<!--
h2{ color:green;
font-family:楷体;
}
.redfont{font-family:华文彩云;color:red}
{font-family:隶书;color:blue}
#id_olivefont{font-family:楷体;color:olive}
h4#purplefont{font-family:仿宋体;color:purple}
-->
</style>
5
<body>
<h2>显示楷体绿色</h2>
<h3 class=redfont>显示华文彩云红色</h3>
<h4 class=bluefont>显示隶书蓝色</h4>
<h3 id=id_olivefont>显示楷体橄榄绿</h3>
<h4 id=purplefont>显示仿宋体紫色</h4>
</body></html>
6
CSS
应用CSS样式的4种方式
直接定义style属性
在HTML文档内定义内部样式表
嵌入式样式单
外部(链接)样式单
7
样式表应用案例
使用用CSS样式的4种方式显示界面
8
CSS
<html><head>
<title>直接定义HTML标记中的style属性</title>
</head>
<body>
<h1 style="color:green;text-align:center;font-style:
italic;font-family:隶书;font-size:x-large;">
用四种方式将样式表功能应用到Web页面中</h1>
</body></html>
9
CSS
<html><head>
<title>定义内部样式表</title>
<style type="text/css"> /*定义样式*/
<!--
h1{color:green;
text-align:center;
font-style:italic;
font-family:隶书;
font-size:x-large;
}
-->
</style>
</head>
<body>
<h1>用四种方式将样式表功能应用到Web页面中</h1>
</body></html>
10
Web技术应用基础css 来自淘豆网www.taodocs.com转载请标明出处.