Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menukar saiz fon menggunakan CSS?
Bagaimana untuk menukar saiz fon menggunakan CSS?
- PHPzke hadapan
- 2023-09-23 21:05:031431semak imbas
CSS (iaitu Cascading Style Sheets) ialah alat yang berkuasa untuk mengawal persembahan visual halaman web. Satu aspek ini ialah keupayaan untuk melaraskan saiz fon elemen teks pada halaman. Ini boleh dilakukan menggunakan sifat saiz fon.
Untuk menetapkan saiz fon khusus untuk elemen tertentu, kami menggunakan pemilih kelas atau ID dengan atribut saiz fon.
Dalam artikel ini kita akan melihat berbilang contoh menukar saiz fon menggunakan CSS -
Dengan menggunakan atribut saiz fon, kami boleh menetapkan saiz fon khusus untuk elemen atau kelas tertentu. Contohnya, untuk menetapkan saiz fon elemen kepada 18 piksel, kami akan menggunakan kod berikut -
P{
font-size:18px;
}
Contoh
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
.p1{
font-size:20px;
}
</style>
</head>
<body>
<h1>Welcome to tutorialspoint</h1>
<p class="p1">Change the font size using CSS</p>
<p>This is normal paragraph</p>
</body>
</html>
Kami juga boleh menggunakan atribut saiz fon untuk menetapkan saiz fon relatif, seperti lebih besar atau lebih kecil, yang akan menukar saiz fon berbanding saiz fon elemen induk. Untuk ini kami akan menggunakan kod berikut -
P{
font-size:larger;
}
Contoh
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
.p1{
font-size:large;
}
.p2{
font-size:small;
}
</style>
</head>
<body>
<h1>Welcome to tutorialspoint</h1>
<p class="p1">Change the font size using CSS - Large font</p>
<p class="p2">Change the font size using CSS - Small font</p>
<p>This is normal paragraph</p>
</body>
</html>
Cara lain untuk menyasarkan perkataan tertentu ialah menggunakan pemilih :bukan css. Ini membolehkan penyasaran semua kecuali perkataan unik dalam elemen. Contohnya -
CSS
p span:not(.unique) {
font-size: 18px;
}
HTML
<p>This is a <span class="not-unique">not unique</span> word, but this <span class="not-unique">word</span> is <span class="unique">unique</span>.</p>
Contoh
<html>
<head>
<title>How to change the font size using CSS</title>
<style>
p span:not(.unique) {
font-size: 20px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of <span class="notunique">not unique</span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="not-unique">not unique</span> when an unknown printer took a galley of type and scrambledg,</p>
</body>
</html>
Sifat saiz fon dalam CSS membolehkan kawalan tepat ke atas saiz elemen teks pada halaman web. Sama ada kita ingin menetapkan saiz fon khusus untuk elemen tertentu, laraskan saiz fon berdasarkan saiz fon elemen induk atau menyasarkan perkataan tertentu, CSS menyediakan alatan yang diperlukan untuk berbuat demikian.
Atas ialah kandungan terperinci Bagaimana untuk menukar saiz fon menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!