HTML5基礎加強css樣式篇（偽元素first-letter,first-line,selection和css計數函式counter，counters）（十六）

厚積薄發2017發表於2017-03-16
HTMLCSS函式

1.first-letter:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">


        /*選擇一行中的首字母或者文字*/
        p::first-letter{
            color: red;
            font-size: 36px;
            font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微軟雅黑, 宋體, Tahoma, Arial, Helvetica, STHeiti;

            float: left;
            margin-right: .2em;
        }

    </style>
</head>
<body>

    <p>
        青春不是年華，而是心境；青春不是桃面、丹脣、柔膝，而是深沉的意志，恢巨集的想象，炙熱的戀情；青春是生命的深泉在湧流。
        青春氣貫長虹，勇銳蓋過怯弱，進取壓倒苟安。如此銳氣，二十後生而有之，六旬男子則更多見。年歲有加，並非垂老，理想丟棄，方墮暮年。
        歲月悠悠，衰微只及肌膚；熱忱拋卻，頹廢必致靈魂。憂煩，惶恐，喪失自信，定使心靈扭曲，意氣如灰。
        無論年屆花甲，擬或二八芳齡，心中皆有生命之歡樂，奇蹟之誘惑，孩童般天真久盛不衰。人人心中皆有一臺天線，只要你從天上人間接受美好、希望、歡樂、勇氣和力量的訊號，你就青春永駐，風華常存。 、
        一旦天線下降，銳氣便被冰雪覆蓋，玩世不恭、自暴自棄油然而生，即使年方二十，實已垂垂老矣；然則只要樹起天線，捕捉樂觀訊號，你就有望在八十高齡告別塵寰時仍覺年輕。
    </p>

    <p>
        Youth

        Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.

        Youth means a temperamental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.

        Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirit back to dust.

        Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing appetite for what’s next and the joy of the game of living. In the center of your heart and my heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and power from man and from the infinite, so long as you are young.

        When your aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch waves of optimism, there’s hope you may die young at 80.

    </p>
<script type="text/javascript">


</script>
</body>
</html>
2.first-line簡介： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">


        /*選擇段落的第一行*/
        p::first-line{
            color: red;
            font-size: 36px;
            font-family: arial, "Hiragino Sans GB", "Microsoft Yahei", 微軟雅黑, 宋體, Tahoma, Arial, Helvetica, STHeiti;

        }

    </style>
</head>
<body>

    <p>
        青春不是年華，而是心境；青春不是桃面、丹脣、柔膝，而是深沉的意志，恢巨集的想象，炙熱的戀情；青春是生命的深泉在湧流。
        青春氣貫長虹，勇銳蓋過怯弱，進取壓倒苟安。如此銳氣，二十後生而有之，六旬男子則更多見。年歲有加，並非垂老，理想丟棄，方墮暮年。
        歲月悠悠，衰微只及肌膚；熱忱拋卻，頹廢必致靈魂。憂煩，惶恐，喪失自信，定使心靈扭曲，意氣如灰。
        無論年屆花甲，擬或二八芳齡，心中皆有生命之歡樂，奇蹟之誘惑，孩童般天真久盛不衰。人人心中皆有一臺天線，只要你從天上人間接受美好、希望、歡樂、勇氣和力量的訊號，你就青春永駐，風華常存。 、
        一旦天線下降，銳氣便被冰雪覆蓋，玩世不恭、自暴自棄油然而生，即使年方二十，實已垂垂老矣；然則只要樹起天線，捕捉樂觀訊號，你就有望在八十高齡告別塵寰時仍覺年輕。
    </p>

    <p>
        Youth

        Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.

        Youth means a temperamental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.

        Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirit back to dust.

        Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing appetite for what’s next and the joy of the game of living. In the center of your heart and my heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and power from man and from the infinite, so long as you are young.

        When your aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch waves of optimism, there’s hope you may die young at 80.

    </p>
<script type="text/javascript">


</script>
</body>
</html>

3.selection簡介： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">


        /*對選中文字樣式設定

            字型顏色
            背景色
        */
        p::selection{
            background: pink;
            color: blue;
        }

    </style>
</head>
<body>

<p>
    青春不是年華，而是心境；青春不是桃面、丹脣、柔膝，而是深沉的意志，恢巨集的想象，炙熱的戀情；青春是生命的深泉在湧流。
    青春氣貫長虹，勇銳蓋過怯弱，進取壓倒苟安。如此銳氣，二十後生而有之，六旬男子則更多見。年歲有加，並非垂老，理想丟棄，方墮暮年。
    歲月悠悠，衰微只及肌膚；熱忱拋卻，頹廢必致靈魂。憂煩，惶恐，喪失自信，定使心靈扭曲，意氣如灰。
    無論年屆花甲，擬或二八芳齡，心中皆有生命之歡樂，奇蹟之誘惑，孩童般天真久盛不衰。人人心中皆有一臺天線，只要你從天上人間接受美好、希望、歡樂、勇氣和力量的訊號，你就青春永駐，風華常存。 、
    一旦天線下降，銳氣便被冰雪覆蓋，玩世不恭、自暴自棄油然而生，即使年方二十，實已垂垂老矣；然則只要樹起天線，捕捉樂觀訊號，你就有望在八十高齡告別塵寰時仍覺年輕。
</p>

<p>
    Youth

    Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.

    Youth means a temperamental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.

    Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirit back to dust.

    Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing appetite for what’s next and the joy of the game of living. In the center of your heart and my heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and power from man and from the infinite, so long as you are young.

    When your aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch waves of optimism, there’s hope you may die young at 80.

</p>


<div>
    Youth

    Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.

    Youth means a temperamental predominance of courage over timidity, of the appetite for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.

    Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirit back to dust.

    Whether 60 or 16, there is in every human being’s heart the lure of wonders, the unfailing appetite for what’s next and the joy of the game of living. In the center of your heart and my heart, there is a wireless station; so long as it receives messages of beauty, hope, courage and power from man and from the infinite, so long as you are young.

    When your aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you’ve grown old, even at 20; but as long as your aerials are up, to catch waves of optimism, there’s hope you may die young at 80.

</div>

<script type="text/javascript">


</script>
</body>
</html>

4計數函式counter： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ol{
            list-style: none;
            /*如果存在多個ol/ul 巢狀，對 num 重置*/
            counter-reset: num;
        }

        li{
            counter-increment: num;
        }
        li:before{
            /*CSS3計數函式 counter(“ counter-increment 屬性值 ”)*/
            content: counter(num) " - ";
            /*margin-right: .5em;*/
        }


    </style>
</head>
<body>

<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3
        <ol>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
        </ol>
    </li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
</ol>

<script type="text/javascript">


</script>
</body>
</html>



4.計數函式：counters 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ol{
            list-style: none;
            /*如果存在多個ol/ul 巢狀，對 num 重置*/
            counter-reset: num;
        }

        li{
            counter-increment: num;
        }
        li:before{
            /*content: counters( counter-increment 的值 , "分割符");*/
            content: counters(num, " - ") " 、 ";

        }


    </style>
</head>
<body>

<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3
        <ol>
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
        </ol>
    </li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
</ol>

<script type="text/javascript">


</script>
</body>
</html>




相關文章