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 bagiPrimer 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
Dalam artikel ini, kami menggunakan pautan CDN.
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">
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.
<div class= "h1"> </div>
<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>
Dalam contoh ini, kami memaparkan teks dalam kelas h1-h6 utiliti tajuk.
Terjemahan bahasa Cina bagiJika anda menggunakan kelas ini pada mana-mana elemen tajuk (cth.
<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>
Di sini kami menggunakan kelas h6 pada elemen
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.
<div class= "h0-mktg"> </div>
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>
Dalam contoh ini, kami menunjukkan teks dalam kelas h0.mktg -h6.mktg Utiliti Tajuk Pemasaran Primer CSS.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
