5.前端CSS—屬性

阿新 • • 發佈：2020-08-08

一、字型屬性
000 黑
fff 白
f00 紅
333 灰
222 深灰
ccc 淺灰
二、文字屬性
三、背景屬性
四、位置屬性

一、字型屬性

1、font-size（字型大小）

p{
	font-size: 14px;
}

font-size 屬性可設定字型的尺寸。

px：畫素，穩定和精確

%：把 font-size 設定為基於父元素的一個百分比值，佈局時用到。

em：移動端字型樣式大小，相對於其父元素來設定字型大小

rem：可以換算為各種移動端，相對於根元素來設定字型大小

2、font-weight（字型粗細）

font-weight字重，可用來調整字型粗細。

/*font-weight: normal;*/
/*font-weight: bold;*/
/*font-weight: bolder;*/
font-weight: 500;

取值說明：

值	描述
normal	預設值，標準粗細
bord	粗體
border	更粗
lighter	更細
100~900	設定具體粗細，400等同於normal，而700等同於bold
inherit	繼承父元素字型的粗細

3、font-family（字體系列）

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif;
}

font-family可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

p{
    width: 300px;
    height: 60px;

    /*綜合性寫法*/
    font: 15px/30px"宋體";
    /* 等價於
    font-size: 14px;
    line-height: 30px;
    font-family: '宋體';
    */
}

使用font-family注意幾點：

網頁中不是所有字型都能用哦，因為這個字型要看使用者的電腦裡面裝沒裝，
比如你設定： font-family: "華文彩雲"; 如果使用者電腦裡面沒有這個字型，
那麼就會變成宋體
頁面中，中文我們只使用：微軟雅黑、宋體、黑體。
如果頁面中，需要其他的字型，那麼需要切圖。英語：Arial 、 Times New Roman
為了防止使用者電腦裡面，沒有微軟雅黑這個字型。
就要用英語的逗號，隔開備選字型，就是說如果使用者電腦裡面，
沒有安裝微軟雅黑字型，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字型可以有無數個，用逗號隔開。
要將英語字型，放在最前面，這樣所有的中文，就不能匹配英語字型，就自動的變為後面的中文字型： font-family: "Times New Roman","微軟雅黑","宋體";
所有的中文字型，都有英語別名，要知道：微軟雅黑的英語別名：font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";font屬效能夠將font-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
行高可以用百分比，表示字號的百分之多少。一般來說，都是大於100%的，因為行高一定要大於字號。 font:12px/200% “宋體” 等價於 font:12px/24px “宋體”; 反過來，比如： font:16px/48px “宋體”;等價於 font:16px/300% “宋體”

CSS font-family 各名稱一覽表:

https://blog.csdn.net/cddcj/article/details/70739481

4、color（字型顏色、背景顏色）

顏色表示方法有三種：顏色名稱單詞（如:red）、rgb表示（如:rgb(255,0,0) ）、十六進位制值（如:#FF0000）。

（1）RGB原理：光學顯示器每個畫素都是由三原色（紅綠藍）發光原件組成的，靠明亮不同調成不同的顏色。

　　用逗號隔開，r、g、b的值，每個值的取值範圍0~255，一共256個值；其中255代表純色，0代表無色。

常見顏色

div{
    /*黑色：*/
    background-color: rgb(0,0,0);
    /*光學顯示器，每個元件都不發光，黑色的。*/

    /*白色：*/
    background-color: rgb(255,255,255);

    /*顏色可以疊加，比如黃色就是紅色和綠色的疊加：*/
    background-color: rgb(255,255,0);

    background-color: rgb(111,222,123);
    /*就是紅、綠、藍三種顏色的不同比例疊加。*/
}

後來還演化出了rgba，可以用來實現透明度的調整：

div{
    background-color: rgba(0,0,0,.1);
}

（2）16進製表示法：

所有用#開頭的值，都是16進位制的。例如：#ff0000：紅色
　　16進製表示法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。ff就是10進位制的255 ，00 就是10進位制的0，00就是10進位制的0。所以等價於rgb(255,0,0)。

　　十六進位制可以簡化為3位，所有#aabbcc的形式（2位2位一樣的），能夠簡化為#abc;

常見：

000 黑

fff 白

f00 紅

333 灰

222 深灰

ccc 淺灰

二、文字屬性

1、text-align（文字匹配）

text-align 屬性規定元素中的文字的水平對齊方式。

值	描述
left	左對齊，預設值
right	右對齊
center	居中對齊
justify	兩端對齊

2、text-decoration（文字裝飾）

值	描述
none	預設，定義標準的文字。
underline	定義文字下的一條線
overline	定義文字上的一條線
line-through	定義穿過文字下的一條線
inherit	繼承都元素的text-decoration屬性的值

/*設定線的顏色*/
text-decoration: underline blue;

使用最頻繁的是消除a標籤的預設樣式

text-decoration: none;

3、line-height（行高）

p{
    /*行高*/
    line-height: 100px;
}

常用於文字垂直居中

（1）單行文字垂直居中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 50px;
            border: 1px solid red;
            /*行高的意思：
            公式：行高=盒子的高度，讓文字垂直居中，
            但是隻適應於單行文字。
            */
            line-height: 50px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div>
        一行文字
    </div>
</body>

　公式：行高=盒子的高度，讓文字垂直居中（只適用於單行）

（2）多行文字垂直居中

注意：line-height一定要大於font-size，否則所有字都會擠在一起，影響美觀。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            /*height: 200px;*/
            height: 160px;   /* padding加了40px,height一定要減40px */
            border: 1px solid red;
            /*運用padding居中*/
            padding-top: 40px;
            line-height: 30px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <!--一個行高30px,一共4列，那就是120px
    總的高度是200px,如果讓整個行高垂直居中在當前的盒子中。
    （200-120)/2=40px，設定padding-top,height高度
    -->
    <div>
       第一行文字
       第二行文字
    </div>
</body>

一個行高（line-height）30px,一共4列，那就是120px，總的高度是200px,如果讓整個行高垂直居中在當前的盒子中。(200-120)/2=40px，設定padding-top=40px, height高度-40px。

　　總之：利用padding和line-height實現多行垂直居中需要通過精確計算實現。

4、cursor（游標）

p{
    text-decoration: underline blue;
    color: blue;
    cursor: pointer;  /* point在滑鼠移上去時，游標呈現為指示連結的指標（一隻手） */
}

cursor 屬性規定要顯示的游標的型別（形狀）。該屬性定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀。

5、text-indent（首行縮排）

text-indent 屬性規定文字塊中首行文字的縮排。

注意：允許使用負值。如果使用負值，那麼首行會被縮排到左邊。

p{
    /*text-indent:50px;*/
    /* 首行縮排以em為準 */
    text-indent: 2em;   /* 不論字型大小， 2格字*/
}

三、背景屬性

常用背景相關屬性：

屬性	描述
background-color	規定要使用的背景顏色。
background-image	規定要使用的背景影象。
background-size	規定背景圖片的尺寸。
background-repeat	規定如何重複背景影象。
background-attachment	規定背景影象是否固定或者隨著頁面的其餘部分滾動。
background-position	規定背景影象的位置。
inherit	規定應該從父元素繼承background屬性的設定。

1、background-image（背景圖片）和background-repeat（平鋪）

網頁設定背景圖方法：

body{
    background-image: url("./images/bojie.jpg");
}

background-repeat取值範圍：

值	描述
repeat	預設。背景影象將在垂直方向和水平方向重複。
repeat-x	背景影象將在水平方向重複。
repeat-y	背景影象將在垂直方向重複。
no-repeat	背景影象將僅顯示一次。
inherit	規定應該從父元素繼承background-repeat屬性的設定。

2、background-position（背景影象位置）

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1500px;
        height: 1600px;
        background-image: url(./images/bojie.jpg);
        background-repeat: no-repeat;

        /*第一個是水平位置，第二個是垂直位置
        正值的時候，第一個值往右偏移，第二個值表示往下偏移
        負值則相反
        */
        /*background-position: 100px 100px;*/
        background-position: 100px -100px;
    }
</style>

background-position:200px 100px——第一個是水平位置，第二個是垂直位置
正值的時候，第一個值往右偏移，第二個值表示往下偏移；負值則正好相反。

由於匯入背景圖片的時候，預設就會平鋪。因此需要設定background-repeat: no-repeat;

3、雪碧圖（精靈圖）技術

　background-position除了移動位置，更重要的是用來定位切圖，也叫css精靈圖。用處：為了避免網站大量img，請求過多，把很多小圖示合併到一張圖上，然後通過css的background-position切出來需要的圖片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧圖</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        box1{
            width: 48px;
            height: 48px;
            background-image: url("./images/1.png");
            background-repeat: no-repeat;
            background-position: 0 -528px;/*在Photoshop上檢視寬高*/
        }
        box2{
            width: 48px;
            height: 48px;
            background-image: url("./images/1.png");
            background-repeat: no-repeat;
            background-position: 0 -440px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

設定背景圖位置方向：

　　水平方向： left center right

　　垂直方向： top center bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 1500px;
        height: 1600px;
        border: 1px solid red;
        background-image: url(./images/bojie.jpg);
        background-repeat: no-repeat;
        /*水平方向 left center right
          垂直方向 top center bottom
        */
        background-position: center top;
    }
</style>
</head>
<body>
    <div>
        一行文字
    </div>

</body>
</html>

常規寫法

body{
    background-image: url("./images/banner.jpg");
    background-repeat: no-repeat;
    /*水平居中通天banner圖*/
    background-position: center top;
}

綜合屬性寫法：

body{
    /*設定綜合屬性*/
    background: red url("./images/banner.jpg") no-repeat center top;
}

4、background-attachment（固定背景影象）

div{
    /*綜合屬性*/
    width: 1200px;
    height: 1600px;
    background: url(./images/bojie.jpg) no-repeat 0 0;
    /*固定背景*/
    background-attachment: fixed;
    color: white;
}

把固定背景屬性也加入綜合屬性：

div{
    width: 1200px;
    height: 1600px;
    /*綜合屬性*/
    background: url(./images/bojie.jpg) no-repeat 0 0 fixed;
    color: white;
}

設定了background-attachment後，下上滾動頁面內容時，背景圖片保持不變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-attach</title>
    <style type="text/css">
    div{
        /*綜合屬性*/
        width: 1200px;
        height: 1600px;
        background: url(./images/bojie.jpg) no-repeat 0 0 fixed;
        /*固定背景*/
        /*background-attachment: fixed;*/
        color: white;
    }
    </style>
</head>
<body>
    <div>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
        <p>一行文字</p>
    </div>
</body>
</html>

四、位置屬性

position，定位有三種：1.相對定位——position:relative;2.絕對定位——position:absolute;3.固定定位——position:fixed;