vicwity's blog

十一月 2006 - 博客

  • 《天下无贼》片尾曲

    知不知道

    那天的云是否都已料到
    所以脚步才轻巧
    以免打扰到
    我们的时光
    因为注定那么少
    风吹着白云飘
    你到哪里去了
    想你的时候
    哦抬头微笑知道不知道

    -----------------------------------------------------

    比较喜欢刘若英的歌,喜欢这首歌,收藏一下。

  • CSS中的样式选择符(上)

    样式选择符(Selectors)是用来关联和指定HTML页面中的元素与样式定义的关系的。浏览器通过样式选择符来判断页面中的元素使用何种样式表述来表现的。

    样式选择符的种类

    比较常用的选择符有以下几种:

    ·元素选择符(type selector
    ·类选择符(class selector
    ·ID选择符(ID selector
    ·伪类选择符(Pseudo class selectors
    ·伪元素选择符(Pseudo element selectors
    ·属性选择符(Attribute selectors

    下面简单介绍一下这几种选择符的用法。

    元素选择符

    通过元素选择符可以匹配文档中的不同元素a document language element type)所对应的样式描述。元素选择符的样式描述会应用于文档中每个元素的实例instance of the element type )。

    在HTML的页面,所谓元素就是指每个HTML标签元素,即被包在"<"和">"之间的元素。所有的HTML标签元素都可以通过元素选择符来定义他们的样式。

    使用 元素选择符 定义样式的语法:元素名称 样式定义 }

    例如:
             h1{color:red}

    则在HTML页面中,上面的定义会应用于页面文件中的所有H1元素:

    类选择符

    给页面的标签元素指定一个class的属性,可以通过这个属性值来定义样式,而这个样式会应用于所有class的属性值等于该值的元素。

    使用 类选择符 定义样式的语法: .Class的属性值 样式定义 }

    例如:
            <p class="Sample"> Sample text1 </p>
            <div class="Sample"> Sample text2 </div>

            .Sample { color:red }

    则这条样式将应用于上面的class="Sample"的P标签和DIV标签。这两段中的文字将是红色的。

    另外有一点需要说明一下,类选择符是区分大小写的。

    ID选择符

    页面文档中的元素可以通过id这一属性来指定该元素在页面中的唯一ID。类似于class属性,在CSS中也可以通过这个ID的属性值来指定这个元素所需匹配的样式。

    使用 ID选择符 定义样式的语法: #ID属性值样式定义 }

    例如:
           <p id="Sample"> Sample text1 </p>

          .Sample { color:red }

    则这条样式会应用于上面id="Sample"的P标签。

    伪类选择符

    伪类(Pseudo-classes )是将元素按原理上的特性进行分类,而这个特性不是表现在页面上的,是指除了名称、属性或内容之外的特性。

    伪类可以是动态的,在用户进行交互性操作时,某个元素可以获得或失去一种伪类属性。":first-child"和":lang()"是例外,前者可以从文件结构中演绎出,而后者则在某种情况下也可以从文件中推断出来。

     ·:first-child伪类
        :first-child伪类是指包含在某个元素内的第一个子元素。
        例如:
               div > p:first-child { text-indent: 0 }

               <div>
                      <p>在此段示例代码中DIV中第一个子元素</p>
               </div>

        在上面的例子中,样式将会应用于DIV中的P元素,也是第一个子元素。

               <div>
                      <h2>XXXXX</h2>
                      <p>在此段示例代码中不是DIV中第一个子元素</p>
               </div>

        这种情况下,样式就不会应用于示例中的P元素,因为P不是DIV中的第一个子元素。

        又例如:
               p:first-child em { font-weight : bold }

               <p>abc<em>XXXXXXX</em></p>

        上面示例中,样式将应用于<EM>元素。

        这里的子元素是指标签元素(属于文档结构的),所以上面的示例中虽然在<EM>标签前还有文本,但是这些文本不视为元素。

     ·链接伪类——:link和:visited
        ":link"用来定义未访问的链接;":visited"用来定义访问过的链接。

     ·动态伪类——:hover、:active和:focus
        ":hover"是指用户指示某元素,但未激活该元素。如,在浏览器中当鼠标停留在某元素上,但没有电击该元素。
        ":active"是指用户激活某元素时。如,用户在按下和释放鼠标键之间这段时间。
        ":focus"是指当元素获得焦点。

        注意:在定义样式时,a:hover的样式定义要出现在a:link和a:visited之后,否则由于层叠的缘故,相同属性的属性值会被后出现的样式定义覆盖,就无法实现预期设计的效果。

     ·语言伪类——:lang(C)
      C为语言代码,不能为空。":lang(C)"的样式将应用于语言为C的元素。

    伪元素选择符

    伪元素选择符用来提取文档语言本身并不包含的文档结构。如HTML语言本身并没有指出文档中的第一行、或第一个字母,但是可以通过":first-line"和":first-letter"这两个伪元素选择符来指定他们的样式。

       ·:first-line
           用于指定某元素内的第一行内容(格式化输出后)的样式。此伪元素选择符只能应用于block-level、inline-block、table-caption 或  table-cell。

       ·:first-letter
           用于指定某元素内的第一行第一个字母的样式。如果第一个字符是标点符号,则标点符号和它后面的第一个字母都将被选中。

        ·:before 和 :after
           用于在元素中的内容之前或内容之后插入特定的内容。具体用法参见ttp://www.w3.org/TR/CSS21/generate.html

    属性选择符

    用来选择包含特定属性的元素。有四种方式:
       ·[att]
       选择包含att属性的元素。如,h1[title] { color: blue;},该样式将应用于包含title属性的h1元素。

       ·[att=val]
       选择包含att属性且其属性值为val的元素。如,span[class=example]{color: blue;},该样式将应用于class=example的span。

       ·[att~=val]
       选择包含att属性,而且其属性值为用空格隔开的多个值,其中一条为val的元素。

       ·[att|=val]
       选择包含att属性,而且其属性值为用连字符隔开的多个值,其中一条为val的元素。

    浏览器对选择符的支持性

    注:Y为支持,N为不支持,P为部分支持,B为Bug较多支持性不好

     

    已上数据参考http://westciv.com/style_master/academy/browser_support/selectors.html

  • 对联

    bug、bug、bug,改不完的bug。

    QAs的抱怨激发了俺们的community首座的灵感,闪出了一个上联:

    东出错,西出错,东西出错。

    我觉得这个对联不错,想破了脑袋也没有想出个下联来。Tongue Tied那位能对出个下联阿?

  • 又升级了

    这周对网站性能作了些优化,感觉快多了。社区首页真的好快啊。

    更快的速度才能有更好的体验。

    同事们辛苦了,Gift

    先说说社区的一些新功能吧:

    现在开通了相册功能。不知道你有没有发现,相册中每张图片的标题和简介可以单击进行修改的,是不是很有意思?!——一种很好的体验,我很喜欢。

    也有了RSS阅读器,在阅读器的左侧左键点击标有“我的RSS”的文件夹可以修改文件夹名称;右键点击可以添加RSS订阅了,不但可以添加本站的内容订阅(如某人博客或某个论坛),还可以添加别的网站的RSS订阅。是不是很方便啊?

    其实还有很多有意思的小功能,大家在使用中会慢慢发现的。还不赶快去用用看?!

更多内容