ᠰᠦᠯᠵᠢᠶ᠎ᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ html教程--第四章-2.pptx

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,CSS层叠样式表,第四章,主要内容,,,,,,,,,,CSS概述,,定义CSS样式表,,CSS常用属性,,,,,CSS关联HTML文档的方式,,,在HTML文档中应用CSS,,CSS的属性,设置字体样式 控制图文布局 颜色及背景 美化网页与超链接的设置 CSS定位,设置字体样式,字体属性 在网页编写的过程中，若没有对字体做任何设置时，浏览器将以默认值的方式显示。除了可利用HTML的标签设置字体外，还可以利用CSS的font-family属性，设置要使用的字体。 语法： font-family:,.,,设置字体样式,说明： 浏览器将在字体列表中寻找字体1，如果访问者的计算机中安装了这种字体，就使用它；如果没有安装，则移向字体2，如果这种字体也没有安装，则移向第3种字体，以此类推。若浏览器完全找不到指定的字体时，则使用默认字体。因此，应该将一种常见的字体列在字体列表的最后。 在对英文字体进行设置时，如果两个英文单词之间有空格时必须使用单引号 ︵'︶ 或双引号 ︵“︶ 。,设置字体样式,字体风格font-style 在HTML里,可以使用标签,将网页文字设置为斜体。而在CSS里，则可利用font-style属性，达到字体风格的变化。 语法： font-style:normal|italic|oblique font-style参数值说明,设置字体样式,字体变形font-variant 语法： font-variant:normal|small-caps font-variant参数值说明,设置字体样式,字体加粗font-weight 在HTML里，可以利用标签，将文字设置为粗体。在CSS内，则可利用font-weight属性，设置字体的粗细。 语法：font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 font-weight参数值说明,设置字体样式,字号的控制font-size 利用HTML的标签只能设定7种字号，而在CSS中可以使用font-size属性对文字的字号进行随心所欲的设置。 语法： font-size:||| 说明： ⑴ 绝对尺寸可以使用的单位有：in ︵英寸︶ 、cm ︵厘米︶ 、mm ︵毫米︶ 、pt ︵点︶ 和px ︵像素︶ 。,1in = 2.54cm = 25.4 mm = 72pt,设置字体样式,⑵ 如果不喜欢使用绝对尺寸，还可以用关键字来说明文字大小，共有7种关键字，相对应于HTML标签中所用的数字参数。这7种关键字如下： • xx-small • x-small • small • medium • large • x-large • xx-large 利用这些参数，浏览器可以自由决定每一种关键字所适合的尺寸 ︵在不同浏览器中它的大小是有区别的︶ 。,设置字体样式,⑶ 相对尺寸 相对尺寸只有两种larger和smaller。 smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”。而larger参数的作用与smaller类似。 ⑷ 比例尺寸 还可以使用比例参数来设定文字大小，例如： p{font-size:15pt} b{font-size:300%} 这些规则的含义为：使所有包含在中的被标识的文字的尺寸为尺寸设定值的3倍，即45pt。比例参数常用于从母体对象继承参数值。,设置字体样式,注意： 在CSS中设置文字尺寸的单位很多，但有些浏览器对有些尺寸单位是不支持的，在使用时一定要注意。 px单位所有的操作平台都支持它，但因为访问者的屏幕分辨率的不同，网页的显示将可能不稳定，字体可能大也可能小。 pt是确定文字尺寸最好的单位，因为它在所有的浏览器和操作平台上都适用。 关键字这种尺寸单位在不同浏览器中它的大小是有区别的。 低版本的浏览器不支持相对尺寸这种单位。,设置字体样式,文字的更改text-transform 在CSS中通过text-transform属性可以使网页设计者能很容易的控制字母的大小写。 语法：text-transform:uppercase|lowercase|capitalize|none text-transform参数值说明,设置字体样式,文字修饰text-decoration 语法： text-decoration:underline|overline|line-throungh|blink|none text-decoration参数值说明,设置字体样式,字体属性font font属性，可以同时设置许多跟文字有关的属性。例如：字体、字体效果、字号、字体粗细等。 语法： font:font-family||font-style||font-variant||font-weight||font-size,设置字体样式,说明： ⑴ 字体属性主要用作不同字体属性的略写。 ⑵ 可以同时设置多种属性。 ⑶ 属性与属性之间必须利用 ︵︔︶ 分号隔开。 实例： p{font:italic bold 12pt 隶书,宋体} 指定该段为bold ︵粗体︶ 和italic ︵斜体︶ 隶书或宋体，12点大小,1,,控制图文布局,样式表中对图文和布局的控制是指字符、单词和行与行之间是如何定位的，包括如何设定字与字之间、字母之间的距离，以及行距 ︵垂直间距︶ 、文字的对齐方式、边距、边框及浮动对象等。,控制图文布局,设置字间距及字母间距 语法： word-spacing:normal|长度单位 letter-spacing: normal|长度单位 说明： ⑴ Word-spacing用于设置英文单词之间的距离；letter-spacing用于设置英文字母之间的距离。 ⑵ 两者可以使用前面讲到的任何一种长度单位。 ⑶ 如果使用normal参数，将按照浏览器默认设置显示,控制图文布局,设置行距line-height 语法： line-height:normal|数字|长度单位|比例 说明： ⑴ 所用的参数是相邻两行的基准线 ︵基准线就是英文小写字母如x，a的下阶线，但不包括诸如y，g等字母超过下阶线的部分︶ 之间的垂直距离。 ⑵ 所设定的参数取值将完全代替浏览器的默认值。,控制图文布局,实例： 1︶ 用数字设定行距 b{font-size=12pt︔ line-height:2} 表示将利用字号来确定行距，将字号乘以设定的参数值，即12X2=24，所以在本例中行高将是24点。 2︶ 用长度单位设定行距 b{line-height:11pt} 3︶ 用比例设定行距 b{font-size:10pt︔ line-height:140%} 表示行距是文字的基准大小10pt的140%，即14pt,控制图文布局,文字对齐 语法： text-align:left|right|center|justify vertical-align:top|bottom|text-top|text- bottom|baseline|middle|sub|super 说明： ⑴ text-align属性用于文字的水平对齐，但这项属性只用于整块的内容，如、到和等。,控制图文布局,text-align参数值说明,控制图文布局,⑵ vertical-align属性用于控制文字或其他网页对象相对于母体对象的垂直位置。 vertical-align参数值说明,控制图文布局,首行缩进属性text-indent 首行缩进属性通常被用来指定于一个文字段落，第一行文字缩进的距离，而浏览器的默认值不缩进。 语法： text-indent:数字|百分比 说明： 在IE浏览器中使用比例参数时，是相对于整个浏览器窗口的宽度，而不是相对于段落的宽度。,2,,颜色及背景,颜色属性color 语法： color： 实例： h1{color:blue} h2{color:#000080},颜色及背景,背景颜色属性 在CSS里，可利用backgroud-color属性，达到背景颜色的变化。 语法： background-color：|transparent ︵透明︶ 说明：初始值为transparent ︵透明︶ 。 实例： body{background-color:white} h1{background-color:#000080},颜色及背景,背景图像属性 在CSS里，可利用background-image属性，将网页背景以图片的方式显示。 语法： background-image：url ︵地址︶ |none ︵无︶ ,颜色及背景,背景图片重复属性 背景图片重复属性决定一个指定的背景图片如何被重复。 语法：background-repeat：repeat|repeat-x|repeat-y|no-repeat,颜色及背景,固定背景图片属性 固定背景图片属性决定指定的背景图片是跟随内容滚动，还是保持固定。 语法： background-attachment：scroll|fixed 说明： scroll表示滚动，fixed表示固定。初始值为scroll,颜色及背景,背景图片的位置属性 通过背景图片的位置属性background-position可以改变背景图片的最初位置。 语法： background-position：||,颜色及背景,说明： ⑴ 以百分比方法设置background-position属性的语法如下： background-position：x% y% 其中x%代表设置图片的水平位置；y%代表图片的垂直位置。初始值为0% 0%。 实例： P{background-position:70% 50%︔ repeat-y︔ url ︵\pic\sky.jpg︶ 表示背景图片的水平位置为70%，垂直位置为50%,颜色及背景,⑵ 以长度单位设置background-position属性的语法如下： background-position：x y 使用长度单位可以对背景图片的位置作出更精确的控制，可以设定水平和垂直定位起点。 实例： {background-position:70px 10px︔ url ︵\pic\sky.jpg︶ 表示从左起70像素、垂直10像素的位置开始显示图像,颜色及背景,⑶ 以关键字设置background-position属性的语法如下： background-position： [top|center|bottom]||[left|center|right] ︵注：|表示或的意思，||表示二者同时使用，[]表示可搭配使用︶ 实例： {background-position:right top︔ url ︵\pic\sky.jpg︶ 表示背景图片的水平位置为100%，垂直位置为0%,颜色及背景,background-position属性关键字方法的参数值说明,颜色及背景,关键字方法与百分比方法对比表,颜色及背景,背景 语法：background： 允许值：|||| 初始值：未定义 说明：背景属性是一个更明确的背景 — — 关系属性的略写。以下是一些背景的声明： body{background:white url ︵tree.jpg︶ } h1{background:#7fffd4} p{background:url ︵tree.jpg︶ #f0f8ff fixed} table{background:#0c0 url ︵tree.jpg︶ no-repeat bottom right},4,,美化网页,美化网页,滚动条scrollbar的参数说明,美化网页,光标属性的设置cursor 在CSS中，可以通过光标属性cursor来设置光标的图形,例,美化网页,边框的设置 在CSS中，可以通过margin属性、border属性和padding属性控制段落、图片和表格等对象的样式。如：边框的宽度、颜色、样式以及对象与边框之间的空白距离。 上述三种属性通常用于文件段落、图片、表格与网页边界的空白距离，或者是设置表格内的边框及空白样式等，如下图所示,美化网页,,美化网页,margin属性：控制对象边界与文件其他内容的空白距离。 border属性：控制表格四边边框的宽度、颜色及样式。 padding属性：控制表格中的内容或图片与对象边界的空白距离。 1︶ ．边界的设置margin 通过margin属性可以设定对象与四周文字之间的距离。,美化网页,其语法如下： margin- ︵top、right、bootom、left︶ ：长度|百分比|auto 说明： margin属性有margin-top ︵顶部空白区域︶ 、margin-bottom ︵底部空白区域︶ 、margin-left ︵左边空白区域︶ 和margin-right ︵右边空白区域︶ 四个边界属性。通过设置这4项属性，可以控制一个对象四周空白区域的大小。 可以使用任何长度单位。 如将边距设为负值，就可以将两个对象重叠在一起。,美化网页,利用margin属性设置边界值的方法有： 设置一个边界值：若margin属性只设置一个边界值时，则上、右、下和左四个边界都将调用此值。 实例： margin:2cm 设置对应边值：在margin属性中设置对应边值，是指上边界与下边界、左边界与右边界为相对应的边界，所以若设置对应边其中一边的值时，另一边将调用此值。 实例： margin：2cm 4cm 上边界与下边界的值为2cm，左边界与右边界的值为4cm。 设置四个边界值：利用margin属性，顺序输入上、右、下、左边界的值，就可以完成四个边界的设置了。 实例： margin:20pt 30% 30px 2cm 上边界为20pt，右边界为30%，下边界为30px，左边界为2cm。,美化网页,2︶ ．设置边框的宽度border-width 在CSS里，可以利用border-width属性来控制边框的宽度。 语法1： border-width:thin|medium|thick|长度 说明：border-width的参数值thin代表细、medium代表中等、thick代表粗。 语法2： border-top-width:长度 border-bottom-width:长度 border-left-width:长度 border-right-width:长度,美化网页,使用border-width属性设置边框的宽度有4种设置方法： 设置一个值：四条边框宽度均使用同一个设置值。 设置两个值：上边框与下边框宽度调用第一个值，右边框与左边框宽度调用第二个值。 设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框宽度调用第三个值。 设置四个值：四条边框宽度的调用顺序，顺序为上、右、下、左。,美化网页,3︶ ．设置边框的颜色border-color border-color属性用于设置边框的颜色，它的使用方法与border-width相同。 语法1： border-color:#rrggbb border-color:#rrggbb #rrggbb #rrggbb #rrggbb 说明：其中第1种颜色为顶部边框颜色，其中第2种颜色为右边边框颜色，其中第3种颜色为底部边框颜色，其中第4种颜色为左边边框颜色。 语法2： border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb,美化网页,4︶ ．设置边框的样式border-style border-style属性用于设置边框的样式。 其语法设置如下： border- style:none|solid|double|dotted|dashed|groove|ridge|inset|outset,美化网页,border-style属性设置值,美化网页,5︶ ．设置边框属性border 在CSS里，通过border属性可以快速设置边框的宽度、边框颜色及边框样式。其语法如下： border:|||| 实例： border:1pt double #ff0000 设置边框的宽度为1pt、样式为双直线、颜色为红色。6︶ ．内边界的设置padding padding属性主要是控制元素的内容与元素外框内缘的距离。其语法如下： padding- ︵top、right、bottom、left︶ :长度|百分比 说明：其用法与border-color相同。,CSS定位,在和图像的定位是一件很困难的事情。即使使网页上，利用HTML基本标签进行文字用表格标签，也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。 而利用样式表的position属性，就可以精确地设定对象的位置，还能将各对象进行叠放处理。 语法： position:︔ left:︔ top:︔ [width:]︔ [height:]︔ [visibility:值],CSS定位属性,说明： 1︶ position属性用于对象的定位，它的参数值有absolute和relative两种。 其中absolute表示绝对定位，绝对定位能精确设定对象在网页中的独立位置，而不考虑网页中其他对象的定位设置，在绝对定位中对象的位置是相对于浏览器窗口而言的。 而relative表示相对定位。它所定位的对象的位置是相对于不使用定位设置时该对象在文档中所分配的位置。即，相对定位的关键在于被定位的对象的位置是相对于它通常应在的位置而言的。如果停止使用相对定位，则文字的显示位置将恢复正常。 2︶ left属性用于设定对象距浏览器窗口左边的距离；top属性用于设定对象距离浏览器窗口顶部的距离。,CSS定位属性,3︶ width属性用于设定对象的宽度。因为定位后的对象在网页上显示时仍然会从左到右一直显示，利用宽度属性就可以设定对字符向右显示的限制。宽度属性只在绝对定位时使用。 4︶ height属性用于设定对象的高度。高度和宽度的设置类似，只不过是在垂直方向上进行的。 5︶ visibility属性用于设定对象是否显示。这条属性对于被定位和未定位的对象都适用。 该属性的参数有三种： • visible:使对象可以被看见 • hidden:使对象被隐藏 • inherit：对象被继承母体对象的可视性设置,CSS定位属性,例：div{position:absolute︔ left:200px︔ top:40px︔ width:150px} 浏览器执行到这项规则时，它将文字块按照规则规定的效果显示，将段落的最大水平尺寸限制在150像素。,练习案例-航空旅游 案例练习目标：练习使用各种CSS样式。 案例操作要点： 在导航条单元格中，插入表格：行数列数均为1，宽度为100%，ID标识为navi，并输入导航条文字“网站首页 旅游计划 服务中心 联系我们” ︵中间留空格︶ ，并分别建立空链接。 设置导航条复合样式#navi a:link，#navi a:visited属性，字体大小: 12px，颜色#666；设置#navi a:hover属性，颜色#999。,练习案例,直接输入标题文字“︾ 推荐旅游景点”，设置类样式.title属性，字体为仿宋体，大小19px，颜色#597FB4，文本缩进40px，字体粗细bolder。 插入内容表格：行数为4，列数为1，宽度为100%，ID标识为content，拷贝插入两段文字。 设置ID表格样式#content属性，字体大小12px，颜色#666。 将内部样式移动到样式表文件travel中，再将外部样式连接到新网页中。 素材所在位置：教育在线-课件资料，效果如图所示。,练习案例,上机练习,利用CSS对网页进行控制 体验CSS 互联网发展的起源 1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。,上机练习, 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。 ,上机练习,建立样式文件style.css，格式化上面页面，要求： ︵1︶ h1标题字体颜色为白色、背景颜色为蓝色、居中、四个方向的填充值15px ︵2︶ 使文字环绕在图片周围，图片边线：粗细1px,颜色#9999cc，虚线，与周围元素的边界5px ︵3︶ 段落格式：字体大小12px，首行缩进两字符、行高1.5倍行距、填充值5px ︵4︶ 消除网页内容与浏览器窗口边界间的空白、并设置背景色#ccccff ︵5︶ 给两个段落加不同颜色的右边线：3px double red和3px double orange,上机练习,,