本篇文章主要讲的是html style标签的定义和属性介绍,先让我们了解style标签在HTML中的一些用途和位置,然后介绍了使用中的一些方法和细节技巧,让我们一起来看看吧
html style标签的定义和用法:
c9ccee2e6ea535a969eb3f532ad9fe89 标签用于为 HTML 文档定义样式信息。
在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。
style 元素位于 head 部分中。
HTML c9ccee2e6ea535a969eb3f532ad9fe89 标签实例:
<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标签的使用方法详解:
531ac245ce3e4fe3d50054a55f265927标签对中书写各种标签的样式,可以是body也可以是h1,即将行内样式全写在一块儿
比如10个标签都是同一个class的话,如果在行内样式中就需要写10条
而在style中写一条就成。
现在都是结构(html)、样式(css)、行为(js)相分离的设计模式
<p id="xxx">===><style>#xxx{}</style> <p class="xxx">===><style>.xxx{}</style> <body></body>===><style>body{}</style>
style标签在css样式表中按其所在位置分三种:
1.内嵌样式表
2.内部样式表
3.外部样式表
下面详细解释一下:
1.内嵌样式表是写在使用它的标签(Tag)内的,例如要在e388a4556c0f65e1904146cc1a846bee标签中使用,
其语法为:
<p style font-size:20pt>这段文字使用了内嵌样式表,更改了字体大小为20</p>
2.内部样式表不同于内嵌样式表,其是写在html网页的93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1标签之间的,所以它对本网页全部有效。应注意的是,因为它不是写在某一个标签内的,所以在写的时候要注意,自己想在那个标签内使用这个样式表,再定义的时候也要写清楚,否则会造成整个页面的混乱。例如:
<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>这段文字没有使用样式表</p> </body> </html>
可以看到,在定义内部样式表的时候,c9ccee2e6ea535a969eb3f532ad9fe89前面声明的时候应该首先声明在哪个标签里使用这个样式表,如果并不想在该网页所有的此标签中都使用这个样式表则在声明的标签后面加上自己定义的一个样式表名称,例如上面的p.mylayout,意为只能在该网页的e388a4556c0f65e1904146cc1a846bee标签中使用此样式表,在要使用这个样式表的e388a4556c0f65e1904146cc1a846bee标签中声明,声明方式为7153fbce84efa52457a58477d5c0d744
利用样式表选择,你可以用同样的HTML标签构成不同的样式。比如说,你希望段落e388a4556c0f65e1904146cc1a846bee有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:
p.right {text-align:right} p.center {text-align:center}
其中right和center就是两个样式表。然后你就可以引用这两个样式表,示例代码如下:
<p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p>
也可以不用HTML 标签,直接用“.”加上样式表名称。示例代码如下:
.center {text-align: center}
这种通用的样式表名称就没有标签的局限性,可以用于不同的标签。比如:
<h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p>
3.外部样式表
外部样式表就是将样式表的内容单独写到一个notepad中,并保存为后缀为.css的文件,在你写的想要调用的网页中加上如下的代码(当然还是加到93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1之间):
<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 class="mylayout"> 这个标题使用了Style 。</p> <p>这个标题没有使用Style。</p> </body> </HTML>
所以一个外部样式表可以被很多网页调用,这就是外部样式表的好处。
样式表也可以串联,即一个网页用多个css,其串联的顺序是:内嵌>内部>外部>浏览器自身的
也就是说当一个网页有内部css时,它在的调用外部css就被覆盖了(即外部css不起作用)
css样式表定义时的嵌套说明:
p b {color:blue;}
使用时:
<p>这段文字在b标签中的为<b>蓝色</b></p>
cursor:hand 这个属性是将鼠标变成手的形状。
【小编的相关文章】
html em标签的作用是什么?907fae80ddef53131f3292ee4f81644b和5a8028ccc7a7e27417bff9f05adf5932标签的区别
html5 output标签是什么意思?html5 output标签的使用方法
Atas ialah kandungan terperinci html style标签是什么意思?关于style标签的使用方法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Dreamweaver Mac版
Alat pembangunan web visual

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
