基于.NET的Web应用开发）资源单元2网页设计与制作基础（html+css+js）（3）

1、 *Click To Edit Title Style * *Click To Edit Title Style Click To Edit Title Style* LOGO COMPANY LOGOTYPE INSERTClick To Edit Title Style Click To Edit Title Style* LOGO COMPANY LOGOTYPE INSERT *WEB 应 用 开 发单元2：网站的规划与设计任务2：网页设计与制作根底html+css+js(2)主 要 内 容CSS样式规则1样式的继承与层叠2CSS盒模型3学习目标知识目标：CSS样式的使用方法能力目标：

2、能够使用CSS样式美化网页元素技术应用的背景在HTML文档里使用CSS样式可以美化页面的外观，改变页面的布局。使用外部样式可以解决网站内容与表现别离的问题，另外外部样式表可以极大提高工作效率，能轻松的为网页进行改版或维护。一、CSS简介 1.CSS Cascading Style Sheet 中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容别离的一种标记性语言。CSS 是用于布局与美化网页的CSS 语言是一种标记语言, 因此不需要编译, 可以直接由浏览器执行( 属于浏览器解释型语言)CSS 文件是一个文本文件, 它包含了一些CSS 标记,CSS 文件必须使用css 为文件名后缀

3、CSS 是大小写不敏感的,CSS 与css 是一样 CSS 是由W3C 的CSS 工作组产生和维护的 一、CSS简介2.CSS的作用页面的载入更快 ,可以降低网站的流量费用 使设计师在修改设计时更有效率，而代价更低 使整个站点保持视觉的一致性 使HTML 代码更为清晰、简洁，可更好的被搜索引擎找到和索引,使站点对浏览者和浏览器更具有亲和力 仅仅HTMLHTML+CSSCSS的思想就是首先指定对什么“对象进行设置，然后指定对该对象的哪个方面的“属性进行设置，最后给出该设置的“值。CSS由3个根本局部组成的“对象、“属性和“值。1. CSS规那么CSS文档由一条或多条CSS规那么Rules组成，规

4、那么拥有特定的格式：二、CSS样式规那么二、CSS样式规那么2.CSS单位单位名称说明pc (pica)1 pc=12 point（点）pt (point)1 pt=1/72 inch（英寸）mm(millimeter)亳米cm(centimeter)厘米in (inch)英寸px (pixel)像素，代表计算机屏幕上的一点em表示字体的高度的单位ex表示字体中字母X的高度二、CSS样式规那么行内式：在HTML标签的style属性中写CSS代码嵌入式：在中写CSS代码链接式：使用链接外部CSS文件导入式：使用import指令 import url(mystyle.css“); 3.在HTML中

5、引入CSS样式二、CSS样式规那么4.根本CSS选择器在CSS的3个组成局部中，“对象是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选择器selector。根本CSS选择器有以下四种：标签选择器类别选择器ID选择器伪类选择器1CSS标签选择器用于设定HTML文档中指定标签的显示样式二、CSS样式规那么 演示 h2 font-family:幼圆; color:blue; 这是标题文本 这里是正文内容 这是标题文本 这里是正文内容 这是标题文 这里是正文内容 显示效果二、CSS样式规那么1CSS标签选择器续h2：标题标签所有h2均使用同一种样式2类别选择器给特定的一组CSS代

6、码取名，可以应用于多个不同的标签：二、CSS样式规那么二、CSS样式规那么 class选择器 .red color:red; /* 红色 */ font-size:18px; /* 文字大小 */ .green color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ class选择器1 class选择器2 h3同样适用 类名为red的样式在p元素中应用类名为red的样式类名为green的样式类名为green的样式用在p元素中，也可用在h3元素中。2类别选择器续 同时使用两个class .blue color:blue; /* 颜色 */ .big fo

7、nt-size:22px; /* 字体大小 */ 一种都不使用 两种class，只使用blue 两种class，只使用big 两种class，同时blue和big 一种都不使用 二、CSS样式规那么使用两个类样式，使用空格隔开。2类别选择器续3ID选择器对于页面中独一无二的元素，比方页脚，可以给其id属性赋予一个独一无二的值，用ID选择器给指定ID的元素设置样式。二、CSS样式规那么二、CSS样式规那么 ID选择器 #bold font-weight:bold; /* 粗体 */ #green font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */

8、 ID选择器1 ID选择器2 ID选择器3 ID选择器4 ID名为bold的样式在p元素中应用ID名为bold的样式3ID选择器续二、CSS样式规那么4伪类选择器超链接标签支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这些样式类被称为“伪类pseudo class属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过后呈现的样式a:hover鼠标指针悬停于超链接元素之上时呈现的样式a:active单击超链接时呈现的样式二、CSS样式规那么5.“复合选择器包括：1交集选择器2并集选择器3后代选择器二、CSS样式规那么1交集选择器直接指定特定标记中特定类别

9、或ID的样式。p.special /* 标记.类别选择器 */color:red;p#special /* id选择器 */color:green;注意：选择器字符间不要有空格！二、CSS样式规那么2并集选择器一次定义多个标签或类别或ID的样式div,.special,#one/* 集体声明 */text-decoration:underline;/* 下划线 */注意：以逗号隔开各个选择器3后代选择器选择嵌套在指定元素的内部元素的样式p spancolor:red;注意：以空格分隔选择器二、CSS样式规那么二、CSS样式规那么6.常用CSS属性1CSS 背景属性Background属性 描述

10、background在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。 background-image 设置元素的背景图像。 background-position设置背景图像的开始位置。 background-repeat 设置是否及如何重复背景图像。二、CSS样式规那么2CSS 边框属性Border 属性 描述border在一个声明中设置所有的边框属性。border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的

11、颜色。border-bottom-style设置下边框的样式。border-bottom-width设置下边框的宽度。border-color设置四条边框的颜色。border-left在一个声明中设置所有的左边框属性。border-left-color设置左边框的颜色。border-left-style设置左边框的样式。border-left-width设置左边框的宽度。二、CSS样式规那么2CSS 边框属性Border 续属性 描述border-right在一个声明中设置所有的右边框属性。border-right-color设置右边框的颜色。border-right-style设置右边框的样

12、式。border-right-width设置右边框的宽度。border-style设置四条边框的样式。border-top在一个声明中设置所有的上边框属性。border-top-color设置上边框的颜色。border-top-style设置上边框的样式。border-top-width设置上边框的宽度。border-width设置四条边框的宽度。二、CSS样式规那么3CSS 文本、字体属性Text、Font属性 描述color设置文本的颜色。line-height设置行高。text-align规定文本的水平对齐方式。text-decoration规定添加到文本的装饰效果。text-inden

13、t规定文本块首行的缩进。font在一个声明中设置所有字体属性。font-family规定文本的字体系列。font-size规定文本的字体尺寸。font-style规定文本的字体样式。font-weight规定字体的粗细。二、CSS样式规那么4CSS 外边距、内边距属性Margin、Padding属性 描述margin在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。padding在一个声明中设置所有内边距属性。padding-bottom设置

14、元素的下内边距。padding-left设置元素的左内边距。padding-right设置元素的右内边距。padding-top设置元素的上内边距。二、CSS样式规那么5CSS 列表属性List属性 描述list-style在一个声明中设置所有的列表属性。list-style-image将图象设置为列表项标记。list-style-position设置列表项标记的放置位置。list-style-type设置列表项标记的类型。三、CSS的层叠与继承1.CSS层叠原那么行内样式id样式类别样式标记样式结论：特殊者胜出!没有定义CSS规那么的HTML元素从它的父元素中继承样式！div.fatherc

15、olor:blue;/* 颜色 */text-decoration:underline; /* 下划线 */ 这是父元素内的文本，显示为蓝色加下划线 这是子元素内的文本 使用交集选择器定义样式定义两个嵌套的元素三、CSS的层叠与继承续2.CSS继承原那么四、CSS盒模型1.HTML文档的逻辑结构四、CSS盒模型续marginpaddingBox2.盒模型示意图四、CSS盒模型续2.盒模型示意图续四、CSS盒模型续3. 块元素与行内元素、等是常见的块级block元素标签、等是常见的行内inline元素标签每一个块级元素都定义了一个盒子。与没有特殊的语义，多用于页面布局与排版，因此是网页布局设计中打交道最多的两个标签。四、CSS盒模型续div border-width:6px; border-color:#000000; margin:20px; /*盒子间距*/ padding:5px;/*内容与边界距离*/ background-color:#FFFFCC; border-style:dashed;通过设定盒子的边框和线型可以在页面上清晰地显示出盒子所占用的页面区域。4. 盒模型例如四、CSS盒模型续属性值个数说明2第1个值表示上下边框的属性第2个值表示左右边框的属性3第1个值表示上边框的属性第2个值表示左右边框的属