网站设计——CSS的应用方式和盒子模型

网站设计——CSS的应用方式和盒子模型

ID:44992025

大小:586.00 KB

页数:32页

时间:2019-11-06

网站设计——CSS的应用方式和盒子模型_第1页
网站设计——CSS的应用方式和盒子模型_第2页
网站设计——CSS的应用方式和盒子模型_第3页
网站设计——CSS的应用方式和盒子模型_第4页
网站设计——CSS的应用方式和盒子模型_第5页
资源描述:

《网站设计——CSS的应用方式和盒子模型》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、第六章CSS的应用方式和盒子模型回顾CSS的样式规则中,定义背景颜色的属性是什么?CSS的样式规则中,定义文本居中的属性是什么?提问本章案例熟练使用盒子模型相关属性,改变HTML元素的样式和定位。案例演示本章目标CSS的三种应用方式理解盒子模型学会使用div和span预习检查CSS的应用方式有哪三种?描述盒子模型的外边界属性是什么?Div元素是块元素还是内联元素?提问CSS的三类应用方式外部样式表行内样式表内部样式表内部样式表在区声明的样式表,称为“内部样式表”。内部样式表的特点:仅对本页面有效。内部样式表的缺点:各个页面

2、CSS重复率较高,以后维护起来不方便。内部样式表外部样式表把样式表写在一个以.css为后缀的CSS文件里。有了单独的CSS文件,HTML文档如何引用这个文件呢?演示:外部样式表淘宝网

如何加入“消费者保障服务”?

……标签指定CSS文件的路径推荐使用外部样式表行内样式表如果某个样式规则使用频率不高,只是极个别元素使用,可以

3、把样式定义在元素的标签里。

如何加入“消费者保障服务”?

您可以通过“我的淘宝”->“我是卖家”->“消费者保障服务”申请加入。在申请加入之前请先确认自己是否符合加入消费者保障服务的条件,如果符合申请要求,您可以点击“申请加入”按钮提交申请。

行内样式表三种样式表的特点样式表类型样式表声明作用范围内部样式表在区声明只对本网页的元素有效外部样式表在一个以.css为后缀的CSS文件中可以被多个网页引用,推荐使用。行内样式表在

4、标签内使用sytle属性声明仅对本标签有效,偶尔用用也可以。样式表的“最近原则”p{font-size:18px;color:#ff0000;}……您可以通过“我的……您可以点击“申请加入”按钮提交申请。

外部样式表内部样式表行内样式表第一段、第二段文本的格式分别是什么?如果将外部样

5、式表、内部样式表更换位置,结果又怎样?课堂练习使用外部样式表,实现网页区样式的统一。背景颜色:#CCFFFF宋体,12px为什么要学习盒子模型在CSS中,盒子模型是非常重要的概念。盒子模型可以帮助你实现灵活的排版和一些特效。使用盒子模型的网页盒子模型的结构border-topborder-bottomborder-leftborder-rightContent内容padding-leftpadding-rightpadding-toppadding-bottom盒子盒子所占空间Margin-leftMargin-right

6、Margin-topMargin-bottom盒子模型的属性名称CSS属性边界盒子的上边界Margin-top盒子的右边界Margin-right盒子的下边界Margin-bottom盒子的左边界Margin-left填充内容与盒子上边框之间的距离Padding-top内容与盒子右边框之间的距离Padding-right内容与盒子下边框之间的距离Padding-bottom内容与盒子左边框之间的距离Padding-left盒子模型的属性名称CSS属性边框盒子的上、右、下、左边框的样式Border-top-styleBorder-rig

7、ht-styleBorder-bottom-styleBorder-left-style盒子的上、右、下、左边框的宽度Border-top-widthBorder-right-widthBorder-bottom-widthBorder-left-width盒子的上、右、下、左边框的颜色Border-top-colorBorder-right-colorBorder-bottom-colorBorder-left-color宽度盒子的宽度Width高度盒子的高度Height盒子模型示例效果左填充40px左边界50px上边界50px示例

8、中使用盒子模型的哪些属性?提问绿色虚线边框盒子模型的参考代码p{font-size:14px;color:#0000ff;text-indent:2em;margin-top:

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。