首页 > 开发 > CSS > 正文

那些不常用却很有的CSS小结

2024-07-11 08:36:15
字体:
来源:转载
供稿:网友

精通这个精通那个;我想每个人对精通的理解都不一样。精通的字面意思是:透彻理解并能熟练掌握!在CSS里,能达到这个境界的,我想没有三五年经验很难吧。希望下面这些CSS属性能让你向精通更靠近一些。

一.CSS Pseudo-Classes 伪类
  1.Selector : hover { sRules }
    设置对象在其鼠标悬停时的样式表属性。
    在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

  2.Selector : active { sRules }
    设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
    在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时
发生。

  3.Selector : focus { sRules }
    设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。

    如果您使用过谷歌的产品,你可能会发现,每一个动作都会有比较明显的响应。比如鼠标移入移除,点击,获得焦点时都有不同的显示样式;这些都可以使用以上三个CSS伪类来实现。可能大家
    平时在链接(<A>标签)上使用伪类比较多,其实很多标签都可以使用哦,你不妨试试。

  4.Selector : first-letter { sRules }
    设置对象内的第一个字符的样式表属性。
    此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
    当你想加强每一段中的第一个字符时,这个CSS属性特别有用。

  5.Selector : first-line { sRules }
    设置对象内的第一行的样式表属性。
    此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。
    这个和first-letter类似的用法,不同的是,这个指定的第一行。

  6.Selector1 Selector2 : first-child { sRules }
    设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。
    我觉得这个CSS属性最有用的地方就在于,一个标签内拥有很多相同的子标签,我们想给第一个子标签设定不同样式时,特别有用。
    比如下面这个标签:<div><span>标签一</span><span>标签二</span><span>标签三</span><span>标签四</span></div>

  7.Selector : lang { sRules }

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表