Bermula dengan Utiliti Tajuk Tipografi 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 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 ) 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>
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.
, , 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
<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>
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
