欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css常用字體屬性與背景屬性介紹

51CTO博客   發(fā)布時間：2022-02-25 15:54:13   作者：酷爾。   我要評論
這篇文章主要介紹了 css常用字體屬性與背景屬性，css可以做出很多使html樣式的改變,今天主要說一說字體樣式與背景樣式，字體樣式的分類根據(jù)名字就可以判斷出來，下面文章的詳細(xì)內(nèi)容需要的小伙伴可以參考一下，希望對你有所幫助

一、常用的字體屬性都有什么？

1.屬性分類

  • 字體樣式的分類根據(jù)名字就可以判斷出來

①font-size:

字體大小,這個屬性后面跟的是標(biāo)簽中包含的字體大小,衡量單位是像素px

代碼示例：

<!-- 字體的屬性一般有樣式,大小,傾斜度,粗細(xì),行高(行與行之間的間隔) -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 字體的大小 可以拿body作為選擇器,改變body內(nèi)的文字大小-->

    <style>

     /* body {

        font-size: 70px;

    }        */

    p {

        font-size: 70px;

    }

    </style>

</head>

<body>

    <p>Hello World</p>

</body>

</html>

效果展示：

②font-family:

  • 這個標(biāo)簽改變的是使用哪個版本的字體:幼圓、黑體....

代碼示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        /* 設(shè)置字體的樣式,可以是網(wǎng)上有的各種類型的樣式,但一般選擇微軟雅黑 */

        body {

            /* font-family: 'Microsoft yahei'; */

            font-family: '黑體' ;

        }

    </style>

</head>

<body>

    <div>Hello Walord</div>

</body>

</html>

效果展示：

③font-weight: 700;

  • 這個屬性改變的是字體的粗細(xì)程度數(shù)值越大代表越粗,一般來說有以下幾種值

代碼示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        /* 設(shè)置字體的粗細(xì),一般700表示加粗,400表示正常 */

        p {

            /* font-weight: 700; 粗*/

            /* font-weight: 100; 細(xì)*/

            font-weight: 700;

        }

    </style>

</head>

<body>

    <p>Hello world</p>

</body>

</html>

效果展示：

④ font-style: italic;

  • 這個屬性管的是字體的樣式,是否傾斜
  p {

        font-style: oblique;

    }

    div {

        font-style: italic;

    }

    這兩個值都可以使字體傾斜,但oblique用于文本傾斜,用的較少

代碼示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 設(shè)置字體是否傾斜,默認(rèn)是不傾斜 -->

    <style>

        p {

            font-style: oblique;

        }

        div {

            font-style: italic;

        }

    </style>

    <title>Document</title>

</head>

<body>

    <p>Hello World</p>

    <div>Hello world</div>

</body>

</html>

效果展示：

⑤font: italic 700 20px/1px ‘幼圓’

  • 字體屬性大雜燴,將一個標(biāo)簽所有字體屬性寫在一塊
  • 是否傾斜,粗細(xì)程度，字體大小行間距,字體樣式

代碼示例：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 字體的樣式可以分開寫也可以寫在一起 -->

    <!-- 注意：寫在一起的話size與family不可以省略 -->

    <style>

        p {

            /* font: 70px '微軟雅黑' 可以這么寫*/

            font: italic 700 20px/1px '幼圓'

        }



        /* p標(biāo)簽的字體限定與div標(biāo)簽的字體限定有相同的結(jié)果,只有寫的形式上有所不同 */

        /* 注意區(qū)分weight與size的區(qū)別,weight不帶px，而size帶px */

        div {

            font-size: 20px;

            font-family: '幼圓';

            font-weight: 700;

            font-style: italic;

        }

    </style>

</head>



<body>

    <p>Hello world</p>

    <p>Hello world</p>

    <p>Hello world</p>

</body>



</html>

效果展示：

二、常用的背景屬性都有什么？

  • 一個好看的頁面會讓人看起來更舒服,所以熟悉常用的背景屬性尤為重要。

1.常見的背景屬性

①background-position: center center;

  • 背景圖片是如何進行展示的,如果不改這個屬性默認(rèn)從
  • 左上角進行對齊,修改會會將中央位置放在中間

代碼示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            width: 300px;

            height: 200px;

            background-image: url(../../e.jpg);

            background-size: 400px 300px;

            background-position: center;

        }

    </style>

</head>

<body>

    <div>



    </div>

    

</body>

</html>

效果展示：

添加屬性前：

添加屬性后：

② background-image: url(…/…/5.png);

  • 圖片的路徑,比較簡單,在此就不進行代碼示例了。

③background-repeat: no-repeat;

  • 不加這個屬性的話默認(rèn)圖片是重復(fù)展示的

代碼示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            width: 2000px;

            height: 800px;

            background-image: url(../../e.jpg);

            background-size: 400px 300px;

            /* background-position: center; */

            background-repeat: no-repeat;

        }

    </style>

</head>

<body>

    <div>



    </div>

    

</body>

</html>

效果展示：

添加屬性前：

添加屬性后：

④background-size: cover;

  • 這個修改的是背景的大小,而cover是進行覆蓋,也可以使用px設(shè)置大小

代碼示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            width: 2000px;

            height: 800px;

            background-image: url(../../e.jpg);

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

        }

    </style>

</head>

<body>

    <div>



    </div>

    

</body>

</html>

效果展示：

添加屬性前：

添加屬性后：

⑤background-attachment: fixed;

  • 這個屬性設(shè)置的是背景圖片是否根據(jù)字體進行滾動
  • fixed是不進行滾動
  • scroll是背景圖隨著字體的滾動而滾動

代碼示例：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>



        p {

            color: chartreuse;

        }



        /* 將整個圖片鋪滿整個屏幕 */

        body {

            /* 精確給出圖片的位置 */

            background-position: 0px 0px;

            background-image: url(../../1.png);

            background-repeat: no-repeat;

            background-size: cover;

            /* 設(shè)置背景圖片是滾動的還是固定的 */

            /* scroll是將圖片設(shè)為滾動,如果圖片滾動那么圖片會隨圖片上的東西拉伸,直至顯示完所有的東西 */

            /* background-attachment: scroll; */

            /* 圖片固定不會拉伸圖片以適應(yīng)圖片上的文字,圖片會保持原比 */

            background-attachment: fixed;

        }

    </style>

</head>



<body>



    <div class="firstdiv">Hello World</div>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>



</body>



</html>

效果展示：（由于作者不會做動圖,大家可以賦值代碼自己體會一下）

⑥大雜燴 background

代碼示例：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        /* 簡寫方式 */

        /* 顏色  路徑  滾動方式 平鋪方式  圖片位置 */

        body {

            background: chartreuse url(../../1.jpg) fixed no-repeat 0px 0px;

        }



        p {

            color: springgreen;

        }

    </style>

</head>



<body>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>

    <p>Hello World</p>



</body>



</html>

效果展示：

總結(jié)：

為什么將這兩個看似毫不相關(guān)的屬性放在一起進行介紹呢,作者意在讓大家體會對比學(xué)習(xí),字體屬性與背景屬性兩者都有很多屬性，拿出來幾個常用的屬性他們功能很多都類似,這是共同點,字體與背景又有許多不同的屬性,這樣區(qū)分學(xué)習(xí)會更利于我們進行理解。

到此這篇關(guān)于 css常用字體屬性與背景屬性介紹的文章就介紹到這了,更多相關(guān) css常用字體屬性與背景屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 讓我來教你使用css中的字體圖標(biāo)的方法

    這篇文章主要介紹了讓我來教你使用css中的字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-09-17

  • CSS字體、文本、列表屬性詳細(xì)介紹

    這篇文章主要介紹了CSS字體、文本、列表屬性的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-22

  • CSS font-variation 可變字體的魅力(實例詳解)

    本系列文章圍繞 CSS/Web動畫 展開，涉及一些容易忽視或是十分有趣的 CSS 細(xì)節(jié)。對CSS font-variation 可變字體實現(xiàn)代碼感興趣的朋友一起看看吧
    2022-03-03

最新評論