CSS 文本屬性與值

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%;