动态网页制作与编程_3_CSS+DIV

1本次课程主要内容一、CSS简介二、CSS分类三、CSS基本语法四、CSS的文字效果五、CSS的段落文字六、CSS中的图片效果七、CCS控制背景颜色八、表格和表单九、CSS的超链接十、CSS制作实用菜单2一、CSS简介•CSS的概念：CSS（CascadingStyleSheet）层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。•Html的缺陷：繁琐。•引入CSS:exam3_0.html3一、CSS简介•样式解决了一个普遍的问题•HTML标签原本被设计为用于定义文档内容。通过使用h1、p、table这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。•由于浏览器不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。•为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。4一、CSS简介•多重样式将层叠为一个•样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。5二、CSS分类•行内样式•内部样式•链接式–便于维护•导入式–便于维护exam3_0.html6二、CSS分类•链接式和导入式的区别–链接式：会在装载页面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的;导入式：会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页面，闪烁一下之后再出现设置样式后的效果，从浏览者的感受来说，这是导入式的一个缺陷。–对于一些比较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，这样如果使用连接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件，这对于维护工作来说，是一个缺陷，如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立CSS文件；而连接则不具备这个特性。因此给大家的建议是：如果仅需要引入一个CSS文件，则使用连接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。如果希望用javascript来动态决定引入哪个CSS文件，则必须使用连接式才能实现7二、CSS分类•层叠次序–当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？–一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中（4）拥有最高的优先权。（1）浏览器缺省设置（2）外部样式表（3）内部样式表（位于head标签内部）（4）内联样式（在HTML元素内部）–因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。8三、CSS基本语法•CSS的选择器•选择器的声明•选择器的继承9三、CSS基本语法•CSS的选择器–标记选择器–类别选择器–ID选择器•CSS注释–以“/*”开头，以“*/”结尾10标记选择器-一定是html的标准标记styleh2{font:宋体;color:#0000FF;font-size:24px}/style声明标记选择器属性值exam3_0.html11类别选择器——用户自定义style.one{color:#FFFF00;font-size:20px;background:#666666;}/style类别选择器类别选择器的”.”前面如果不加标记选择器，则通用。增加标记选择器则该类只能在此种标记中使用。12ID选择器——用户自定义style#ID{color:#FFFF00;font-size:20px;background:#666666;}/styleID选择器13类别选择器和ID选择器•ID标记不允许同时出现在两段代码中，类别标记可以被多个html控件套用•因为ID标记允许使用在javascript中，如果允许同时使用，则将导致javascript的语法混乱。•如果不是实用javascript，不建议使用ID选择器14三、CSS基本语法•选择器的集体声明–在使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，可以将这些标签集体声明，不同的标签用“,”分开，比如：h1,h2,h3,h4,h5,h6{color:#900;}–把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活。exam3_0.html15三、CSS基本语法•选择器的嵌套#div1pa{color:#900;}–意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色–这样的好处就是不需要在单独的为p标签内的a标签单独定义exam3_0.html16三、CSS基本语法•CSS的继承–半含在内部的标签具有其外部标签的特征，需要指定为其它样式的部分设定在个别元素中即可。17四、CSS的文字效果•文字样式•段落文字•实例18四、CSS的文字效果•字体–font-family属性–可以在样式表中同时使用多种字体，如果浏览器均不支持，则以默认字体显示。•文字大小–font-size属性–可以使用类别选择器进行详细的控制。exam3_1.html19四、CSS的文字效果•文字颜色–color–颜色表示方法color:#000000;color:rgb(50%,10%,10%);color:red;•文字粗细–font-weight•斜体–font-style•normal默认值。浏览器显示一个标准的字体样式。•italic浏览器会显示一个斜体的字体样式。•oblique浏览器会显示一个倾斜的字体样式。•inherit规定应该从父元素继承字体样式。20四、CSS的文字效果•下划线、顶划线、删除线–text-decoration•none默认。定义标准的文本。•underline定义文本下的一条线。•overline定义文本上的一条线。•line-through定义穿过文本下的一条线。•blink定义闪烁的文本。•inherit规定应该从父元素继承text-decoration属性的值。21四、CSS的文字效果•控制英文的大小写exam3_1.html22四、CSS的文字效果•Googleexam3_2.html23五、CSS的段落文字•段落水平对齐•段落垂直对齐•行间距、字间距•首字放大exam3_3.htmlexam3_4.html24五、CSS的段落文字•伪元素：CSS伪元素用于将特殊的效果添加到某些选择器。•伪元素的语法：选择器:伪元素{属性:值}选择器.类:伪元素{属性:值}25六、CSS中的图片效果•图片样式•图片对齐•图文混排•一个实例26六、CSS中的图片效果•图片边框exam3_5.html–boder•图片缩放exam3_6.html–相对大小–绝对大小•图片对齐exam3_7.html–水平对齐–垂直对齐27六、CSS中的图片效果•垂直对齐属性分析vertical-align–baseline默认。元素放置在父元素的基线上。–sub垂直对齐文本的下标。–super垂直对齐文本的上标–top把元素的顶端与行中最高元素的顶端对齐–text-top把元素的顶端与父元素字体的顶端对齐–middle把此元素放置在父元素的中部。–bottom把元素的顶端与行中最低的元素的顶端对齐。–text-bottom把元素的底端与父元素字体的底端对齐。–inherit规定应该从父元素继承vertical-align属性的值。28六、CSS中的图片效果•图文混排–文字环绕•float:left–图片与文字间距•margin29六、CSS中的图片效果•例子exam3_8.html–周润发30七、CCS控制背景颜色•背景颜色：exam3_8.html–background-color•用背景色进行页面分块exam3_9.html31七、CCS控制背景颜色•背景图片exam3_10.html–图片image–重复repeat、repeat-x、repeat-y–不重复no-repeat–位置position–固定背景图片attachment–背景图片拉伸（使用滤镜）32八、表格和表单•表格的相关标记：–tablecaptiontrthtd•表格颜色–boder中的子属性•表格边框–boder•隔行变色–控制奇偶行，改变该行背景色33八、表格和表单样式•表单–表单是一个包含表单元素的区域。•表单元素–允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。•表单使用表单标签form定义。–forminputinput/form34八、表格和表单样式•label定义一个标签•textarea定义文本域(一个多行的输入控件)•select定义一个选择列表–option定义下拉列表中的选项，与select配合•optgroup定义选项组•button定义一个按钮•input定义输入域–input中的type属性定义输入域性质–Ridio、file、submit、password、checkbox35八、表格和表单样式•exam3_11_1.html•exam3_11_2.html36九、CSS的超链接•动态超链接exam3_12_1.html•按钮式超链接exam3_12_2.html•浮雕式超链接exam3_12_3.html37九、CSS定位与div布局•回顾span•div和span用于组织和结构化文档，经常与class或者id一起使用，其本身并不对文档本身添加任何内容，只是为文档添加效果。•span是文本级元素。•div是一个定义区域块的元素。38九、CSS定位与div布局•盒子模型39九、CSS定位与div布局•边框：border•margin作为外空白，描述了边框和边框外其他元素之间的距离。•padding为内空白，是内容（例如文字、图片等）与边框之间的距离。•建议所有尺寸都以象素(px)为单位，包括文字。•背景色和背景图片和边框之间是无法设置空白的。•背景图片在背景色之上，也就是说背景图片可以覆盖背景色。40九、CSS定位与div布局•简单介绍exam3_13.html41九、CSS定位与div布局•定位：–float定位exam3_14.html–position定位：绝对定位（AP元素）•用position属性进行坐标的绝对定位，不受其它相对块影响。–Z-index定位：42十、CSS制作实用菜单•无需表格的菜单–使用ulli实现•菜单的横竖转换•下拉菜单exam3_15_1.htmlexam3_15_2.htmlexam3_15_3.html43学习优秀网站的代码44本次课程总结一、掌握CSS的基本语法二、CSS对文字、图片的处理三、CSS对背景颜色的处理四、CSS对表格的处理五、CSS对表单的处理六、CSS的超链接、菜单45html静态网页总结•页面风格•页面布局•页面元素•熟练使用CSS+div