css常用字體屬性與背景屬性介紹
51CTO博客 發(fā)布時間：2022-02-25 15:54:13 作者：酷爾。 
我要評論
我要評論這篇文章主要介紹了 css常用字體屬性與背景屬性，css可以做出很多使html樣式的改變,今天主要說一說字體樣式與背景樣式，字體樣式的分類根據(jù)名字就可以判斷出來，下面文章的詳細內(nèi)容需要的小伙伴可以參考一下，希望對你有所幫助
一、常用的字體屬性都有什么？
1.屬性分類
- 字體樣式的分類根據(jù)名字就可以判斷出來
①font-size:
字體大小,這個屬性后面跟的是標簽中包含的字體大小,衡量單位是像素px
代碼示例：
<!-- 字體的屬性一般有樣式,大小,傾斜度,粗細,行高(行與行之間的間隔) -->
<!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:
- 這個標簽改變的是使用哪個版本的字體:幼圓、黑體....
代碼示例：
<!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;
- 這個屬性改變的是字體的粗細程度數(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è)置字體的粗細,一般700表示加粗,400表示正常 */
p {
/* font-weight: 700; 粗*/
/* font-weight: 100; 細*/
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è)置字體是否傾斜,默認是不傾斜 -->
<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 ‘幼圓’
- 字體屬性大雜燴,將一個標簽所有字體屬性寫在一塊
- 是否傾斜,粗細程度，字體大小行間距,字體樣式
代碼示例：
<!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標簽的字體限定與div標簽的字體限定有相同的結(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;
- 背景圖片是如何進行展示的,如果不改這個屬性默認從
- 左上角進行對齊,修改會會將中央位置放在中間
代碼示例：
<!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;
- 不加這個屬性的話默認圖片是重復(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中的字體圖標的方法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-17
這篇文章主要介紹了CSS字體、文本、列表屬性的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-22
CSS font-variation 可變字體的魅力(實例詳解)
本系列文章圍繞 CSS/Web動畫 展開，涉及一些容易忽視或是十分有趣的 CSS 細節(jié)。對CSS font-variation 可變字體實現(xiàn)代碼感興趣的朋友一起看看吧2022-03-03
