欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 教程文档 > Css&Div > 1.3 分类及其它技巧

1.3 分类及其它技巧

2018-05-05 421 收藏 0 赞一个 0 真差劲 0 去评论

我们已经学习了所有的样式表基本语法。下面我将给你讲几个你肯定会非常感兴趣的技巧和快捷方式.

分类

我先前已经讲过所有的HTML标签都可以用作选择,并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢?比如,你想让主体文字的1段用绿色显示,第2段用紫色显示,而第3段用灰色显示,你能做到吗?

这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别,每一类应用不同的样式表说明。这些规则(不论是植入的还是外部样式表文件)将以以下方式显示:

P.first { color: green }  
P.second { color: purple }  
P.third { color: gray }

你的HTML代码如下:

<PCLASS=first>The first paragraph,   
with a class name of "first."</P>
<PCLASS=second>The second paragraph, with a class name of "second."</P>
<PCLASS=third>The third paragraph,   
with a class name of "third."</P>

你可以给类别起任何一种名字,但不要忘了在样式表规则中类别名称前加一个句号(即英文中的 .)

你还可以生成不加任何HTML标签的分类:

.first { color: green }

这种方式更加灵活,因为现在我们可以将CLASS=first用于任何HTML标签,并应用到网页<BODY>中,而设定的文字将以绿色显示。

情景选择:

如果你想让所有加重显示的文字都以红色显示,但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗?利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真,心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。

P B { color: red }   
<H1><B>Emma Thompson</B>, Actress  
</H1>
<P>Dramatic actor, inspired   
comedienne. Is there <B>nothing</B>
she can't do?</P>

样式表的规则告诉浏览器只将所有<P>之内加重显示的文字以红色显示。所以,<P>之外标题的加重文字不会以红色显示,而<P>之内的文字则是。

注释

即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例:

P.first { color: green } 
/* green for the first paragraph of every  page */
H1 { text-indent: 10px;   
font-family: verdana }  
IMG { margin-top: 100px } 
/* give all images a top margin */

串接

你可能会问这样的问题:“为什么要把它叫做串接样式表呢?下面我们将回答你的问题。

返回主目录
暂无界面图片

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论