CSS 文字屬性與值

標籤：文字   ext   插入   otto   填充   類型   lower   位置   標準   

HTML編輯文本，通過CSS的設定屬性賦予HTML網頁活力，改變文字類型、背景以及插入圖片、視頻、音頻等，使網頁更具生動。

• CSS中的文字屬性

font-weight: bold;       //改變字型粗細            normal   //正常字型、標準字型font-style:oblique;     //字型風格（oblique傾斜）text-decoration：underline;    //文字修飾（underline 底線）                overline;    （上劃線）                line-throug;   （刪除線）                 none; （取消文字底線）text-indent: 20px;    //文本首行縮排text-align: right /center /left      //文本對齊text-transform: uppercase; //文本轉換（uppercase小寫轉化為大寫）                lowercase;    （大寫轉化為小寫）text-shadow: 0 2px 5px red;   //文本陰影letter-spacing: 20px;    //字間距word-spacing: 20px;   //詞間距（英文單詞）line-height:20px;    //兩個文本中的距離、行距

練習一個首字母大寫如下：

<p>my english is very good</p>

通過CSS更改如下：

p:first-letter{    text-transform: uppercase;}

• CSS中的div屬性

在HTML中建立一個div

<div class="box1"></div>

background-image：url("img/圖片路徑");     //插入圖片background-repeat：no-repeat;      //平鋪方式（不平鋪）                                  “repeat-x”;    （橫向X軸平鋪）                                   “repeat-y”;     （縱向Y軸平鋪）

在CSS中實現圖片平鋪：【background-repeat：屬性值】

在CSS中實現圖片：不平鋪

.box1{    width: 100px;    height: 100px;    border: dashed red;    background-image: url(../img/picter/ai2003.jpg);    background-repeat: no-repeat;}

在CSS中實現圖片X軸平鋪：

.box1{    width: 500px;    height: 300px;    border: dashed red;   //畫布邊框    background-size: 100px;    //圖片大小
                     contain;  //上下填充畫布
                     cover;    //完全填充畫布，影響圖片原貌
    background-image: url(../img/picter/ai2003.jpg);    background-repeat: repeat-x;}

在CSS中實現圖片的位置： 【background-position:屬性值】

 

.box1{    width: 500px;    height: 100px;    border: dashed red;    background-size: 100px;    background-image: url(../img/picter/logo_db.png);    //圖片路徑    background-repeat: no-repeat;     //不平鋪    background-position: center center;     //圖片置中
                         bottom lift ;    //左下角
                         top right;    // 右上方
                         50px 50px ;   //自訂位置

}

 

CSS中的背景附件：【background-attachment:屬性值】

 

background-attachment:fixed;    //固定圖片位置

 

 

 

 

綜合上訴結構，可以* 綜合簡寫屬性 顏色 地址 平鋪方式 是否固定 （不需要可以不寫） 位置

background: pink url ("img/圖片路徑") no-repeat center center;background-size: 100%;

 

CSS 文字屬性與值