html嵌套的方法.docx

《html嵌套的方法.docx》由会员分享，可在线阅读，更多相关《html嵌套的方法.docx（9页珍藏版）》请在优知文库上搜索。

1、htm1.嵌套的方法CSS样式既可以作为单独的文件（CSS类型的文件）引入到HTM1.文档中，本文主要介绍了HTM1.嵌入CSS样式的四种实现方法，具有一定的参考价值，感兴趣的可以了解一下CSS样式既可以作为单独的文件（.CSS类型的文件）引入到HTM1.文档中，也可以直接写在HTM1.文档中，大致分为如下四种方法：一行内样式：使用HTM1.标签的Sty1.e届性定义CSS样式；- 内嵌样式：使用标签在HTM1.文档头部（和之间）定义CSS触；- 链接式：使用标签引入外部CSS样式表文件.- 导入式：使用import命令导入外部CSS样式表文件。第1种和第2种方法都是将CSS样式写到当前HTM

2、1.文档中,第3种和第4种方法都是将CSS样式放在外部文件中，然后再导入到当前HTM1.文档中.1 .行内样式（内联样式）行内样式就是把CSS样式直接放在代码行内的标签中，一般都是放入标签的Sty1.e属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。【祠1】针对酶、标签、标签、标签以及标签，分别应用CSS行内样式.行内样式psty1.e=background-co1.or:#999900行内元素,控制段落T行内元素，h2标题元素vh2行内元素，控制段落-2行内元素，strong比em效果要强行内元素，div块级元素行内元素，em强调页面演示效果如下图所示：

3、在上面示例中,行内样式由HTM1.元素的sty1.e属性欲入，即将CSS代码放入Sty1.e=引号内即可，多个CSS属性值则通过分号;间隔.例如示例中的Vdiv标签：行内元素，div块级元素段落标签设置背景色为褐色(background-co1.or:#999900),标题标签设置背景色为红色(background-co1.or:*FF6633).标签设25字体为30像素(font-size:30px;),标签设置高度和行高为30像素以及进行背景色、颜色的设置(background-ra1.or:#66CC99;co1.or:#993300;height:30px;1.ine-height:3

4、0px;),标签设置字体大小为相对单位(font-size:2em;).两个段落标签，虽内容不同，但使用一样的背景色设置,却添加两次CSS行内属性设置背景色background-co1.or:#999900.行内元素虽然编写简单，但通过示例可以发现存在以下缺陷：-每一个标签要设ES样式都需要添加sty1.e属性.-与过去网页制作者将HTM1.的标签和样式榛杂在一起的效果不同的是,现在是通过CSS编写行内样式，过去采用的是HTM1.标签属性实现的样式效果.虽方式不同，但导致的后果是一样的：后期维沪成本高，即当修改页面时需要逐个打开网站每个页面修改，根本看不到CSS所起到的作用.- 添加如此多的行

5、内样式，页面体积大，门户网站若采用这种方式编写，那将浪费服务器带宽和流津.网络上有些网页通过直看源文件可以看到这种编写方式，虽然一个网页只有一部分是如此做的，但需要分情况：- 若网页制作者编写这样的行内样式，可以快速更改当前样式，不必考虑以前编写的样式;申突问题；- 网页中若存在这种情况则是后台编相时，通过编辑器生成的样式，或后台未开发完整，需为编辑人员开发可选择样式的选项而非通过编箱器直接改变颜色、粗细、背空色、倾斜等效果.2.内嵌样式内做样式通过将CSS写在网页源文件的头部，即在Vhead和Vhead之间,通过使用HTM1.标签中的标签将其包围,其特点是该样式只能在此页使用，解决行内样式多

6、次书写的弊端.【示例2为段落设笆内嵌式样式书写方法，减少代码员.内嵌式text-a1.ign:1.eft;/*文本左对齐*/font-size:18px;/*字体大小18像素*/1.ine-height:25px;/*行高25像素*/text-indent:2em;/*首行缩进2个文字大小空间*/width:500p;段落宽度500像素*/margin:0auto;/*浏览器下居中*/margin-bottom:20px;/*段落下边距20像素*/百度”这一公司名称便来自宋词众里寻他千百度”（百度公司会议室名为青玉案，即是这首词的词牌）而熊掌图标的想法来源于猎人巡迹熊爪”的刺激，与李博士的“分

7、析搜索技术非常榴以，从而构成百度的搜索概念,也最终成为了百度的图标形象.在这之后，由于在搜索引擎中，大都有动物形蕊来形象，如SOHU的狐，如OG1.E诩句，而百度也便J项理成章称作了熊.百度般也便成了百度公司的形象物。在百度另防:更换1.OG。的计划中，百度给出的3个新1.OGO设计方案在网民的投票下,全部被否决，更多的网民将选票投给了原有的腿掌标志此次吏换1.OGO的行动共迸行了3轮投票，直到第2轮投票结束.新的笑脸1.OGO都占据了绝对优势.但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了屐多的网民选票，从而把3个新1.OGO方案彻底否决。页面演示效果如下图所示：在上面示例中，段落进行如

8、下设置:文本左对齐、字体为14号、行高25像素、宽度500像素、下边距20像素、浏览器下居中、首行缩进两个文字大小空间.首行缩进使用相对单位，此设因的作用是当字体大小改变时（如font-size:18px;）依然能够实现缩进两个文字大小空间。行内样式带来了样式修改的不方便，例如上个示例中两个段落都使用同样的样式，但需要编写两遍；而使用内嵌式样式后，就可以将所有的段落样式放在一起.sty1.e不仅可定义CSS样式，还可以定义JavaScript脚本，故使用sty1.e时需要注意.当sty1.e的type值为text/css时,内部编写CSS样式；若sty1.e的type值为textjavasip

9、t时，内部编写JaVaSeriPt脚本。sty1.e标签的tide属性sty1.e中有一个比较特殊的属性tit1.e,使用tit1.e可以为不同的样式设25一个标题，浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果，但IE浏览器不支持，Firefox浏览器支持此效果.【示例3】分别为火狐浏览器设置两种字体大小样式，通过火狐“直看”菜单进行修改.tet-a1.ign:1.eft;一文本左对齐*/font-size:14;/*字体大小14像素*/1.ine-height:25px;/*行高25像素*/text-indent:2em;/*首行缩进两个文字大小空间*/width:500p;/*

10、段落宽度500像素*/margin:0auto;/*浏览器下居中/text-a1.ign:1.eft;/*文本左对齐*/font-size:18px;/*字体大小18像素*/1.ine-height:25px;/*行高25像素*/text-indent:2em;/*首行缩进两个文字大小空间”/width:500px;厂段落宽度500像素”/margin:0auto;/*浏览器下居中*/co1.or:#6699FF;字体颜色的改变*/百度”这一公司名称便来自宋词众里寻他千百度”（百度公司会议室名为青玉案，即是这首词的词牌）而熊掌图标的想法来源于猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术“非常

11、相似，从而构成百度的搜索概念，也最终成为了百度的图标形象.页面演示效果如下图所示.在上面不例中，通过VSty1.etype=textcsstit1.e=名称定义了两种字体大小，通过火狐浏览器查看菜单下的页面样式子菜单中有两个选项：字体14号、字体18号，默认情况下显示的是第一次书写的sty1.etype=textcss-tit1.e=名称,通过菜单可以改变该页面样式.3.错接式他接式通过HTM1.的标签，将外部样式表文件他接到HTM1.文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式.这种方法将HTM1.文档和CSS文件完全分渤，实现结构层和表示层的彻底分圈,增强网页结构的扩展性和

12、CSS样式的可维护性.【示例4使用腌接式为HTM1.代码应用样式，书写、更改方便.我是被Iianjie-2.CSS文件控制的，楼下的你呢？楼上的,1.ianjie.css文件给我穿的花衣服.页面演示效果如下图所示:在上面示例中，通过1.ink链接两个CSS文件，目都有效,这也是网站制作者将公共部分放入一个CSS文件，当前页面样编写新的样式文件.1.ianjie.css文件代码：h3font-weight:norma1.;/*取消标题默认加粗效果*/background-co1.or:#66999;/*设置背景色7height:50px;/*设置标签的高度*/1.ine-height:50px;/*设置标签的行高*/