css中三种样式的方法(id,class,style)的实例分析
我们可以使用三种方法来给一个对象(例如div,span,table)应用样式。
1：使用#定义样式，并使用id为对象应用样式。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
<style type="text/css"><!--
#STYLE_1 { font-size: 20px; }
--></style>
</head>
<body>
<div id="STYLE_1">用Id来给对象应用样式</div>
</body>
</html>2：使用.定义样式，并使用class为对象应用样式。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
<style type="text/css"><!--
.STYLE_1 { font-size: 20px; }
--></style>
</head>
<body>
<div class="STYLE_1">用class来给对象应用样式</div>
</body>
</html>3：不定义样式，直接使用style为对象应用样式。
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Id</title> </head> <body> <div style="font-size:20px">用style来给对象应用样式</div> </body> </html>
使用这三种方法所产生的效果是相同的，但我们需要注意的是，这三种方法间的优先级问题。
如果我们对一个对象同时使用上述三种方法定义样式，会怎么样呢？
比如我们先定义一个#STYLE { font-size:12px; }再定义一个.STYLE { font-size:14px; }最后在对象上使用style="font-size:16px;"代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Id</title>
<style type="text/css"><!--
#STYLE { font-size: 12px; }
.STYLE { font-size: 14px; }
--></style>
</head>
<body>
<div id="STYLE" class="STYLE" style="font-size:16px">用三种方式同时来给对象应用样式</div>
</body>
</html>这种情况下，浏览器会根据三种方式的优先级，即style>id>class来为对象应用样式。上述例子中，div中的文字会显示为16px大小。
Atas ialah kandungan terperinci css中三种样式的方法(id,class,style)的实例分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Cara menggunakan kelas dan kaedah dalam Python
Apr 21, 2023 pm 02:28 PM
Konsep dan kejadian kelas dan kaedah Kelas (Kelas): digunakan untuk menerangkan koleksi objek dengan sifat dan kaedah yang sama. Ia mentakrifkan sifat dan kaedah yang biasa kepada setiap objek dalam koleksi. Objek ialah contoh kelas. Kaedah: Fungsi yang ditakrifkan dalam kelas. Kaedah pembinaan kelas __init__(): Kelas mempunyai kaedah khas (kaedah pembinaan) bernama init(), yang dipanggil secara automatik apabila kelas dijadikan instantiated. Pembolehubah instance: Dalam pengisytiharan kelas, atribut diwakili oleh pembolehubah tersebut dipanggil pembolehubah instance. Instantiation: Buat contoh kelas, objek khusus kelas. Warisan: iaitu, kelas terbitan (derivedclass) mewarisi kelas asas (baseclass)
Bagaimana untuk mengubah suai elemen.gaya
Nov 24, 2023 am 11:15 AM
Kaedah untuk elemen.gaya untuk mengubah suai elemen: 1. Ubah suai warna latar belakang elemen; 2. Ubah suai saiz fon elemen; Ubah suai penjajaran mendatar elemen. Pengenalan terperinci: 1. Ubah suai warna latar belakang elemen, sintaksnya ialah "document.getElementById("myElement").style.backgroundColor = "red";" 2. Ubah suai saiz fon elemen, dsb.
Cara mengubah suai gaya secara dinamik dalam bertindak balas
Dec 28, 2022 am 10:44 AM
Kaedah untuk bertindak balas untuk mengubah suai gaya secara dinamik: 1. Tambahkan ref pada elemen yang gayanya perlu diubah suai, dengan sintaks seperti "<div className='scroll-title clear-fix' ref={ this.manage }>" 2 . Melalui kawalan dinamik Perubahan keadaan mengubah gaya elemen 3. Dengan menggunakan kod JS dalam DOM, peralihan paparan dan penyembunyian DOM yang berbeza direalisasikan.
Apakah ciri baharu dalam gaya Vue3 dan cara menggunakannya
May 14, 2023 pm 10:52 PM
Ciri baharu gaya versi Vue3.2 telah membuat banyak peningkatan kepada gaya komponen fail tunggal, seperti gaya setempat, pembolehubah css dan gaya yang terdedah kepada templat. (Perkongsian video pembelajaran: tutorial video vue) 1. Gaya setempat Apabila label mempunyai atribut berskop, CSSnya hanya akan digunakan pada elemen komponen semasa: hi.example{color:red;} 2. Pemilih kedalaman ialah scoped Jika pemilih dalam gaya ingin membuat pemilihan yang lebih "mendalam", iaitu mempengaruhi sub-komponen, anda boleh menggunakan :deep() pseudo-class: .a:deep(.b){/*.. .*/ }Kandungan DOM yang dibuat melalui v-html tidak akan
Gantikan nama kelas elemen menggunakan jQuery
Feb 24, 2024 pm 11:03 PM
jQuery ialah perpustakaan JavaScript klasik yang digunakan secara meluas dalam pembangunan web Ia memudahkan operasi seperti pengendalian acara, memanipulasi elemen DOM, dan melaksanakan animasi pada halaman web. Apabila menggunakan jQuery, anda sering menghadapi situasi di mana anda perlu menggantikan nama kelas elemen Artikel ini akan memperkenalkan beberapa kaedah praktikal dan contoh kod tertentu. 1. Gunakan kaedah removeClass() dan addClass() jQuery menyediakan kaedah removeClass() untuk pemadaman
python中class是什么意思
May 21, 2019 pm 05:10 PM
class是python中的一个关键字，用来定义一个类，定义类的方法：class后面加一个空格然后加类名；类名规则：首字母大写，如果多个单词用驼峰命名法，如【class Dog()】。
Penjelasan terperinci tentang penggunaan Kelas PHP: Jadikan kod anda lebih jelas dan mudah dibaca
Mar 10, 2024 pm 12:03 PM
Apabila menulis kod PHP, menggunakan kelas adalah amalan yang sangat biasa. Dengan menggunakan kelas, kami boleh merangkum fungsi dan data yang berkaitan dalam satu unit, menjadikan kod lebih jelas, lebih mudah dibaca dan lebih mudah diselenggara. Artikel ini akan memperkenalkan penggunaan PHPClass secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik cara menggunakan kelas dalam projek sebenar untuk mengoptimumkan kod. 1. Cipta dan gunakan kelas Dalam PHP, anda boleh menggunakan kelas kata kunci untuk mentakrifkan kelas dan mentakrifkan sifat dan kaedah dalam kelas.
Ralat Vue: Tidak dapat menggunakan v-bind untuk mengikat kelas dan gaya dengan betul, bagaimana untuk menyelesaikannya?
Aug 26, 2023 pm 10:58 PM
Ralat Vue: Tidak dapat menggunakan v-bind untuk mengikat kelas dan gaya dengan betul, bagaimana untuk menyelesaikannya? Dalam pembangunan Vue, kami sering menggunakan arahan v-bind untuk mengikat kelas dan gaya secara dinamik, tetapi kadangkala kami mungkin menghadapi beberapa masalah, seperti tidak dapat menggunakan v-bind dengan betul untuk mengikat kelas dan gaya. Dalam artikel ini, saya akan menerangkan punca masalah ini dan memberi anda penyelesaian. Pertama, mari kita fahami arahan v-bind. v-bind digunakan untuk mengikat V
