Rumah >hujung hadapan web >tutorial css >Bermula dengan Utiliti Tajuk Tipografi CSS
Bermula dengan Utiliti Tajuk Tipografi CSS
- WBOYke hadapan
- 2023-09-04 08:01:131141semak imbas
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: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
Dalam artikel ini, kami menggunakan pautan CDN.
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">
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 a1f02c36ba31691bcfe87b2722de723b) 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>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>
Dalam contoh ini, kami memaparkan teks dalam kelas h1-h6 utiliti tajuk.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Jika anda menggunakan kelas ini pada mana-mana elemen tajuk (cth. 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, 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>
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>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>
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!