第3章CSS文字效果


3.1 文字樣式

3.1.1 字體

    p {font-family:黑體,Arial,宋體,sans-serif;}

        以上CSS代碼中聲明了4種字體,瀏覽器渲染字體的規則為:優先選擇黑體,如果用戶的電腦中沒有黑體字體,則選擇Arial。如果一直選到最后都沒有,則選擇瀏覽器默認的字體。

        如果字體名稱中含有空格,則添加這個字體的時候要加上雙引號,如”Times New Roman”。


        如果網頁中需要特殊字體,也可以通過圖形軟件做成小的圖片插入到網頁中

3.1.2 大小

        通過font-size來設置文字大小,該屬性值可以是絕對大小也可以是相對大小。

        絕對大小如:

        P {font-size:15px;}

        P {font-size:10mm;}

        常用的絕對單位如下:

絕對單位

說明

in

inch,英寸

cm

centimeter,厘米

mm

millmiter,毫秒

pt

point,印刷點


相對大小如:

    P {font-size:200%;}

    P {font-size:0.5em;}

    P {font-size:15pt;}

相對單位

說明

%

相對於父標簽的百分比,如果父標簽不存在,則相對瀏覽器默認字體大小(16px)的百分比

em

相對於父標簽字體大小的倍數,如果父標簽不存在,則相對瀏覽器默認字體大小(16px)的倍數

px

pixel,像素


注:絕對大小不隨顯示器分辨率和父標簽的大小而改變;相對大小隨顯示器分辨率和父標簽的大小改變。

3.1.3 顏色

    顏色設置有如下幾種方法:

    h{color:red;}

    h{color:#F00;}

    h{color:#FF0000;}

    h{color:rgb(255,0,0);}

    h{color:rgb(100%,0%,0%);}

3.1.4 粗細

         粗細設置有如下幾種方法:

         h{font-weight:lighter;}

         h{font-weight:100;}

        h{font-weight:200;}

        h{font-weight:bold;}

        h{font-weight:normal;}

3.1.5 斜體

         斜體設置有如下幾種方法:

         h{font-style:italic;}

         h{font-style:normal;}

3.1.6 下划線、頂划線和刪除線

         下划線 h{text-decoration:underline;}

         頂划線 h {text-decoration:overline;}

         刪除線 h{text-decoration:line-through;}

3.1.7 大小寫

         單詞首字母大寫 p{text-transform:capitalize;}

         全部大寫 p {text-transform:uppercase;}

         全部小寫 p{text-transfrom:lowercase;}

3.2 段落文字

3.2.1 水平對齊

         左對齊 p {text-align:left;}

         右對齊 p {text-align:right;}

         居中對齊 p {text-align:center;}

         兩端對齊 p {text-align:justify;}

3.2.2 垂直對齊

         頂端對齊 p {text-align:top;}

         底端對齊 p {text-align:bottom;}

         中間對齊 p {text-align:middle;}


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: