zoukankan      html  css  js  c++  java
  • css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词;只能与块状元素关联。

    如下属性可以应用于:first-line伪元素

    font属性

    color属性

    background属性

    word-spacing

    letter-spacing

    text-decoration

    vertical-align

    text-transform

    line-height

    clear

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>向段落的第一个字符添加特殊样式(让第一行颜色变红)</title>
    <style>
        .wanly:first-line{color:red; font-family:Arial, Helvetica, sans-serif; 100px;}
    </style>
    </head>
    <body>
        <p class="wanly">第一行<br />第二行<br />第三行</p>
    </body>
    </html>

    还有一个经常会出现在面试题当中的,用来改变默认选中文本颜色——::selection,但由于是css3的属性,故而可用的浏览器并不多,只能用于ie9以上,opera【欧朋】、chrome【谷歌】、safari【苹果】。若是想要火狐也支持,则可以写作::-moz-selection.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
            <title>CSS ::selection 伪元素示例</title>        
            <style type="text/css" media="all">
                ::selection
                {
                    color:lightblue;
                    background:pink;
                }    
                
                ::-moz-selection 
                {
                    color:lightblue;
                    background:pink;
                }
            </style>
        </head>
        <body>
            <div>CSS是现代标准网页设计的重要一环,主要负责网页的表现.它与一些标记语言,比如HTML,XHTML,XML等结合在一起,通过客户端设备(web浏览器,手持设备等)表现了网页的.它可以改变文字的样式,大小,颜色等等,还可以进行网页的排版.</div>
        </body>
    </html>
  • 相关阅读:
    expect简介和使用例子(转)
    openshift网络
    openstack相关
    SDN的开源方案sonic
    OpenStack Neutron ML2 Deep Dive
    2017双11技术揭秘—阿里数据库计算存储分离与离在线混布
    es的gui工具
    django orm中blank和null的区别
    断关联多表关系阐述
    视图使用
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3579739.html
Copyright © 2011-2022 走看看