第6讲 样式表.ppt
( 4.5 )《第6讲 样式表.ppt》由会员分享，可在线阅读，更多相关《第6讲 样式表.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第6讲样式表样式表CSS概念概念n n定义及使用定义及使用n n定义样式表的语法定义样式表的语法n n选择符选择符(Selector)规则规则(Rule)表表其中其中 n n选择符选择符:要引用样式的对象，可以是一个或要引用样式的对象，可以是一个或多个多个HTML标记（标记之间用标记（标记之间用,分开）分开）n n规则表规则表:一个或多个样式属性组成样式规则，一个或多个样式属性组成样式规则，属性之间用，分开，属性定义的格式是：属性之间用，分开，属性定义的格式是：样式名样式名:值值 引用样式表引用样式表n n连接到外部样式表。连接到外部样式表。连接到外部样式表。连接到外部样式表。n n将样式表定
2、义为一个独立的将样式表定义为一个独立的将样式表定义为一个独立的将样式表定义为一个独立的CSSCSS样式文件，在样式文件，在样式文件，在样式文件，在HTMLHTML文件头部用标记连接该样式文件。文件头部用标记连接该样式文件。文件头部用标记连接该样式文件。文件头部用标记连接该样式文件。linklink标标标标记的属性如下：记的属性如下：记的属性如下：记的属性如下：n nrelrel:连接文件和连接文件和连接文件和连接文件和HTMLHTML文档的关系，值为文档的关系，值为文档的关系，值为文档的关系，值为stylesheetstylesheet n nhrefhref:连接的样式文件连接的样式文件连接
3、的样式文件连接的样式文件 n ntype:type:样式的类别，值为样式的类别，值为样式的类别，值为样式的类别，值为text/text/csscss n nmedia:media:接受样式表的介质，默认为接受样式表的介质，默认为接受样式表的介质，默认为接受样式表的介质，默认为screen,screen,可可可可以是以是以是以是print,projectionprint,projection(投影机投影机投影机投影机)n n注意：注意：注意：注意：n nCSSCSS样式文件不包含样式文件不包含样式文件不包含样式文件不包含标记标记标记标记 引入外部样式表引入外部样式表n n在在HTML文件的头部的
4、文件的头部的和和标记之间用标记之间用CSS的的import声明引入外部样式声明引入外部样式表。格式如下表。格式如下n nimport URL(“外部样式表文件名外部样式表文件名”)嵌入样式表嵌入样式表n n嵌入样式表嵌入样式表:n n利用利用标记将样式表嵌入标记将样式表嵌入HTML的的头部头部 n n内联样式内联样式:n n在在HTML标记中引用样式定义，方法是：标记中引用样式定义，方法是：n n将标记的属性值赋为所定义的样式规则。将标记的属性值赋为所定义的样式规则。如：如：相关标记的属性 类选择符和类选择符和class属性属性 n n作用作用 n n页面中同一标记遵循不同的样式页面中同一标记
5、遵循不同的样式 n n不同的标记遵循相同的样式不同的标记遵循相同的样式 类选择符和类选择符和class属性属性 n n使用方法使用方法n n在在标记中定义类选择符，在体部标记中定义类选择符，在体部标记中将标记标记中将标记class属性值设为类名属性值设为类名 类选择符和类选择符和class属性属性 n n定义定义n n类选择符在样式表中定义具有样式值的类，类选择符在样式表中定义具有样式值的类，有两种格式有两种格式n n标记名标记名.类名类名规则规则1；规则；规则2，如，如p.back/用到用到了规则了规则/不使用规则不使用规则类名类名规则：规则规则：规则id选择符和选择符和id属性属性n n作
6、用作用n n用于定义一个元素的独有样式用于定义一个元素的独有样式 n n使用使用n n在一个在一个HTML文件中只能引用一次文件中只能引用一次 id选择符和选择符和id属性属性n n定义定义n n#id名名规则规则1；规则；规则要引用要引用id选择符定义，需要在体部标记中选择符定义，需要在体部标记中设置设置id属性值，即将属性值，即将id属性值设置为属性值设置为id名。名。如如n n#colord1color:green 伪类伪类n n作用作用n n能自动被支持能自动被支持CSS的浏览器识别。的浏览器识别。n n定义格式定义格式n n选择符选择符:伪类伪类属性属性:值值 伪类伪类n n用法用法
7、用法用法n n伪类不用伪类不用伪类不用伪类不用HTMLHTML的的的的classclass属性来指定，如指定超连属性来指定，如指定超连属性来指定，如指定超连属性来指定，如指定超连接接接接以不同方式显示连接以不同方式显示连接以不同方式显示连接以不同方式显示连接(links)(links)、已访问连、已访问连、已访问连、已访问连接接接接(visited links)(visited links)和可激活连接和可激活连接和可激活连接和可激活连接(active links),(active links),代码如下：代码如下：代码如下：代码如下：n na:visitedcolor:#0000ff;tex
8、t-a:visitedcolor:#0000ff;text-decoration:nonedecoration:nonea:linkfonta:linkfont-family:-family:宋体宋体宋体宋体,font-,font-size:9pt;color:#0000ff;text-size:9pt;color:#0000ff;text-decoration:nonedecoration:nonea:hoverfonta:hoverfont-family:-family:宋体宋体宋体宋体;fong-;fong-size:12pt;color:#003333;background-size:
9、12pt;color:#003333;background-color:#ffcc99;text-decoration:nonecolor:#ffcc99;text-decoration:none其他标记其他标记n nspan标记标记n n为了应用样式而存在，没有其它特殊的作为了应用样式而存在，没有其它特殊的作用用 n ndiv标记标记n n一个块级元素，在一个块级元素，在和和之间之间可以包含段落、标题、表格等其它块级元可以包含段落、标题、表格等其它块级元素。素。n n将其中包含的内容形成一个独立段将其中包含的内容形成一个独立段落落 样式的继承和作用顺序 样式的继承样式的继承 n n直接继承直
10、接继承n n父标记：包含其它标记的标记父标记：包含其它标记的标记子标记：被包含的标记子标记：被包含的标记子标记继承父标记的样式子标记继承父标记的样式n n示例示例n n样式继承样式继承css1.htmln n上例中，上例中，标记被包含在标记被包含在中，中，那么那么标记就引用了标记就引用了标记标记样式的继承样式的继承n n相对值继承相对值继承百分比继承百分比继承n n示例示例n n百分比继承百分比继承css2.html 嵌入外部样式表和链接外部样式表的方法嵌入外部样式表和链接外部样式表的方法n n嵌入外部样式表见嵌入外部样式表见嵌入外部样式表见嵌入外部样式表见css2_2.html注意注意imp
11、ort语句后一定要加语句后一定要加“;”n n链接外部样式表见链接外部样式表见css2_3.html样式的作用顺序样式的作用顺序n n内联样式内联样式 n n其它样式，越后引用，优先级越高。选择符其它样式，越后引用，优先级越高。选择符的优先顺序的优先顺序 n n上下文上下文 n n类类 n nid n n未在任何文中定义的样式，遵循浏览器的默未在任何文中定义的样式，遵循浏览器的默认样式认样式 n n示例示例n n作用顺序作用顺序css3.html n n又一个样式表示例又一个样式表示例n ncss4.html CSS属性 字体属性字体属性 属性名属性名属性名属性名 含义含义含义含义 font-
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 第6讲 样式表 样式
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
限制150内