html style標(biāo)簽是什么意思？對(duì)于style標(biāo)簽的使用方法詳細(xì)說(shuō)明
發(fā)表時(shí)間：2023-09-04 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章主要講的是html style標(biāo)簽的定義和屬性介紹，先讓我們了解style標(biāo)簽在HTML中的一些用途和位置，然后介紹了使用中的一些方法和細(xì)節(jié)技巧，讓我們一起來(lái)看看吧html style標(biāo)簽的定義和用法：<style> 標(biāo)簽用于為 HTML 文檔定義樣式信息。在 style 中，...
本篇文章主要講的是html style標(biāo)簽的定義和屬性介紹，先讓我們了解style標(biāo)簽在HTML中的一些用途和位置，然后介紹了使用中的一些方法和細(xì)節(jié)技巧，讓我們一起來(lái)看看吧
html style標(biāo)簽的定義和用法：
<style> 標(biāo)簽用于為 HTML 文檔定義樣式信息。
在 style 中，您可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML 文檔。
type 屬性是必需的，定義 style 元素的內(nèi)容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
HTML <style> 標(biāo)簽實(shí)例：
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>必需的屬性：
type ： text/css ： 規(guī)定樣式表的 MIME 類(lèi)型。
html style標(biāo)簽的使用方法詳解：
</style>標(biāo)簽對(duì)中書(shū)寫(xiě)各種標(biāo)簽的樣式,可以是body也可以是h1,即將行內(nèi)樣式全寫(xiě)在一塊兒
比如10個(gè)標(biāo)簽都是同一個(gè)class的話，如果在行內(nèi)樣式中就需要寫(xiě)10條
而在style中寫(xiě)一條就成。
現(xiàn)在都是結(jié)構(gòu)(html)、樣式(css)、行為(js)相分離的設(shè)計(jì)模式
<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style>style標(biāo)簽在css樣式表中按其所在位置分三種：
1.內(nèi)嵌樣式表
2.內(nèi)部樣式表
3.外部樣式表
下面詳細(xì)解釋一下：
1.內(nèi)嵌樣式表是寫(xiě)在使用它的標(biāo)簽(Tag)內(nèi)的，例如要在<p>標(biāo)簽中使用，
其語(yǔ)法為：
<p style font-size:20pt>這段文字使用了內(nèi)嵌樣式表，更改了字體大小為20</p>
2.內(nèi)部樣式表不同于內(nèi)嵌樣式表，其是寫(xiě)在html網(wǎng)頁(yè)的<head></head>標(biāo)簽之間的，所以它對(duì)本網(wǎng)頁(yè)全部有效。應(yīng)注意的是，因?yàn)樗皇菍?xiě)在某一個(gè)標(biāo)簽內(nèi)的，所以在寫(xiě)的時(shí)候要注意，自己想在那個(gè)標(biāo)簽內(nèi)使用這個(gè)樣式表，再定義的時(shí)候也要寫(xiě)清楚，否則會(huì)造成整個(gè)頁(yè)面的混亂。例如：
<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<p class="mylayout">這段文字使用了樣式表</p>
<p>這段文字沒(méi)有使用樣式表</p>
</body>
</html>可以看到，在定義內(nèi)部樣式表的時(shí)候，<style>前面聲明的時(shí)候應(yīng)該首先聲明在哪個(gè)標(biāo)簽里使用這個(gè)樣式表，如果并不想在該網(wǎng)頁(yè)所有的此標(biāo)簽中都使用這個(gè)樣式表則在聲明的標(biāo)簽后面加上自己定義的一個(gè)樣式表名稱(chēng)，例如上面的p.mylayout，意為只能在該網(wǎng)頁(yè)的<p>標(biāo)簽中使用此樣式表，在要使用這個(gè)樣式表的<p>標(biāo)簽中聲明，聲明方式為<標(biāo)簽 自定義樣式表名稱(chēng)>
利用樣式表選擇，你可以用同樣的HTML標(biāo)簽構(gòu)成不同的樣式。比如說(shuō)，你希望段落<p>有兩種樣式，一種是居中對(duì)齊，一種是居右對(duì)齊。你就可以寫(xiě)如下樣式：
p.right {text-align:right}
p.center {text-align:center}其中right和center就是兩個(gè)樣式表。然后你就可以引用這兩個(gè)樣式表，示例代碼如下：
<p class="center">這一段居中顯示。</p>
<p class="right">這一段是居右顯示。</p>
也可以不用HTML 標(biāo)簽，直接用“.”加上樣式表名稱(chēng)。示例代碼如下：
.center {text-align: center}這種通用的樣式表名稱(chēng)就沒(méi)有標(biāo)簽的局限性，可以用于不同的標(biāo)簽。比如：
<h1 class = "center">這個(gè)標(biāo)題居中顯示。</h1>
<p class = "center">這個(gè)段落居中顯示。</p>
3.外部樣式表
外部樣式表就是將樣式表的內(nèi)容單獨(dú)寫(xiě)到一個(gè)notepad中，并保存為后綴為.css的文件，在你寫(xiě)的想要調(diào)用的網(wǎng)頁(yè)中加上如下的代碼（當(dāng)然還是加到<head></head>之間）：
<link href="你css文件所在的文件夾" rel="stylesheet" type="text/css">
例如：
先寫(xiě)一段代碼并存為p.css
p.mylayout {font-size:20pt; border-width:1px; color:blue; }然后在你寫(xiě)的網(wǎng)頁(yè)中調(diào)用這個(gè)樣式表：
<HTML>
<head>
<link href="p.css所在的相對(duì)路徑" rel="stylesheet" type="text/css">
</head>
<body>
<p class="mylayout"> 這個(gè)標(biāo)題使用了Style 。</p>
<p>這個(gè)標(biāo)題沒(méi)有使用Style。</p>
</body>
</HTML>
所以一個(gè)外部樣式表可以被很多網(wǎng)頁(yè)調(diào)用，這就是外部樣式表的好處。
樣式表也可以串聯(lián)，即一個(gè)網(wǎng)頁(yè)用多個(gè)css，其串聯(lián)的順序是：內(nèi)嵌>內(nèi)部>外部>瀏覽器自身的
也就是說(shuō)當(dāng)一個(gè)網(wǎng)頁(yè)有內(nèi)部css時(shí)，它在的調(diào)用外部css就被覆蓋了（即外部css不起作用）
css樣式表定義時(shí)的嵌套說(shuō)明：
p b {color:blue;}
使用時(shí)：
<p>這段文字在b標(biāo)簽中的為<b>藍(lán)色</b></p>
cursor:hand 這個(gè)屬性是將鼠標(biāo)變成手的形狀。
【小編的相關(guān)文章】
html em標(biāo)簽的作用是什么？<em>和<i>標(biāo)簽的區(qū)別
html5 output標(biāo)簽是什么意思？html5 output標(biāo)簽的使用方法
以上就是html style標(biāo)簽是什么意思？關(guān)于style標(biāo)簽的使用方法詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
