cari
Rumahhujung hadapan webtutorial csscss中tag是什么意思

css中tag是什么意思

Jul 14, 2021 am 10:27 AM
csstag

在css中tag代表着选择器,例如“#tag{样式代码;}”和“.tag{样式代码}”。TAG标签是一种由自己定义的,比分类更准确、更具体,可以概括文章主要内容的关键词。

css中tag是什么意思

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中tag代表着选择器,例

#tag{样式代码;}
.tag{样式代码}

每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

类别选择器

类选择器根据类名来选择

前面以”.”来标志,如:

.demoDiv{
color:#FF0000;
}

在HTML中,元素可以定义一个class的属性。

如:

<div class="demoDiv">
这个区域字体颜色为红色
</div>

同时,我们可以再定义一个元素:

<p class="demoDiv">
这个段落字体颜色为红色
</p>

最后,用浏览器浏览,我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那得一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demoDiv">
<div>
这个区域字体颜色为红色
</div>
同时,我们可以再定义一个元素:
<p>
这个段落字体颜色为红色
</p>
</div>

这样,我们就只是定义了一个类,同时把样式应用到了所有的元素当中。

ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为”navi”,那么在同一页面你就不能再将其他元素id取名为”navi”了。尽管你会发现即便你把几个元素都命名成相同的id名字,css选择器还是会把这些元素都选中应用样式(如class选择器那样),对于css选择器,id属性的唯一性似乎不存在。然而,对于js而言,它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯,同一个id不要在页面中出现第二次。

前面以”#”号来标志,在样式里面可以这样定义:

#demoDiv{
color:#FF0000;
}

这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv,如:

<div id="demoDiv">
这个区域字体颜色为红色
</div>

用浏览器浏览,我们可以看到因为区域内的颜色变成了红色

再定义一个区域

<div>
这个区域没有定义颜色
</div>

用浏览器浏览,与预期的一样,区域没有应用样式,所以区域中的字体颜色还是默认的颜色黑色。

推荐学习:css视频教程

Atas ialah kandungan terperinci css中tag是什么意思. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Biarkan ' s membuat loader halaman mewah, tetapi tidak rumitBiarkan ' s membuat loader halaman mewah, tetapi tidak rumitApr 15, 2025 am 09:33 AM

Adalah biasa untuk melihat keadaan pemuatan di laman web hari ini, terutamanya sebagai aplikasi web progresif dan tapak reaktif semakin meningkat. Ini satu cara untuk

Landskap pembangunan aplikasi silang platformLandskap pembangunan aplikasi silang platformApr 15, 2025 am 09:29 AM

Saya tidak mengesan perkara ini dengan baik, tetapi saya dapat. Sekiranya anda mahukan aplikasi asli untuk Android dan iOS, pasti akan hanya perlu menulisnya

Menggunakan Fusebox sebagai alternatif penggabungan untuk webpack untuk ReactMenggunakan Fusebox sebagai alternatif penggabungan untuk webpack untuk ReactApr 15, 2025 am 09:26 AM

Jika anda mencari bundler alternatif ke webpack, anda mungkin mahu melihat Fusebox. Ia membina apa yang ditawarkan Webpack-pemisahan kod, panas

Apa yang saya suka tentang menulis gaya dengan svelteApa yang saya suka tentang menulis gaya dengan svelteApr 15, 2025 am 09:25 AM

Terdapat banyak gembar-gembur yang layak di sekitar Svelte baru-baru ini, dengan projek itu mengumpul lebih daripada 24,000 bintang GitHub. Boleh dikatakan sebagai javascript yang paling mudah

Berita Platform Mingguan: CSS Column-Span Property, ADA Berlaku ke Laman Web, Penerangan Imej Auto yang DihasilkanBerita Platform Mingguan: CSS Column-Span Property, ADA Berlaku ke Laman Web, Penerangan Imej Auto yang DihasilkanApr 15, 2025 am 09:23 AM

Pada minggu ini, susun atur multi-kolumn mendapat sokongan luas, ADA bermaksud lebih banyak a11y untuk peruncit, dan Google melakukan sesuatu tentang semua imej kosong

Negeri Styling semasa memilih pada tahun 2019Negeri Styling semasa memilih pada tahun 2019Apr 15, 2025 am 09:18 AM

Terbaik yang saya tahu dari kali terakhir saya menyusun ciri-ciri CSS yang paling diharapkan, kawalan bentuk gaya adalah pertanyaan utama. Top 5, i ' d katakan. Dan orang asli

Menjadi tuan depan pada tahun 2020 dengan 10 idea projek iniMenjadi tuan depan pada tahun 2020 dengan 10 idea projek iniApr 15, 2025 am 09:17 AM

Ini adalah sedikit terkini yang dikemas kini dari artikel cepat yang saya tulis di Dev. Saya ' m penerbitan di sini ' cuz i ' m semua indieweb seperti itu.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna