html style標簽的定義和用法:
style 標簽用于為 HTML 文檔定義樣式信息。
在 style 中,您可以規定在瀏覽器中如何呈現 HTML 文檔。
type 屬性是必需的,定義 style 元素的內容。唯一可能的值是 text/css 。
style 元素位于 head 部分中。
HTML style 標簽實例:
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 : 規定樣式表的 MIME 類型。
html style標簽的使用方法詳解:
/style 標簽對中書寫各種標簽的樣式,可以是body也可以是h1,即將行內樣式全寫在一塊兒
比如10個標簽都是同一個class的話,如果在行內樣式中就需要寫10條
而在style中寫一條就成。
現在都是結構(html)、樣式(css)、行為(js)相分離的設計模式
p id= xxx === style #xxx{} /style p >style標簽在css樣式表中按其所在位置分三種:
1.內嵌樣式表
2.內部樣式表
3.外部樣式表
下面詳細解釋一下:
1.內嵌樣式表是寫在使用它的標簽(Tag)內的,例如要在 p 標簽中使用,
其語法為:
p style font-size:20pt 這段文字使用了內嵌樣式表,更改了字體大小為20 /p2.內部樣式表不同于內嵌樣式表,其是寫在html網頁的 head /head 標簽之間的,所以它對本網頁全部有效。應注意的是,因為它不是寫在某一個標簽內的,所以在寫的時候要注意,自己想在那個標簽內使用這個樣式表,再定義的時候也要寫清楚,否則會造成整個頁面的混亂。例如:
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 >可以看到,在定義內部樣式表的時候, style 前面聲明的時候應該首先聲明在哪個標簽里使用這個樣式表,如果并不想在該網頁所有的此標簽中都使用這個樣式表則在聲明的標簽后面加上自己定義的一個樣式表名稱,例如上面的p.mylayout,意為只能在該網頁的 p 標簽中使用此樣式表,在要使用這個樣式表的 p 標簽中聲明,聲明方式為 標簽 自定義樣式表名稱
利用樣式表選擇,你可以用同樣的HTML標簽構成不同的樣式。比如說,你希望段落 p 有兩種樣式,一種是居中對齊,一種是居右對齊。你就可以寫如下樣式:
p.right {text-align:right}p.center {text-align:center}其中right和center就是兩個樣式表。然后你就可以引用這兩個樣式表,示例代碼如下:
p >也可以不用HTML 標簽,直接用“.”加上樣式表名稱。示例代碼如下:
.center {text-align: center}這種通用的樣式表名稱就沒有標簽的局限性,可以用于不同的標簽。比如:
h1 class = center 這個標題居中顯示。 /h1 p class = center 這個段落居中顯示。 /p3.外部樣式表
外部樣式表就是將樣式表的內容單獨寫到一個notepad中,并保存為后綴為.css的文件,在你寫的想要調用的網頁中加上如下的代碼(當然還是加到 head /head 之間):
link href= 你css文件所在的文件夾 rel= stylesheet type= text/css例如:
先寫一段代碼并存為p.css
p.mylayout {font-size:20pt; border-width:1px; color:blue; }然后在你寫的網頁中調用這個樣式表:
HTML head link href= p.css所在的相對路徑 rel= stylesheet type= text/css /head body p >所以一個外部樣式表可以被很多網頁調用,這就是外部樣式表的好處。
樣式表也可以串聯,即一個網頁用多個css,其串聯的順序是:內嵌 內部 外部 瀏覽器自身的
也就是說當一個網頁有內部css時,它在的調用外部css就被覆蓋了(即外部css不起作用)
css樣式表定義時的嵌套說明:
p b {color:blue;}
使用時:
p 這段文字在b標簽中的為 b 藍色 /b /pcursor:hand 這個屬性是將鼠標變成手的形狀。
【小編的相關文章】
html em標簽的作用是什么? em 和 i 標簽的區別
html5 output標簽是什么意思?html5 output標簽的使用方法
以上就是html style標簽是什么意思?關于style標簽的使用方法詳解的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答