网页设计css样式[优质ppt]
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
章
CSS样式表
回顾
表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？
预习检查
简述样式表的基本结构？ 常用的样式属性有哪些？
美化“宝贝分类” 页面
制作并美化“注 册”页面
本章任务
本章目标
会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单
式效果？字体类型
<H2 class="red">静夜思</H2> 都为隶书
<P class="red">床前明月光，</P>
<P class="red">疑是地上霜。</P>
<P>我是郭德刚，</P>
<P class="red">低头思故乡。</P>
</BODY>
<H2>和<P>标签要应用同一样式
常用的样式属性
为什么需要CSS样式表
HTML标签的外观样式比较单一
颜色只有黑白 字体类型和大小无变化
样式表的作用相当于华丽的衣服
外观不同 内容相同
演示示例1：演示能换皮肤的页面
为什么需要CSS样式表
样式表能实现内容与样式的分离，方便团队开发
美工做样式
内容与样式和谐 统一的完整网页
程序员 写代码
样式表的基本语法
常用的样式属性
查看源代码
<STYLE type="text/css"> P { font-size: 12px;
font-family: "宋体";
声明P标 签样式
text-align:left; } .bigFont { f ont-size: 16px;
声明名称为bigFont类样式, 它可被多个标签共享
backgr}ound-repeat
设置一个指定的图像如何被重复
</STYLE> ……
可re取pe值atr、epree设a像p置te-不xa背、t平-景y铺r图epeat、 no-
演示示例2：使用不同的背景属性
常用的样式属性
方框属性
margin-top 上边界
margin-left 左边界
margin border padding
样式表的基本结构
文档样式表开始， 类型为CSS样式
样式规则
声明文档样 式表结束
<STYLE type="text/css"> P {color:red; font-size:30px; font-family:隶书;} ……
</STYLE>
样式规则
属性
P {color:red; font-size:30px; font-family:隶书;}
margin-right 右边界Baidu Nhomakorabea
padding-left 左填充
margin-bottom 下边界
border-width 边框的宽度
padding-bottom 下填充
方框属性
属性
边界属性
边框属性 填充属性
CSS名称
margin-top margin-right margin-bottom margin-left border-style border-width border-color padding-top padding-right padding-bottom padding-left
其他标签和P标签应该采用相同的样式，所以要为它 们定义一个共享样式。
类样式(class)
<STYLE type="text/css">
样式规则
.red {
.类名
color:red; font-family:"隶书"; font-size:24px; }
……
</STYLE>
样式表的基本语法
查看源代码
文本属性
文本属性 要实现如下图说所明示的文本样式，该如何编写？
font-size
字体大小
font-family
字体类型
font-style
color
宋体te，xt字-a体lign 大小12px
字体样式
字体大
设置或检索文本的小颜1色6px
文本对齐
使用font-size、font-family、 color实现
<<THIETALDE>>样式C规选LA则择S<器S/T类ITLE> <STYLE type="text/css">
为类选择器定 义的样式规则
.red
{ color:red; font-family:"隶书"; }
</STYLE>
应用类选择器
</HEAD>
class＝”类名如“何实现这样的样
<BODY>
color:red; }
</STYLE>
</HEAD>
应用类样式用
<BODY>
class＝”类名“
【新闻】[设搜狐为首页] 9月1日
<P class="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</P>
<P>·我国实施不安全食品召回制度 遏制非法出口</P>
…..
小结1
编写如下图所示效果对应的HTML代码 练习代码
黑体，字体大小20px
练习答案
字体大小14px，蓝色
常用的样式属性
背<S景TY属LE性type="text/css">
……
背景属ta性ble
说明
设置背景图像为 images文件夹下的
type_back1.jpg
backg{ round-color
设置背景颜色
backgroundbb-aaimcckkagggrreoouunndd--irmepaeg设aet置::nu背orl-景(riem图pae像gaet;s/type_back1.jpg);
选择器
属性的值
样式表的基本语法
查看源代码
<HTML>
<HEAD> 选择器 <TITLE>样式规则</TITLE>
<STYLE type="text/css">
本页面中所有的P标 签都应用了此样式
P { color:red; font-family:"隶书"; font-size:24px;}
</STYLE> </HEAD> <BODY>
常用的样式属性
说明
设置对象的上边距 设置对象的右边距 设置对象的下边距 设置对象的左边距 设置边框的样式 设置边框的宽度 设置边框的颜色 设置内容与上边框之间的距离 设置内容与右边框之间的距离 设置内容与下边框之间的距离 设置内容与左边框之间的距离
用分号 隔开
<H2>静夜思</H2>
<P>床前明月光，</P>
如何编写此样式? 字体类型为律书、
大小24px
<P>疑是地上霜。</P> <P>我是郭德刚，</P> <P>低头思故乡。</P>
所有的段落都采用P 样式，保证风格统一
</BODY>
</HTML>
样式表的基本语法
如果希望其他的标签也能采用P标签的样式，怎么办？
CSS样式表
回顾
表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？
预习检查
简述样式表的基本结构？ 常用的样式属性有哪些？
美化“宝贝分类” 页面
制作并美化“注 册”页面
本章任务
本章目标
会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单
式效果？字体类型
<H2 class="red">静夜思</H2> 都为隶书
<P class="red">床前明月光，</P>
<P class="red">疑是地上霜。</P>
<P>我是郭德刚，</P>
<P class="red">低头思故乡。</P>
</BODY>
<H2>和<P>标签要应用同一样式
常用的样式属性
为什么需要CSS样式表
HTML标签的外观样式比较单一
颜色只有黑白 字体类型和大小无变化
样式表的作用相当于华丽的衣服
外观不同 内容相同
演示示例1：演示能换皮肤的页面
为什么需要CSS样式表
样式表能实现内容与样式的分离，方便团队开发
美工做样式
内容与样式和谐 统一的完整网页
程序员 写代码
样式表的基本语法
常用的样式属性
查看源代码
<STYLE type="text/css"> P { font-size: 12px;
font-family: "宋体";
声明P标 签样式
text-align:left; } .bigFont { f ont-size: 16px;
声明名称为bigFont类样式, 它可被多个标签共享
backgr}ound-repeat
设置一个指定的图像如何被重复
</STYLE> ……
可re取pe值atr、epree设a像p置te-不xa背、t平-景y铺r图epeat、 no-
演示示例2：使用不同的背景属性
常用的样式属性
方框属性
margin-top 上边界
margin-left 左边界
margin border padding
样式表的基本结构
文档样式表开始， 类型为CSS样式
样式规则
声明文档样 式表结束
<STYLE type="text/css"> P {color:red; font-size:30px; font-family:隶书;} ……
</STYLE>
样式规则
属性
P {color:red; font-size:30px; font-family:隶书;}
margin-right 右边界Baidu Nhomakorabea
padding-left 左填充
margin-bottom 下边界
border-width 边框的宽度
padding-bottom 下填充
方框属性
属性
边界属性
边框属性 填充属性
CSS名称
margin-top margin-right margin-bottom margin-left border-style border-width border-color padding-top padding-right padding-bottom padding-left
其他标签和P标签应该采用相同的样式，所以要为它 们定义一个共享样式。
类样式(class)
<STYLE type="text/css">
样式规则
.red {
.类名
color:red; font-family:"隶书"; font-size:24px; }
……
</STYLE>
样式表的基本语法
查看源代码
文本属性
文本属性 要实现如下图说所明示的文本样式，该如何编写？
font-size
字体大小
font-family
字体类型
font-style
color
宋体te，xt字-a体lign 大小12px
字体样式
字体大
设置或检索文本的小颜1色6px
文本对齐
使用font-size、font-family、 color实现
<<THIETALDE>>样式C规选LA则择S<器S/T类ITLE> <STYLE type="text/css">
为类选择器定 义的样式规则
.red
{ color:red; font-family:"隶书"; }
</STYLE>
应用类选择器
</HEAD>
class＝”类名如“何实现这样的样
<BODY>
color:red; }
</STYLE>
</HEAD>
应用类样式用
<BODY>
class＝”类名“
【新闻】[设搜狐为首页] 9月1日
<P class="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</P>
<P>·我国实施不安全食品召回制度 遏制非法出口</P>
…..
小结1
编写如下图所示效果对应的HTML代码 练习代码
黑体，字体大小20px
练习答案
字体大小14px，蓝色
常用的样式属性
背<S景TY属LE性type="text/css">
……
背景属ta性ble
说明
设置背景图像为 images文件夹下的
type_back1.jpg
backg{ round-color
设置背景颜色
backgroundbb-aaimcckkagggrreoouunndd--irmepaeg设aet置::nu背orl-景(riem图pae像gaet;s/type_back1.jpg);
选择器
属性的值
样式表的基本语法
查看源代码
<HTML>
<HEAD> 选择器 <TITLE>样式规则</TITLE>
<STYLE type="text/css">
本页面中所有的P标 签都应用了此样式
P { color:red; font-family:"隶书"; font-size:24px;}
</STYLE> </HEAD> <BODY>
常用的样式属性
说明
设置对象的上边距 设置对象的右边距 设置对象的下边距 设置对象的左边距 设置边框的样式 设置边框的宽度 设置边框的颜色 设置内容与上边框之间的距离 设置内容与右边框之间的距离 设置内容与下边框之间的距离 设置内容与左边框之间的距离
用分号 隔开
<H2>静夜思</H2>
<P>床前明月光，</P>
如何编写此样式? 字体类型为律书、
大小24px
<P>疑是地上霜。</P> <P>我是郭德刚，</P> <P>低头思故乡。</P>
所有的段落都采用P 样式，保证风格统一
</BODY>
</HTML>
样式表的基本语法
如果希望其他的标签也能采用P标签的样式，怎么办？