首頁 >web前端 >前端問答 >html中的css樣式的作用是什麼

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

藏色散人原創: 2023-02-02 10:31:272529瀏覽

html中的css樣式的作用是把頁面內容和修飾的效果分離開來管理，並且可以透過css來添加不同的修飾效果；對於HTML標籤來說，產生的頁面效果比較單一，雖然有屬性的修飾，但是更多的頁面效果的多樣化，還是要藉助於CSS樣式表。

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

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

CSS樣式表在HTML中的作用

#1.CSS樣式表作用：

對於HTML標籤來說，產生的頁面效果比較單一，雖然有屬性的修飾，但是更多的頁面效果的多樣化，還是要藉助於CSS樣式表。樣式表的使用，可以把頁面內容和修飾的效果分離開進行管理(html生成頁面以及相關的內容，css來添加不同的修飾效果)

2.CSS樣式表的應用一(內部樣式表)：放在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1

格式一：

<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>

標籤引用：

abd60ea8dd1669b3003e50da02cc2f561e775f133c55fc361f55f01002a55f30

問題：當一個標籤，既有選擇器樣式的使用，也有類樣式的引用，最終結果是如何的？

不同部分的屬性，做融合；相同部分的屬性，以類別樣式為準

##說明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文件，把c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927標籤中內容，照搬過來即可，直接寫樣式的聲明。

4.3html檔案如何關聯外部樣式表？都是放在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1

方式一：

<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>

推薦學習：《

css影片教學》

以上是html中的css樣式的作用是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html class 选择器样式表 background

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css中什麼表示間隙下一篇：css中什麼表示間隙

看更多