zoukankan      html  css  js  c++  java
  • 重见CSS

    CSS有些年头了。网页设计中,不可缺少,统一web各元素的利器。也是DOM的产物。
    script 和 style 一个动,一个静,修饰web的document,让整个web更加生动。让可编程性、可交互性成为可能。

    废话不讲,以前知道的CSS无非就是几个字体啊、颜色什么的修饰。一般人也都仅仅用到这些。
    微软对其疯狂扩展,让整个DOM文档的任何部分都可以修饰,IE5以后,基本Mozilla与其不兼容,所以当时也懒得摸索他了。

    如今看来,对于整个互联网 95%的人都是用IE浏览,针对低级用户更是100%,而且mozilla也慢慢在靠近IE的各个样式。现在要做BS程序的表现层,为了程序更加灵活,不得不重新翻MSDN,看CSS样式库。还真有很多以前没注意。

    重见CSS吧。MSDN的web development 详细得不能再详细了。

    如下,我将用粗俗易懂的话将自我觉得对写程序有用的部分归纳一下。


    1 位置

    文档内声明:生命周期只有这个文档,修饰范围也只有这个文档,对于写程序统一整个网站的风格,意义不大,对于特殊页面设计有用。
    <HTML>
       <HEAD>
       <TITLE>>HTML 4.0 CSS Style Class Example</TITLE>
       <STYLE TYPE="text/css">
        声明
       </STYLE>

    ……

    外连文件:通过指定样式库描述文本文件,Web的相对路经或绝对路经,整个网站,近似的页面,使用统一的样式库,对分离显示效果和代码,很有用处
    <HTML>
       <HEAD>
       <TITLE>Calling an External CSS Style Sheet Example</TITLE>
       <LINK rel="stylesheet" href="Mystyles.css" type="css/text"> 
       </HEAD>
    ……

    2:书写标准
    h1 {
     font:bold italic 20px georgia, times new roman, times, serif;
     margin-top:20px;
     background: transparent;
     }
    h2 {
    }
    HTML element{attribute:value;}
    修饰对象:h1,h2,他的描述用{}包含
    每个修饰用分号隔开,或者换行即可,但简易标准化,分号+换行,
    如果在一行里面描述,如特殊html标签中指定样式 <div style="font:bold;background:transparent;">分号分隔即可。

    修饰属性与修饰内容之间,用分号分隔。

    具体修饰对象,有什么修饰属性,可以参见MSDN
    如,想了解TD的style属性
    直接查找到td的说明页面:TD Element | td Object
    Styles栏目:
    Style attribute:就是CSS中,TD的修饰属性(定语)
    Style property:是不同的属性(性质),一提倒property,就应该联想到,这是程序中可动态指定的,这里描述的正式可用script指定的属性名称。也可以用外部程序,对DOM中的对象进行指定,也都是property。
    element.Style.Property=value;
    特别注意这个地方,attribute和property经常名字不同,所以写程序时用到的 obj.style.property=xxx;和css中描述的样式 attribute:yyy 要特别注意名字
    查MSDN即可。

    3:修饰标签的类型
    1)HTML标签样式的指定
    对指定的HTML标签进行统一修饰。如<P><BODY><TD>之类的,进行修饰
    H1 {text-align:center; color:red;} 就对整个文档的H1标签包含的内容进行修饰
    标签名{attibute:value;}
    这种样式一般用来做默认样式指定,特殊的修饰如下:

    2)对使用此类型的对象进行修饰
    网页中某标签中,对其类型进行修饰,使用Class=classname,如<span class=myspan>
    此时,IE会到样式库中匹配.myspan的样式指定给这个span中包含的内容。
    .类别名{attribute:value;}
    程序可动态指定其类别,达到改变效果的目的
    如<span style="s1" onmouseout="this.className='s1'" onmouseover="this.className='s2'"></span>
    此处对象当响应鼠标在上面的事件时,引用s2样式,离开时,引用s1样式.
    onmouseout,onmouseover等事件响应,也可以统一集成到样式库中修饰,这就是后面要讲的Style的behavior属性和htc(html组件库)

    所以,这种修饰对写程序来说最常用.

    3)对指定对象进行修饰
    如想修饰名字为 myid的对象的样式,<span id=myid>
    可以在样式库中指定:#myid,对所有id=myid的对象进行修饰
    #对象ID{attribute:value;}
    这对修饰统一类型元素时也比较常用.

    4)样式库的命名空间 NameSpace(我理解的)
    想想,上面2)描述的类别指定,为什么用.?
    常常见到:
    table.mystyle{attribute:value;}
    .mystyle{attibute:value;}
    有何不同,在<table class=myctyle>,应用的是table.mystyle
    而<div class=mystyle>用的则是.mystyle,对整个body有效.

    #mydiv p{attribute:value;}
    #mydiv a:link{attribute:value;}
    指明ID=mydiv的部分的独立有效空间

    5) A属性,4态修饰
    a{}
    a:link {}
    a:visited {}
    a:hover {}
    a:active{}

    我觉得这样,既可以增强可读性,也很好在一个文档中扩展。

    4:使用
    文档中,默认样式通过上述样式库中的1)类指定。
    通过指定class来按类指定样式
    通过id来通过对象ID指定样式

    5:几个细节
    样式库中使用外部文件,如图片,指定背景图片
    background-image:url(sUrl); //Location of the background image, where sUrl is an absolute or relative URL
    应用的是相对于当前css文件的URL,而不是应用此css的网页的相对路经。

    behavior:url(sBehavior ); 此类型中,相关的动态响应代码,行为?
    动态应用脚本: object.style.behavior [ = sBehavior ]

    如下3中类型的sBehavior:
    url(sLocation) Script implementation of a Dynamic HTML (DHTML) behavior, where sLocation is an absolute or relative URL.
    url(#objID) Binary implementation of a DHTML behavior, where objID is the ID attribute specified in an object tag.
    url(#default#behaviorName) Microsoft® Internet Explorer default behavior, identified by its

    sLocation中就可以是相对的HTC组件,HTML Components,可以把统一类型的对象的相关脚本,封装在一起,通过样式库来指定。这些脚本当然是web显示端的脚本。是相当重要的内容。 

  • 相关阅读:
    51Nod-1013 3的幂的和【快速模幂+逆元】
    51Nod-1082 与7无关的数【进制+打表】
    51Nod-1080 两个数的平方和【暴力法】
    51Nod-1015 水仙花数【进制+查表搜索】
    51Nod-1003 阶乘后面0的数量【分析思维】
    51Nod-1002 数塔取数问题【DP】
    51Nod-1179 最大的最大公约数【暴力】
    51Nod-1018 排序【排序】
    51Nod-1126 求递推序列的第N项【递推序列+模除】
    51Nod-1031 骨牌覆盖【递推】
  • 原文地址:https://www.cnblogs.com/trendline/p/217774.html
Copyright © 2011-2022 走看看