第五章 CSS层叠样式表(上机).pptVIP

第五章上机CSS层叠样式表

相关回顾1、2、3、

上机目标使用HTML标签选择器使用类选择器使用伪类选择器使用ID选择器和上下文选择器理解并熟悉常用的CSS属性教员讲解上机目标

训练技能点HTML标签选择器类选择器标签的class属性类选择器标签的id属性理解四种锚伪类理解各种上下文理解并掌握常见的CSS属性

阶段1训练技能点HTML标签选择器font-size属性text-align属性font-family属性color属性text-indent属性line-height属性CSS中的注释

阶段1页面中一般会出现多个段落，我们需要统一这些段落的格式，而分别对每个段落提供格式信息非常繁琐；另外六种标题标签的默认格式也不符合我们的期望。我们需要定制段落标签和几种标题标签的外观样式

阶段1使用HMTL标签选择器可告知浏览器页面中的所有段落应如何显示，直接以要重新定义格式的标签名作为选择器的名称。

阶段1head style h1{font-size:28px;text-align:center;font-family:微软雅黑} p{color:black;font-size:14px;text-indent:28px;line-height:20px;} /style/head

9阶段1？共性问题集中讲解

阶段2技能要点类选择器标签的class属性font-size属性font-weight属性border属性color属性background-color属性

阶段2大部分时候，同一种标签的多个实例使用完全相同的样式并不可行。如文本框，单选按钮，复选扭，提交按钮，重置按扭等尽管都是input标签，但我们可能希望它们具有不同的样式。比如我们这样设计：表单中所有用于输入文字的表单元素[不管是文本框还是密码框或者多行文本域]共享相同的一种样式，而所有用于让浏览者点击执行确认动作的按钮[不管是提交按钮还是重置按钮或自定义命令按钮]则共享另一种外观。

阶段2应考虑将页面中的多个元素划归为同一个类，而另一批元素划归为另一个类。使用类选择器可实现样式的分类设置。

阶段2head style .title{font-size:14px;font-weight:bold;} .txt{background-color:#dddddd;border:1pxdashedgreen;} .btn{border:solid1pxgray;color:blue;} /style/headspanclass=title日志标题/spaninputclass=txttype=text/br/spanclass=title日志内容/spantextareaclass=txtcols=40rows=5/textareabr/inputclass=btntype=submitvalue=发表日志/inputclass=btntype=resetvalue=重写日志/

14阶段2？共性问题集中讲解

阶段3创建外部样式表文件，在其中编写关于链接的样式规则。要求：引用了这个外部样式表的网页文档所包含的链接在普通状态，已访问过状态，鼠标悬停状态，激活状态下分别有不同的样式。外部样式表文件与网页文件一样，本质是文本文件，只是扩展名为.css。在它里面通常声明多个网页都要使用的样式规则。在要使用这些样式规则的网页的head/head标签内，使用link/标签来引用外部样式表。

16阶段3？共性问题集中讲解

阶段4页面上的大部分段落的样式为14px和黑色，但某几个段落被包含在一个特定的DIV标签内，对于被这个特定的DIV包含的这些段落，要将它们的样式为12px的字号和灰色文字。可以先对p/p标签定义HTML标签选择器，它会对整个页面中的所有段落都有效。再为特定的div/div标签提供id属性，然后用这个id的值和p这种标签的名称组成上下文选择器。

阶段5理解并熟悉常用的CSS属性背景颜色 background-color背景图片 background-image:url()首行缩进 text-indent字体或字体组 font-family字号大小 font-size水平对齐方式 text-align文字的装饰线 text-decoration文字颜色 color边框 border、border-width、border-style、border-color粗体 font-weight斜体 font-style宽度 width高度 height列表项目编号类型 list-item-style列表项目符号类型 list-item-sytle列表项目标