HTML+CSS培訓教案(十一)

二十六、文字樣式與排版

  1. font-family:文字字體

    Arial,“Times New Roman”——使用Arial字體,若不存在則找Times New Roman字體
  2. font-style:傾斜效果

    (1)normal(default):不傾斜(默認選項)

    (2)oblique:物理右傾15度

    (3)italic:使用斜體字體庫
  3. font-weight:加粗效果

    (1)normal(default):不加粗(默認選項)

    (2)blod/bloder:加粗

    (3)lighter:使字體變細

    (4)100-900(整百數):可控制加粗程度
  4. text-transform:英文大小寫轉換

    (1)capitalize:首字母大寫

    (2)uppercase:全部大寫

    (3)lowercase:全部小寫
  5. font-size:字體大小

    (1)xxpx:以像素爲單位

    (2)xxem:以字符高度爲單位

    (3)xx%:大小是原來的百分之幾
  6. 文字下沉

代碼

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>文字下沉</title>
        <style>
        p span{font-size:2em;float:left;}
        </style>
    </head>
    <body>
        <h2>Forget buggy Windows 10, Windows 11 is the operating system we want</h2>
        <p id="p1"><span>W</span>indows 10 is a very good operating system, but the October 2018 Update has left a bad taste in many users' mouths. It caused a multitude of problems, got pulled, and even after it was made available again, new issues surfaced. The April 2018 Update rolled out to users at lightning speed, but the October 2018 Update has only been installed on about 3 percent of systems to date. Ouch.</p>
        <p id="p2"><span>M</span>icrosoft has said previously that Windows 10 will be the "last version of Windows", but is it time to rethink that idea and give users an operating system that goes up to 11? Take a look and make up your own mind.</p>
    </body>
<html>
  1. text-decoration:文字裝飾

    (1)none:無任何裝飾

    (2)underline:下劃線

    (3)line-throght:中劃線

    (4)overline:頂劃線

    (5)blink:文字閃爍,僅部分瀏覽器支持
  2. 首行縮進與懸掛縮進

代碼

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>首行縮進與懸掛縮進</title>
        <style>
        p span{font-weight:bold;}
        #p1{text-indent:2em;}
        #p2{text-indent:-2em;padding-left:2em;}
        </style>
    </head>
    <body>
        <h2>Forget buggy Windows 10, Windows 11 is the operating system we want</h2>
        <p id="p1"><span>W</span>indows 10 is a very good operating system, but the October 2018 Update has left a bad taste in many users' mouths. It caused a multitude of problems, got pulled, and even after it was made available again, new issues surfaced. The April 2018 Update rolled out to users at lightning speed, but the October 2018 Update has only been installed on about 3 percent of systems to date. Ouch.</p>
        <p id="p2"><span>M</span>icrosoft has said previously that Windows 10 will be the "last version of Windows", but is it time to rethink that idea and give users an operating system that goes up to 11? Take a look and make up your own mind.</p>
    </body>
<html>
  1. 字詞間距

    (1)word-spacing:詞間距

    (2)letter-spacing:字母間距(中文中的單字間距)
  2. line-height:行高

    (1)xxpx:長度

    (2)xx(數值):倍數

    (3)xx%:百分比
  3. 段間距

    margin:(上下塌,左右加)
  4. text-align:水平對齊

    (1)left:左對齊

    (2)center:居中對齊

    (3)right:右對齊

    (4)justify:兩端對齊
  5. 文字顏色和背景顏色

    (1)color:前景色(文字顏色)

    (2)background[-color]:背景色
  6. vertical-align:垂直對齊

    (1)top:上對齊

    (2)middle:居中對齊

    (3)bottom:下對齊
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章