字體和顏色樣式——css學習筆記


                                        

  cs 有許多樣式文本的屬性,本節主要是使用css來控制文本的 字體,格式 ,顏色,文本修飾

 

一:改變字體和指定字體外觀的屬性

1: 用font-family屬性定義網頁中的字體,每個font-family包括一系列具相同特征的字體

      字體系楊浦五種: sans-serif ‚serif   monospace   cursive和fantasy. 而每個系有包括許多字體

 
Sans-serif Family   系列是沒有襯線的字體 在電腦頻幕上這些字體要比Serif字體更具可讀性

Ssrif 系列是有襯線(指字母主線端的短細線)的字體,一般用於報紙印刷
 Monospace Family系列的字母具有相同寬度。這些字體主要用來顯示軟件代碼實例

Cursive 系列是一些看起來像是手寫的字體,有時用於標題

 Fantasy 系列是一些有固定裝飾的字體,這些字體並不多見,在規范Web設計中不常用。

body{
             font-family: Verdana, Geneva, Arial, sans-serif; 
}

 

 2:用font-size屬性控制字體大小

body{
           font-size: 14px;(使用像素)  百分數用與別的字體大小的相對值來定義字體大小<font-size:  150%;>
           還可以用em  定義字體大小  用“em ” 是制定比例因數  <font-size:1.2em;> 還有一種就是關鍵字 <font-size:  small;>
}

 

 

 

 

3: 用color屬性給文本添加顏色 

body{
          color:  silver;(用詞來指定顏色)
}

 

4:font-weight屬性設置字體的粗細

body{
           font-weight:  bold, lighter, normal, bolder;
}

 

5:用text-decoration屬性給文本添加更多樣式。

       應用text-decoration屬性,可以用overlines,underlines和line-thoughs等來修飾文本

body{
           text-decoration: underline;
}

 

 二:給字體添加樣式

   italic(斜體) 文本  是向右傾斜的有時候多一些彎曲的襯線,可以用font-style屬性在css中給文本添加斜體(italic)樣式:

Italic和oblique是讓字體傾斜顯示的兩種格式。

font-style:  italic;

有的字體並不支持italic(斜體)格式,就用oblique斜體文本代替。oblique也是傾斜的,不過字體不是專門設計的傾斜字母,瀏覽器只是把普通字母傾斜顯示了

font-style:  oblique;

 

 三:  如何制定Web 顏色?方法有。。。

      1.  可以用顏色名直接定義(17中顏色)17種顏色名預先定義了紅色,綠色和藍色三原色的比例

          在css中可以這么寫

body {
             background-color:  silver;(css顏色名不分大小寫)
}                                   ↓寫顏色名

   2. 可以根據紅,綠,藍的相對百分比來定義顏色

   3. 可以用十六進制代碼定義——(是描述紅,綠,藍成分多少的簡略表達法) (常用)

           (1)  十六進制代碼是以#開頭的如  #cc6600.  則

                     前兩位代表紅色,中間代表綠色,最后兩位代表藍色。

           (2) 十六進制代碼基於16個數字(0-f)的。用十六進制,從0到15只需以為數就夠了,9以上用字母

                 如看到“b”  就知道是代表11

           (3) 把十六進制顏色分成三部分: 每個十六進制顏色都由紅色,綠色,藍色三部分組成。

                    #  cc    66   00

                        ↓紅    綠    藍

               把每個十六進制數轉化成相應的十進制數  每部分的值都可以換算成0—255的一個數。

                         cc-- 

                        ↓12×16=192     192+12=204——十六進制的204等於十六進制的CC

               下面的也這么算  (6x16)+6=102      (0x16)+0=0

              完成

 

四: 關於text-decoraions的所有內容《含有下划線》

       文本修飾允許你在瀏覽器,閃爍文本中添加一些underlines,overlines, line-throughts之類的修飾效果。

      要添加文本修飾,只要在元素中設置tex-decorations屬性便可

           

em{
          text-decoration: line-through;
}這條規則將會使元素<em>d的文本中央有條線穿過
如果文本繼承了你不想要的文本修飾,用“none”就可以去掉
           em{
                text-decoration: none;(文本就沒有修飾了)
 }

 

 

 五:行間距

line-height屬性可以定義文本的行間距   可以像其他與字體有關的屬性一樣,也可以用像素,em或百分數等與字體大小有關的值定義行間距
 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM