Bagaimana untuk menukar saiz fon menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menukar saiz fon menggunakan CSS?

PHPz

Lepaskan： 2023-09-23 21:05:03

ke hadapan

1450 orang telah melayarinya

Bagaimana untuk menukar saiz fon menggunakan CSS?

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!