网页设计与制作(6)
—— CSS样式(1)
知识技能目标
1、通过实训项目了解在网页中用css设置优点。
2、通过实训项目了解css的语法结构。
实训内容
1、在网页中css的语法结构
2、用css设置网页的样式
引入
维护困难
标记不足
网页过“胖”
定位困难
--传统HTML的缺陷
引入
实例1:1-
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h2><font color="#0000FF" face="黑体">CSS标记1</font></h2>
<p>CSS标记的正文内容1</p>
<h2><font color="#0000FF" face="黑体">CSS标记2</font></h2>
<p>CSS标记的正文内容2</p>
<h2><font color="#0000FF" face="黑体">CSS标记3</font></h2>
<p>CSS标记的正文内容3</p>
<h2><font color="#0000FF" face="黑体">CSS标记4</font></h2>
<p>CSS标记的正文内容4</p>
</body>
</html>
维护困难
引入
实例2:1-
<html>
<head>
<title>页面标题</title>
<style>
<!--
h2{
font-family:幼圆;
color:red;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<h2>CSS标记1</h2> <p>CSS标记的正文内容1</p>
<h2>CSS标记2</h2> <p>CSS标记的正文内容2</p>
<h2>CSS标记3</h2> <p>CSS标记的正文内容3</p>
<h2>CSS标记4</h2> <p>CSS标记的正文内容4</p>
</body>
</html>
CSS的优势
课堂讲解
CSS样式简介
创建CSS样式
设置CSS样式
管理CSS样式
应用CSS滤镜效果
扩展的CSS支持
CSS样式简介
CSS(Cascading Style Sheets)样式又叫层叠样式,使用它可以对网页中的布局元素,如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用,而且可以用于其他多个页面。
CSS样式简介
使用 CSS样式控制页面的方法:
1、行内样式,1-
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>
<p style="color:#000000; font-style:italic;">正文内容2</p>
<p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>
</body>
</html>
CSS样式简介
2、内嵌式:1-
<html>
<head>
<title>页面标题</title>
<style type="text/css">
<!--
p{ color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;}
-->
</style>
</head>
<body>
<p>紫色、粗体、下划线、25px的效果1</p>
<p>紫色、粗体、下划线、25px的效果2</p>
<p>紫色、粗体、下划线、25px的效果3</p>
</body>
</html>
网页设计6-css 来自淘豆网m.daumloan.com转载请标明出处.
