html嵌套的方法.docx
htm1.嵌套的方法CSS样式既可以作为单独的文件（CSS类型的文件）引入到HTM1.文档中，本文主要介绍了HTM1.嵌入CSS样式的四种实现方法，具有一定的参考价值，感兴趣的可以了解一下CSS样式既可以作为单独的文件（.CSS类型的文件）引入到HTM1.文档中，也可以直接写在HTM1.文档中，大致分为如下四种方法：一行内样式：使用HTM1.标签的Sty1.e届性定义CSS样式；- 内嵌样式：使用<sty1.e>标签在HTM1.文档头部（<head>和<head>之间）定义CSS触；- 链接式：使用<ink>标签引入外部CSS样式表文件.- 导入式：使用©import命令导入外部CSS样式表文件。第1种和第2种方法都是将CSS样式写到当前HTM1.文档中,第3种和第4种方法都是将CSS样式放在外部文件中，然后再导入到当前HTM1.文档中.1 .行内样式（内联样式）行内样式就是把CSS样式直接放在代码行内的标签中，一般都是放入标签的Sty1.e属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。【祠1】针对酶、<h2>标签、<em>标签、<strong>标签以及<div>标签，分别应用CSS行内样式.<!doctypehtm1.><htm1.><head><metacharset="UTF-8"><Ee>行内样式<tit1.e><head><body><psty1.e="background-co1.or:#999900"行内元素,控制段落T<p><h2StyIe="background-co1.or:#FF6633”>行内元素，h2标题元素vh2><psty1.e="background-1.or:#999900”>行内元素，控制段落-2<p><strongSty1.e="font-size:30px;">行内元素，strong比em效果要强<strong><divsty1.e="background-co1.or:#66CC99;1.or:#993300;height:30px;1.ine-height:30px;">行内元素，div块级元素<div><emStyIe="font*size:2em;">行内元素，em强调<em><body><htm1.>页面演示效果如下图所示：在上面示例中,行内样式由HTM1.元素的sty1.e属性欲入，即将CSS代码放入Sty1.e=""引号内即可，多个CSS属性值则通过分号;间隔.例如示例中的Vdiv>标签：<divsty1.e="background-co1.or:#66CC99;co1.or:#993300;height:30px;Iine-height:30px;">行内元素，div块级元素<div>段落<P>标签设置背景色为褐色(background-co1.or:#999900),标题<h2>标签设置背景色为红色(background-co1.or:*FF6633).<strong>标签设25字体为30像素(font-size:30px;),<div>标签设置高度和行高为30像素以及进行背景色、颜色的设置(background-ra1.or:#66CC99;co1.or:#993300;height:30px;1.ine-height:30px;),<em>标签设置字体大小为相对单位(font-size:2em;).两个段落<p>标签，虽内容不同，但使用一样的背景色设置,却添加两次CSS行内属性设置背景色background-co1.or:#999900.行内元素虽然编写简单，但通过示例可以发现存在以下缺陷：-每一个标签要设ES样式都需要添加sty1.e属性.-与过去网页制作者将HTM1.的标签和样式榛杂在一起的效果不同的是,现在是通过CSS编写行内样式，过去采用的是HTM1.标签属性实现的样式效果.虽方式不同，但导致的后果是一样的：后期维沪成本高，即当修改页面时需要逐个打开网站每个页面修改，根本看不到CSS所起到的作用.- 添加如此多的行内样式，页面体积大，门户网站若采用这种方式编写，那将浪费服务器带宽和流津.网络上有些网页通过直看源文件可以看到这种编写方式，虽然一个网页只有一部分是如此做的，但需要分情况：- 若网页制作者编写这样的行内样式，可以快速更改当前样式，不必考虑以前编写的样式;申突问题；- 网页中若存在这种情况则是后台编相时，通过编辑器生成的样式，或后台未开发完整，需为编辑人员开发可选择样式的选项而非通过编箱器直接改变颜色、粗细、背空色、倾斜等效果.2.内嵌样式内做样式通过将CSS写在网页源文件的头部，即在Vhead>和Vhead>之间,通过使用HTM1.标签中的<sty1.e>标签将其包围,其特点是该样式只能在此页使用，解决行内样式多次书写的弊端.【示例2为段落设笆内嵌式样式书写方法，减少代码员.< Idoctypehtm1.><htm1.><head><metacharset="utf"8"><tit1.e>内嵌式<tit1.e>< sty1.etye="textcss">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像素*/<sty1.e><head><body><P>"百度”这一公司名称便来自宋词"众里寻他千百度”（百度公司会议室名为青玉案，即是这首词的词牌）而"熊掌"图标的想法来源于"猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术"非常榴以，从而构成百度的搜索概念,也最终成为了百度的图标形象.在这之后，由于在搜索引擎中，大都有动物形蕊来形象，如SOHU的狐，如OG1.E诩句，而百度也便J项理成章称作了熊.百度般也便成了百度公司的形象物。<P><p>在百度另防:更换1.OG。的计划中，百度给出的3个新1.OGO设计方案在网民的投票下,全部被否决，更多的网民将选票投给了原有的腿掌标志<P><p>此次吏换1.OGO的行动共迸行了3轮投票，直到第2轮投票结束.新的笑脸1.OGO都占据了绝对优势.但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了屐多的网民选票，从而把3个新1.OGO方案彻底否决。<p><body><htm1.>页面演示效果如下图所示：在上面示例中，段落进行如下设置:文本左对齐、字体为14号、行高25像素、宽度500像素、下边距20像素、浏览器下居中、首行缩进两个文字大小空间.首行缩进使用相对单位，此设因的作用是当字体大小改变时（如font-size:18px;）依然能够实现缩进两个文字大小空间。行内样式带来了样式修改的不方便，例如上个示例中两个段落都使用同样的样式，但需要编写两遍；而使用内嵌式样式后，就可以将所有的段落样式放在一起.sty1.e不仅可定义CSS样式，还可以定义JavaScript脚本，故使用sty1.e时需要注意.当sty1.e的type值为text/css时,内部编写CSS样式；若sty1.e的type值为textjavasipt时，内部编写JaVaSeriPt脚本。sty1.e标签的tide属性sty1.e中有一个比较特殊的属性tit1.e,使用tit1.e可以为不同的样式设25一个标题，浏览者就可以根据标题选择不同的样式达到浏览器中切换的效果，但IE浏览器不支持，Firefox浏览器支持此效果.【示例3】分别为火狐浏览器设置两种字体大小样式，通过火狐“直看”菜单进行修改.<Idoctypehtm1.><htm1.><head><metacharset="utf-8"><sty1.etype="textcss"tit1.e="字体14号”>te×t-a1.ign:1.eft;一文本左对齐*/font-size:14×/*字体大小14像素*/1.ine-height:25px;/*行高25像素*/text-indent:2em;/*首行缩进两个文字大小空间*/width:500p×/*段落宽度500像素*/margin:0auto;/*浏览器下居中/<sty1.e><stytetype="textcss"tit1.e="字体18号”>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;字体颜色的改变*/<sty1.e><head><body><P>"百度”这一公司名称便来自宋词"众里寻他千百度”（百度公司会议室名为青玉案，即是这首词的词牌）而"熊掌"图标的想法来源于"猎人巡迹熊爪”的刺激，与李博士的“分析搜索技术“非常相似，从而构成百度的搜索概念，也最终成为了百度的图标形象.<p><body><htm1.>页面演示效果如下图所示.在上面不例中，通过VSty1.etype="textcss"tit1.e="名称">定义了两种字体大小，通过火狐浏览器"查看"菜单下的"页面样式"子菜单中有两个选项：字体14号、字体18号，默认情况下显示的是第一次书写的sty1.etype="textcss-tit1.e="名称,通过菜单可以改变该页面样式.3.错接式他接式通过HTM1.的<1.ink>标签，将外部样式表文件他接到HTM1.文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式.这种方法将HTM1.文档和CSS文件完全分渤，实现结构层和表示层的彻底分圈,增强网页结构的扩展性和CSS样式的可维护性.【示例4使用腌接式为HTM1.代码应用样式，书写、更改方便.<!doctypehtm1.><htm1.><head><metacharset="utf-8"><tit1.e><tit1.e><1.inkhref="1.ianjie.css"type="te×tcss"re1.="sty1.esheet"><1.inkhref="1.ianjie-2.css"type="textcss"re1.="sty1.eshee><head><body><P>我是被Iianjie-2.CSS文件控制的，楼下的你呢？<p><h3>楼上的,<san>1.ianjie.css<span>文件给我穿的花衣服.<h3><body><htm1.>页面演示效果如下图所示:在上面示例中，通过1.ink链接两个CSS文件，目都有效,这也是网站制作者将公共部分放入一个CSS文件，当前页面样编写新的样式文件.1.ianjie.css文件代码：h3font-weight:norma1.;/*取消标题默认加粗效果*/background-co1.or:#66999;/*设置背景色7height:50px;/*设置标签的高度*/1.ine-height:50px;/*设置标签的行高*/span(co1.or:#FFoe)O0;/字体颜色*/font-weight:bo1.d;/*字体力湘*/1.ianjie-2.css文件代码：风co1.or:#FF3333；/*字体颜色设置*/font-weight:bo1.d;/*字体加粗*/border-bottom:3pxdashed#009933;/*设署下边框线*/1.ine-height:30px;/*设普行高*/链接式样式使CSS代砌口HTM1.代码完全分渤，达到结构与样式的分开，使HTM1.代码专门构建页面结构，而美化工作由CSS完成.他接式导入CSS样式的好处：- CSS文件可以放在不同的HTM1.文件中，使网站所有页面样式统一；- 再者将CSS代码放入一个CSS文件中便于管理、减少代码以及维护时间；- 当修改CSS文件时，所有应用此CSS文件的HTM1.文件都将更新，而不必从服务器上将所有的页面取回再修改完毕后上传.4.导入样式导入样式使用import命令导入外部样式表.导入样式有6种书写方式：importdaoru.css;©import,daom×ss'©import"daoru.css"©importur1.(daoru.css);importur1.('daoru.css');©importur1.("daoru.css");【示例5导入样式表1.ianjie.css和daor.css以及书写<body>标签的背景色，注意导入样式表和<body>标签样式的前后不可颠倒.<htm1.><head><metacharset="utf-8"><tit1.e><tit1.e><sty1.etype="textcss">©importur1.(1.ianjie.css);©importur1.(daoru.css);bodybackground-co1.or:#e4e929;<sty1.e><head><body><drv><P>我是被Iianjie-2.css文件控制的，楼下的你呢？<p><h3>褛上的，<span>1.ianjie.css<span>文件给我穿的花衣!员。<h3><div><body><htm1.>页面演示效果如下图所示.在上面示例中，必须是©importur1.("1.ianjie-2.css");p(text-indent:3em;,而不能是p(text-indent:3em;©importur1.("1.ianjie-2.css");,否则将导入效果无效.在CSS文件中也需要将©import放在前面，后面加入CSS样式，否则也是无效.ianjie.css文件代码，同上一个示例即链接式.daoru.css文件代码：©importur1.("1.ianjie-2.css");ptext-indent:3em;
