html嵌套的方法.docx

上传人:王** 文档编号:1510514 上传时间:2024-08-02 格式:DOCX 页数:9 大小:21.01KB
下载 相关 举报
html嵌套的方法.docx_第1页
第1页 / 共9页
html嵌套的方法.docx_第2页
第2页 / 共9页
html嵌套的方法.docx_第3页
第3页 / 共9页
html嵌套的方法.docx_第4页
第4页 / 共9页
html嵌套的方法.docx_第5页
第5页 / 共9页
html嵌套的方法.docx_第6页
第6页 / 共9页
html嵌套的方法.docx_第7页
第7页 / 共9页
html嵌套的方法.docx_第8页
第8页 / 共9页
html嵌套的方法.docx_第9页
第9页 / 共9页
亲,该文档总共9页,全部预览完了,如果喜欢就下载吧!
资源描述

《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;/*设置标签的行高*/

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > IT计算机 > Java

copyright@ 2008-2023 yzwku网站版权所有

经营许可证编号:宁ICP备2022001189号-2

本站为文档C2C交易模式,即用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。装配图网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知装配图网,我们立即给予删除!