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

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,CSS层叠样式表,第四章,主要内容,,,,,,,,,,CSS概述,,定义CSS样式表,,CSS常用属性,,,,,CSS关联HTML文档的方式,,,在HTML文档中应用CSS,,HTML标记的不足之处,如果页面中需要设置的文字很多，问题来了： 要在每个地方都重复这段代码吗︖ 如果格式需要修改，怎么办︖ , css标记,HTML标记的不足之处,代码繁琐 格式的一致性差 可维护性差 网页现实效果缺乏动态性与交互性,CSS概述,CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。,CSS ︵Cascading Style Sheet，层叠样式表︶ 是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式，用于控制Web页面的外观。 优点 表现和内容相分离 提高页面浏览速度 效率高、易于维护和改版,CSS概述,样式表和HTML的关系,样式表 ︵StyleSheets︶ 技术诞生于1996年，全称是层叠样式表 ︵Cascading StyleSheets，简称CSS︶ 。那什么是样式呢︖ 样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思︖ 意思是当我们在HTML文件中引用数个定义样式文件 ︵CSS文件︶ 时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。,样式表和HTML的关系,样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。,样式表和HTML的关系,样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。 利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。,样式表的基本结构,样式表的基本结构是怎样的︖ 下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。 首先建立一个简单的HTML文件。, 简单的样式表 样式表 这是一个简单的样式表 ,样式表的基本结构,现在，给这个HTML文件加一些样式表。只需在标签之前插入以下代码： 这样就已经制作出了使用样式表的网页。从浏览器中打开网页 ︵当然首先要保证浏览器支持样式表︶ ，网页显示效果如下图所示。,,,样式表的基本结构,由这个简单的样式表实例，可以看出： 一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。 样式表的核心是规则，样式表的规则如下： 选择符{属性1:值1︔ 属性2:值2} 如，h1{color:green} 这个规则就是告诉浏览器所有标签和之间的文字以绿色显示。 其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名 ︵如color︶ 和属性值 ︵如green︶ 。,应用CSS的步骤,定义样式表 把样式表关联到HTML文档 在HTML文档中应用样式表,定义CSS样式,基本语法: 选择符 {属性名1:属性值1︔ 属性名2:属性值2︔ ᠁ ᠁ },定义CSS样式,,CSS样式,选择符 ︵selector︶ ,属性 ︵properties︶ ,属性值 ︵value︶ ,,,,格式：选择符 { 属性 : 值 },选择符 { 属性1 : 值1︔ 属性2 : 值2 },基本格式：,复合样式：,,,HTML标记符,重新定义了HTML标记符的显示效果 单个“HTML标签”作为选择符 单个“HTML标签” ： body、table、p等等 例：body {color: black},body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,效果：页面主体 ︵body︶ 中的文字为黑色。,,,HTML标记符,属性值由多个单词组成，必须在值上加引号。 例1：p {font-family: “sans serif“},效果：定义了段落字体为sans serif,需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。 例2：p {text-align: center︔ color: red},效果：定义了段落居中排列，并且段落中的文字为红色,HTML选择符示例,为了使所定义的样式表易读，可以采用分行的书写格式。,效果：段落排列居中，段落中文字为黑色，字体是arial,例3： p { text-align: center︔ color: black︔ font-family: arial },HTML选择符示例,选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。 例：h1, h2, h3, h4, h5, h4 { color: green },效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。,p, table{ font-size: 9pt },p { font-size: 9pt } table { font-size: 9pt },,效果：段落和表格里的文字尺寸为9号字 。,例2：,HTML选择符示例, HTML选择符示例 h1{text-align:center︔ font-size:60pt︔ color:blue} 一级标题 二级标题 ,类选择符,把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。 类名为英文单词或以英文开头与数字的组合 例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。,p.right {text-align: right} p.center {text-align: center},应用在不同的段落里，在HTML标签里加入class类参数：, 这个段落向右对齐的 这个段落是居中排列的,类选择符,类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。 例2： .center {text-align: center},效果：定义了.center的类选择符，其表示文字居中排列。,这个标题是居中排列的 这个段落也是居中排列的,可应用到任何元素上。如：使h1元素 ︵标题1︶ 和p元素 ︵段落︶ 都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定：,ID选择符,ID选择符用来对这个单一元素定义单独的样式。 方法：直接以“#”开头，使该ID代表的样式属性可用于各种网页元素。,#intro { font-size:110%︔ font-weight:bold︔ color:#0000ff︔ background-color:transparent },例2：,效果：定义了一条id=“intro “的CSS规则：字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明。,整个网页文档中的每个ID名称必须是唯一的，其必须以一个字母开头，紧跟字母、数字或连字符组成。字母限于A-Z和a-z。,注：,伪类选择符,伪类是一种特殊的类选择符，它最大的用处是可以对链接在不同状态下定义不同的样式效果，写书形式如下： a:link 设置未访问过的超链接格式 a:visited 设置已访问过的超链接格式 a:active 设置活动超链接格式 a:hover 设置悬停状态的超链接格式,伪类选择符示例,a:link{color:green︔ text-decoration:none} a:active{color:blue︔ text-decoration:none} a:visited{color:red︔ text-decoration:underline} a:hover{color:pink︔ font-style:italic},伪类选择符示例,,Div标签,标签可用来定义网页上的一个特定区域，在该区域范围内可包含文字、图形、表格、窗体，甚至其他div等。在标签内的所有内容，都将调用此标签所定义出的样式，且区域与区域间彼此是独立的。 当编写HTML文件，要定义区域间使用不同样式时，就可以使用标签达到这个效果。,Div标签,标签应用于HTML文件，其语法如下： 或者 在使用标记时，可以使用width与height属性设置区域的大小。,Div标签, This is a header This is a paragraph. This is a header This is a paragraph. ,Div标签,NEWS WEBSITE some text. some text. some text. . News headline 1 some text. some text. some text. . News headline 2 some text. some text. some text. . . ,如何在网页中加入css,我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点： ︵1︶ ．将样式表加入到HTML文件行中 ︵2︶ ．将样式表嵌入到HTML文件的文档头中 ︵3︶ ．将一个外部样式表链接到HTML文件上 ︵4︶ ．将一个外部样式表输入到HTML文件中 以上四种方法，可分成内部样式表 ︵前两者︶ 及外部样式表 ︵后两者︶ 两类。,样式位置,内部样式 ︵Embedded styles︶ 链接样式 ︵Linked styles︶ 导入样式,在行内直接加入样式,可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下： ,,内部样式 ︵Embedded styles︶ ,在标签中，用设置style属性的方法，一次只能控制一个标签的样式，实在让人看不出CSS对网页设计有什么特别的效果。在这一节，我们将讲述在文档头嵌入样式表规则的方法，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。 这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如：,内部样式 ︵Embedded styles︶ ,在与之间用style标签加入css样式定义。适用于指定该网页的样式。,,例：, 内部样式举例。 ,type属性是指使用何种语法，”text/css”表示使用CSS语法,,内部样式 ︵Embedded styles︶ ,示例说明 标记用于定义HTML文档内的样式表区域 属性type=text/css：定义文件的类型是样式表文本 ：用于对不支持样式的浏览器隐藏样式表内容 选择符1选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符 样式属性：定义样式的属性名称 优点：有利于统一设置单个网页的格式 缺点：不便统一设置多个网页的格式,链接样式 ︵Linked styles︶ ,在文档头嵌入样式表规则的方法, 这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链接或输入到要运用样式的HTML文件。,链接样式 ︵Linked styles︶ ,这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。,链接样式 ︵Linked styles︶ ,事先建立外部样式表文件 ︵.css︶ ，然后在网页文件的与之间用link标签链接该样式表文件。此法使页面内容与版面设计分开，易于管理整个网站的网页风貌。, 链接样式举例。 ,rel属性是指在页面中使用外部样式表文件,type属性是指使用何种语法,href属性是指样式表文件的URL地址,样式表文件可使用任何文本编辑器打开并编辑， 内容是具体的CSS样式定义，不包括标签。 例如my.css文件的内容如下：,p { color : red },例：,链接样式 ︵Linked styles︶ ,标记用于链接一个外部样式表文件 属性rel=stylesheet：用于定义链接的文件和HTML文档之间的关系 属性type=text/css：定义文件的类型是文本类型的 属性href：用于指定所链接的CSS文件 优点：可设置多个网页的统一格 式，常用于网站,链接样式 ︵Linked styles︶ ,⑴ *.css为预先编写好的样式表文件。 ⑵ 外部样式表文件中不能含有任何像或这样的HTML标签。样式表仅仅由样式表规则或声明组成。 ⑶ 在href属性中可以使用绝对URL或者相对URL。 ⑷ 外部样式表文件中，无须使用注释标签。 ⑸ 如同发布HTML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。,链接样式 ︵Linked styles︶ ,单一的样式可以通过多个样式表给出，例如： 在这个例子中，3个样式表组合成一个“contemporary“样式，要将多个样式表组合成一个单一样式，必须在每个样式表中使用相同的title。,链接样式 ︵Linked styles︶ ,当样式被应用到很多的网页时，采用链接到外部样式表的方式是理想的。网页制作者使用外部样式表可以仅仅通过改变一个文件而改变整个网站的外观；同样，大多数浏览器会保存外部样式表文件到缓冲区，从而提高了显示网页时的速度。,导入样式 ︵Imported styles︶ ,导入样式是指在内部样式定义里，使用@import命令引用事先建立的外部样式表文件。, 导入样式举例。 ,例：,导入样式 ︵Imported styles︶ ,使用@import 来引入CSS外部文件时，需注意：该声明语句必须放在所有样式表的最前面 import语句后的“；”号是必须的。 要输入的样式表文件的扩展名为.css。 优点：可设置多个网页的统一格式，常用于网站,CSS的冲突,当对同一段文本应用多个CSS样式时，由于这些样式之间可能存在一定的矛盾 ︵即冲突︶ ，所以在显示时会出现无法预期的效果 为解决CSS冲突问题，浏览器在显示CSS样式时，一般遵循下页所列出的几个冲突解决规则 当两个不同样式应用于同一段文本时，浏览器将显示这段文本所具有的所有属性，除非定义的两个样式之间有显示上的冲突,CSS的冲突,当来自不同样式的文本属性在应用到同一段文本产生冲突时，浏览器将按照与文本关系的远近来决定显示哪一个属性，近者优先 如果HTML样式与CSS样式存在矛盾时，CSS样式具有较高的优先级。,CSS的冲突,我们介绍了四种样式表的使用方法，这四种方法在使用上各有其特色，但当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢︖ 答案是在行内直接加入样式顺序为最高。至于其他三种的顺序则是一样的，如果其他三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。,CSS的几个特性,1.可以归类CSS的规则 可以多个HTML标签采用同一样式，例： h1,p{font-family:黑体} 这项规则设定所有被和标签包含的网页内容将用黑体显示。,CSS的几个特性,2．样式表的规则具有继承性 样式表的规则可从母体延续到子体，例： b{color:blue} 这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢︖ 这是一个样式表实例 对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。,CSS的几个特性,3．情景选择 如果想让所有斜体显示的文字 ︵即被和标识的文字︶ 都以红色显示，但条件是只有当这些斜体显示的文字出现在通常的段落文字 ︵即被标识的文字︶ 内时。这就需要使用“情景选择”来实现。通过“情景选择”可设定一个可以执行选择说明的情景。,CSS的几个特性,带情景选择的样式表的格式如下： 情景标签 标识符{属性:属性值} 其中的HTML代码： 这是一个样式表实例 这是一个样式表实例 表示只将所有之内斜体显示的文字以红色且大字体显示。所以，之外斜体显示的文字不会以红色显示，而之内的文字则以指定字体显示。,上机练习, ︵1︶ 在网页中使用HTML标记符的style属性来应用CSS样式 ︵行内式︶ ︵2︶ 在网页中使用style标记符来应用CSS样式 ︵内嵌式︶ ︵3︶ 在网页中使用link标记符来应用CSS样式 ︵链接式︶ 使HTML里面的内容的字体变成粗体和红色。,