溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“html中的css樣式的作用有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
html中的css樣式的作用是把頁面內容和修飾的效果分離開進行管理，并可以通過css來添加不同的修飾效果；對于HTML標簽來說，產生的頁面效果比較單一，雖然有屬性的修飾，但是更多的頁面效果的多樣化，還是要借助于CSS樣式表。
CSS樣式表在HTML中的作用
1.CSS樣式表作用：
對于HTML標簽來說，產生的頁面效果比較單一，雖然有屬性的修飾，但是更多的頁面效果的多樣化，還是要借助于CSS樣式表。樣式表的使用，可以把頁面內容和修飾的效果分離開進行管理(html生成頁面以及相關的內容，css來添加不同的修飾效果)
2.CSS樣式表的應用一(內部樣式表)：放在<head></head>
<style type="text/css">
選擇器(關鍵詞) {屬性1:屬性值1;屬性2:屬性值2...}
</style>
font-size：設置字體的大小
font-family：設置字體的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
p {color:red;font-size: 35px;font-family: "微軟雅黑";}
h4 {color: pink;}
</style>
</head>
<body>這是我的第一句話。
這是我的第二句話
這是我的第三句話
<h2>我是標題標簽H1</h2>
<h3>我是標題標簽H2</h3>
<h4>我是標題標簽H3</h4>
</body>
</html>
很多時候，部分標簽所需要的樣式效果是一樣的，就可以把該樣式，設置成共享的操作，只要標簽有需要，直接引用即可。
<style type="text/css">
.類名 {屬性1:屬性值1;屬性2:屬性值2...}
</style>
標簽引用：
<開始標簽 class="類名"></結束標簽>
疑問：當一個標簽，既有選擇器樣式的使用，也有類樣式的引用，最終結果是如何的？
不同部分的屬性，做融合；相同部分的屬性，以類樣式為準
| 文本屬性 | 說 明 |
|---|---|
| font-size | 字體大小 |
| font-family | 字體類型 |
| font-style | 字體樣式(風格) |
| color | 設置或檢索文本的顏色 |
| text-align | 文本對齊 |
CSS樣式表中背景屬性的設置：
背景色：background-color
背景圖片：background-image
設置背景圖片的平鋪方式：background-repeat:
repeat-x沿著X軸平鋪
repeat-y沿著Y軸平鋪
no-repeat 以實際圖片占背景位置大小
repeat 鋪滿整個頁面
背景圖片在加載時，需要借助于url()--->等同于src作用
background-image:url(圖片路徑信息)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.testcss {color: green;font-size: 25px;font-family: "微軟雅黑";}
.test1 {color: yellow;}
.tet4 {background-image:url(img/tupian03.jpg);background-repeat: repeat-y;}
</style>
</head>
<body class="test4">
我是第一個段落文字
我是第二個段落文字
我是斜體標簽i
我是第二個斜體標簽i
我是刪除線標簽del
</body>
</html>
3.CSS樣式表的應用二(行內樣式表)
3.1概述：樣式表只針對某一行內容會有修飾效果，或者把樣式表嵌入到某一行(某一個標簽內部)
3.2格式： 把style當作屬性來看待
<開始標簽 style="屬性1:屬性值1;屬性2:屬性值2..."></結束標簽>
我是第一個段落的內容
我是第二個段落的內容
我是big大標簽內容
4.CSS樣式表的應用三(外部樣式表)
4.1概述：把樣式表的聲明，不在嵌套html文件，而是單獨放在一個css文件中。真正意義上把html文件和css文件獨立分開，如果html文件有需要樣式，只需關聯即可。
4.2格式：單獨新建一個css文件，把<style></style>標簽中內容，照搬過來即可，直接寫樣式的聲明。
4.3html文件如何關聯外部樣式表？都是放在<head></head>
方式一：
<link href="寫上引用的外部css文件" rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<link href="css/外部css.css" rel="stylesheet" type="text/css" />
</head>
<body>
我是段落一
<h2 >我是標題標簽h2</h2>
<h3 class="test5">我是標題標簽h3</h3>
</body>
</html>
“html中的css樣式的作用有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
