分享

代码学习笔记33【页内插入样式应用】

 连山老叟 2014-09-11


【css样式表的用法】

代码教程33学习笔记




自己学会使用中成药 (供参考) - 荷莲 - 菩荷莲萨

一、填空:
1、css样式表的用法大致有三种。即:(页内插入)样式、(行内插入)样式与(外链插入)样式。
2、css样式表的“行内插入样式”,就是在html代码的某个(标签)中插入“css样式”,把“css样式”作为html代码某个(标签)的一个(属性)应用。
3、页内插入样式,是在网页代码的(开头),设置一个(样式表),用(样式表)控制网页内容。
4、页内插入css样式,一般由三部分组成:(样式标签)、(注释标签)、(样式尾标签)。
二、css样式表中,“选择器”是指什么?“声明”是指什么?
“选择器”是指html代码中的某个元素(或者某个属性);“声明”是指对这个html代码中的元素设置的样式,也可以说是对这个html代码中的元素设置的属性与属值。
三、页内插入css样式有什么优点?
“页内插入css样式”的优点是:要想修改此网页的样式,比较容易。只要修改样式表即可,不像“行内插入样式”那样,得一个一个地修改每个标签中的样式。
四、如何避开360doc个人图书馆服务器的屏蔽,使“页内插入css样式”生效?
要想应用css样式的页面插入方式,必须在设置样式表之前,先在网页中输入一些内容,才能够避开360图书馆的服务器对css样式的屏蔽,才能够使我们设置的css样式有效。
五、学会应用“行内插入css样式”和“页内插入css样式”制作网页。
代码举例1:

nnnn
<STYLE type=text/css>

.s{ background-color:#0000ff; color:#fff;}

.e{ background-color:#00ff00;}

.f{ background-color:#ffff00;}

</STYLE>

<TABLE title=页内插入css样式 border=2 cellSpacing=0 borderColor=#00f000 cellPadding=0 width=254>
<TBODY>
<TR class=s title=第一行 align=center>
<TD>css样式</TD>
<TD>页内插入</TD>
<TD>方法</TD></TR>
<TR class=e title=第二行 align=center>
<TD>css样式</TD>
<TD>页内插入</TD>
<TD>方法</TD></TR>
<TR class=s title=第三行 align=center>
<TD>css样式</TD>
<TD>页内插入</TD>
<TD>方法</TD></TR>
<TR class=e title=第四行 align=center>
<TD>css样式</TD>
<TD>页内插入</TD>
<TD>方法</TD></TR>
<TR class=f title=第五行 align=center>
<TD>css样式</TD>
<TD>页内插入</TD>
<TD>方法</TD></TR></TBODY></TABLE>


上面的代码,首先,输入了几个字母(文字也可),为的是使“页内插入css样式”生效。(这一点很重要欧!
第一个标签:<样式标签 类型=文本/css>
下面的内容是为网页设置的css样式。为网页设置的css样式,也可以放置到“注释标签”中。
为网页设置的css样式,有三个内容:
选择器:.s{背景颜色:蓝色;文字颜色:白色;}
选择器:.e{背景颜色:绿色;}
选择器:.f{背景颜色:黄色;}
第二个标签:<样式尾标签>
接下来就是一套五行三列的表格标签。
在五行三列的表格标签中,第一行与第三行的行标签中,设置了class=s属性(不可省略)。意思是这两行的内容,要按照s样式显示。即:背景颜色为“蓝色”;文字颜色为“白色”。
第二行与第四行的行标签中,设置了class=e属性(不可省略)。意思是这两行的内容,要按照e样式显示。即:背景颜色为“绿色”;文字颜色没有设置,采用系统默认的文字颜色“黑色”。
第五行的行标签中,设置了class=f属性(不可省略)。意思是这一行的内容,要按照f样式显示。即:背景颜色为“黄色”;文字颜色没有设置,采用系统默认的文字颜色“黑色”。
注释:class属性是指元素引用的css样式表里面的样式名称,也就是那个选择器的名称。
效果:

css样式 页内插入 方法
css样式 页内插入 方法
css样式 页内插入 方法
css样式 页内插入 方法
css样式 页内插入 方法

代码举例2:

<FONT style="FONT-SIZE: 1px">n</FONT>
<STYLE type=text/css>
.p{ TEXT-INDENT: 2em; background-color:#0000ff; color:#fff; font-family: 黑体; font-size: 18pt;}
.p2{text-align: center; background-color:#00ff00; color:#f0f; font-family: 黑体; font-size: 28pt;}
.div{TEXT-INDENT: 2em; BACKGROUND: url(http://image14.360doc.com/DownloadImg/2010/08/2221/4784432_36.jpg) ; background-color:#00ff00; font-family: 黑体; color:#0f0; font-size: 16pt;}</STYLE>

<DIV style="BACKGROUND-COLOR: #f08888">
<P class=p2>中秋节祝福语</P>
<DIV class=p>许一个美好的心愿祝你快乐连连,送一份美妙的感觉祝你万事圆圆,发一条短短的信息祝你心顺甜甜。祝中秋快乐!</DIV>
<P class=div>临一池碧水,钓几尾闲鱼,玩味人生得失,心游凡尘外,喝一壶老酒,交一群朋友,虽说人在江湖身不由己,但记得别太累着自己,祝中秋快乐。</P>
<DIV class=p>偶尔的繁忙,不代表遗忘,秋天的到来,愿你心情舒畅,曾落下的问候,这次一起补偿,所有的关心,凝聚这条短信:祝福你朋友,中秋快乐!</DIV>
<P class=div>洁明皓月逢佳期,挚手共享两相依,爱深情浓甜似蜜,翱之清风何求兮。相伴月缺至月圆!共度此时至此生!</P>
<P class=p>风柔,雨润,花好,月圆,幸福生活日日甜!冬去,春来,似水,如烟,一年中秋在眼前!流年不复返,人生需尽欢!说一声珍重,祝中秋快乐!</P>
<P class=div>让我送上香甜的月饼,连同一颗祝福的心!成为第一个祝愿你的人!明月本无价,高山皆有情,愿你的生活就像那十五的月亮一样,圆圆满满!明明亮亮!</P>
<P class=p>愿中秋佳节:春风洋溢您、家人关心您、爱情滋润您、财神宠幸您、朋友忠于您、我会祝福您、幸运之星永远照着您!</P>
<P class=div>中秋节快到了,买辆奔驰送你,太贵;请你出国旅游,浪费;约你海吃一顿,伤胃;送你一枝玫瑰,误会;给你一个热吻,不对;只好短信祝你快乐,实惠!</P>
<P class=p>星星的寂寞月知道,晚霞的羞涩云知道,花儿的芬芳蝶知道,青草的温柔风知道,心里的酸楚泪知道,我的祝福你知道!祝中秋节快乐!</P>
<P class=div>八月中秋不送礼,发条短信祝福你,健康快乐长伴你,好运和你不分离,还有让我告诉你,财神已经跟随你。中秋节愉快!</P>
<P class=p>正怜火树千春妍,忽见清辉映月阑。出海鲛珠犹带水,满堂罗袖欲生寒。烛花不碍空中影,晕气疑从月里看。为语东风暂相借,来宵还得尽馀欢。</P><BR></DIV>






    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多