html中的css樣式的作用是什麼

html中的css樣式的作用是把頁面內容和修飾的效果分離開進行管理，並可以通過css來新增不同的修飾效果；對於HTML標籤來說，產生的頁面效果比較單一，雖然有屬性的修飾，但是更多的頁面效果的多樣化，還是要藉助於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: "微軟雅黑";}
h3 {color: pink;}
</style>
</head>
<body>這是我的第一句話。 
這是我的第二句話
這是我的第三句話
<h1>我是標題標籤H1</h1>
<h2>我是標題標籤H2</h2>
<h3>我是標題標籤H3</h3>
</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>
我是段落一
<h1 >我是標題標籤h1</h1>
<h2 class="test5">我是標題標籤h2</h2>
</body>
</html>
登入後複製

推薦學習：《》

以上就是html中的css樣式的作用是什麼的詳細內容，更多請關注TW511.COM其它相關文章！