accp4.0s2-accp5.0y2转换课程理论部分教学tp1v1.pptxVIP

第一章常见的CSS样式表单中提交数据的方法有那两种及其区别？创建一个登录界面需要哪些表单元素？target属性取值可以为哪些及其含义？回顾 简述样式表的基本结构？常用的样式属性有哪些？预习检查美化“宝贝分类”页面制作并美化“注册”页面本章任务会创建统一外观的字体文本会创建无下划线的超连接样式会创建个性化的表格会创建个性化的表单本章目标HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服外观不同内容相同演示示例1：chapter1课堂案例/1、为什么需要CSS样式表/style_show.htm演示能换皮肤的页面为什么需要CSS样式表样式表能实现内容与样式的分离，方便团队开发内容与样式和谐统一的完整网页美工做样式程序员写代码为什么需要CSS样式表属性属性的值文档样式表开始，类型为CSS样式样式表的基本结构样式规则STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} ……/STYLE声明文档样式表结束样式规则 P {color:red; font-size:30px; font-family:隶书;}选择器样式表的基本语法chapter1课堂案例/2、样式表的基本语法/CSS_regulation2.html查看源代码HTMLHEADTITLE样式规则/TITLESTYLE type=text/css P { color:red; font-family:隶书; font-size:24px;}/STYLE/HEADBODYH2静夜思/H2P床前明月光，/PP疑是地上霜。/PP我是郭德刚，/PP低头思故乡。/P/BODY/HTML本页面中所有的P标签都应用了此样式选择器用分号隔开如何编写此样式?字体类型为律书、大小24px所有的段落都采用P样式，保证风格统一样式表的基本语法如果希望其他的标签也能采用P标签的样式，怎么办？其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。类样式(class)样式规则 STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE.类名样式表的基本语法chapter1课堂案例/2、样式表的基本语法/CSS_regulation3.html查看源代码HEADTITLE样式规则/TITLESTYLE type=text/css .red { color:red; font-family:隶书; }/STYLE/HEADBODYH2 class=red静夜思/H2P class=red床前明月光，/PP class=red疑是地上霜。/PP我是郭德刚，/PP class=red低头思故乡。/P/BODYCLASS类选择器为类选择器定义的样式规则应用类选择器class＝”类名“如何实现这样的样式效果？字体类型都为隶书H2和P标签要应用同一样式样式表的基本语法文本属性要实现如下图所示的文本样式，该如何编写？文本属性说 明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐字体大小16px宋体，字体大小12px使用font-size、font-family、 color实现 常用的样式属性chapter1课堂案例/3、逐一介绍常用的样式属性/text_css.html查看源代码STYLE type=text/cssP { font-size: 12px; font-family: 宋体; text-align:left; }.bigFont { f ont-size: 16px; color:red; }/STYLE/HEADBODY【新闻】[设搜狐为首页] 9月1日 P class=bigFont·世锦赛刘翔12秒95夺冠成就大满贯/PP·我国实施不安全食品召回制度 遏制非法出口/P…..声明P标签样式声明名称为bigFont类样式,它可被多个标签共享应用类样式用class＝”类名“常用的样式属性编写如下图所示效果对应的HTML代码chapter1课堂案例/课堂练习1/xiaojie1_pre.html练习代码黑体，字体大小20pxchapter1课堂案例/课堂练习1/xiaojie1.html练习答案 字体大小14px，蓝色小结1设置背景图像为images文件夹下的type_back1.jpg背景属性STYLE type=text/css …… table { background-image: url(images/type_back1.jpg);