Bermula dengan Utiliti Tajuk Tipografi CSS

WBOY

Lepaskan： 2023-09-04 08:01:13

ke hadapan

1155 orang telah melayarinya

入门 CSS 版式标题实用程序

Tipografi ialah bahagian penting semasa penciptaan tapak web dan apl. Ia digunakan terutamanya untuk memaparkan kebanyakan kandungan kepada pengguna. Ia menentukan nada dan nada kandungan tapak web anda.

Jadi, ia berkemungkinan menjejaskan keseluruhan pengalaman pengguna. Tajuk dalam mana-mana laman web adalah pusat tarikan bagi mana-mana pengguna. Oleh itu, adalah sangat penting bahawa ia kelihatan sempurna untuk meningkatkan kebolehbacaan tapak web atau apl anda. Dalam artikel ini, kami akan membuat pengepala menggunakan CSS Primer.

Terjemahan bahasa Cina bagi

Primer CSS

ialah:

Primer CSS

Primer CSS ialah rangka kerja CSS yang serba boleh dan popular yang menyediakan pembangun dengan keupayaan tipografi yang mudah digunakan. Ia adalah sistem reka bentuk sumber terbuka yang dicipta oleh GitHub. Menggunakan utiliti tipografi akan meningkatkan penampilan visual dan konsistensi tapak web anda.

Utiliti Tajuk Penetapan Taip membolehkan pembangun memilih saiz fon, warna dan berat tajuk mengikut keperluan.

Untuk menggunakan CSS Primer dalam halaman web anda, anda boleh memasangnya dari npm -

npm install --save @primer/css

Salin selepas log masuk

Dalam artikel ini, kami menggunakan pautan CDN.

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">

Salin selepas log masuk

Utiliti Tajuk Taip

Alat Tajuk Tipografi ialah satu set kelas terbina dalam pratakrif yang membolehkan pembangun menggayakan tajuk untuk tapak web atau aplikasi mereka. Anda boleh menambah kelas ini pada mana-mana elemen (kecuali ) dan menukarnya menjadi pengepala dalam gaya yang diingini.

Seperti yang kita sedia maklum, kami mempunyai 6 kelas pengepala yang berbeza saiz. Mereka bermula dari h1 hingga h6. Saiz berkurangan dalam susunan yang sama.

Tatabahasa

<div class= "h1"> </div>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      h1 {
         color: orange;
         text-decoration: underline;
         font-family: Calibri;
      }
   </style>
</head>
<body>
   <h1> Primer CSS Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of heading utilities as provided by Primer CSS. <p class="h1"> This is the heading of class "h1" </p>
      <p class="h2"> This is the heading of class "h2" </p>
      <p class="h3"> This is the heading of class "h3" </p>
      <p class="h4"> This is the heading of class "h4" </p>
      <p class="h5"> This is the heading of class "h5" </p>
      <p class="h6"> This is the heading of class "h6" </p>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami memaparkan teks dalam kelas h1-h6 utiliti tajuk.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Jika anda menggunakan kelas ini pada mana-mana elemen tajuk (cth.

,

, dll.), ia akan mengikut peraturan gaya kelas. Ini bermakna saiz fon kelas utiliti tajuk yang sepadan akan diikuti. Mari kita fahami melalui contoh.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: Georgia;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Heading Utilities </h1>
   <div class="container">
      <h1 class="h6"> This is h1 element with class "h6" </h1>
      <h2 class="h5"> This is h2 element with class "h5" </h2>
      <h3 class="h4"> This is h3 element with class "h4" </h3>
      <h4 class="h3"> This is h4 element with class "h3" </h4>
      <h5 class="h2"> This is h5 element with class "h2" </h5>
      <h6 class="h1"> This is h6 element with class "h1" </h6>
   </div>
</body>
</html>

Salin selepas log masuk

Di sini kami menggunakan kelas h6 pada elemen

. Tetapi seperti yang kita dapat lihat, saiz fon adalah berdasarkan kelas h6. Begitu juga, kita mempunyai elemen h2, h3, h4, h5 dan h6.

Alat tajuk penetapan taip pemasaran

Alat tipografi pemasaran yang digunakan dalam CSS Primer membolehkan pembangun dan pereka bentuk pemasaran mencipta kandungan pemasaran jenama yang menarik secara visual seperti halaman pendaratan produk, iklan dan banyak lagi.

Ia mewakili identiti jenama dan visi untuk pelanggan. CSS Primer juga mentakrifkan satu set kelas untuk tujuan tersebut. Kelas ini responsif tetapi berbeza dari segi cara. Ia digunakan sebagai fon pemasaran yang ditakrifkan.

Tatabahasa

<div class= "h0-mktg"> </div>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Dalam Alat Tipografi Pemasaran, kami mempunyai 7 kelas tajuk. Mereka ialah h0-mktg hingga h6-mktg. Mari lihat contoh −

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      CSS code * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }
   </style>   
</head>
<body>
   <h1 class="heading"> Primer CSS Marketing Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of marketing heading utilities as provided by Primer CSS. <p class="h0-mktg"> This is the heading </p>
      <p class="h1-mktg"> This is heading of class "h1-mktg" </p>
      <p class="h2-mktg"> This is the heading of class "h2-mktg" </p>
      <p class="h3-mktg"> This is the heading of class "h3-mktg" </p>
      <p class="h4-mktg"> This is the heading of class "h4-mktg" </p>
      <p class="h5-mktg"> This is the heading of class "h5-mktg" </p>
      <p class="h6-mktg"> This is the heading of class "h6-mktg" </p>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami menunjukkan teks dalam kelas h0.mktg -h6.mktg Utiliti Tajuk Pemasaran Primer CSS.

Kesimpulan

Dalam artikel ini, kami membincangkan Utiliti Tajuk Tipografi CSS Primer dan cara ia memudahkan kehidupan pembangun. Ia menjadikan reka bentuk web lebih mudah dengan menggunakan kelas yang telah ditetapkan. Kami juga melihat susun atur pemasaran yang sedikit berbeza. Ia membantu kami membuat halaman pendaratan dan iklan produk yang menarik secara visual. Dengan pelbagai ciri reka bentuk responsif, pembangun boleh menghasilkan tapak web berkualiti tinggi dan mesra pengguna dengan kebolehbacaan yang lebih baik.

Atas ialah kandungan terperinci Bermula dengan Utiliti Tajuk Tipografi CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!