Sifat CSS yang paling banyak digunakan
Sifat CSS yang paling banyak digunakan
Sifat CSS yang paling banyak digunakan ialah pelajaran HTML for Kids percuma di CoddyKit. Ini ialah pelajaran 1 daripada 1. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML for Kids, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML for Kids merangkumi sejumlah 1 pelajaran.
Pengenalan
Helo,
Dalam bahagian ini, kita akan mempelajari sifat CSS yang paling biasa digunakan.
Sehingga kini, kita biasanya membuat contoh dengan sifat mudah seperti color dan font-size.
Lebar dan Tinggi
Tinggi - Lebar
Kita akan menggunakan sifat lebar dan tinggi untuk menetapkan nilai lebar dan tinggi elemen kita.
Terdapat dua perkara yang perlu diberi perhatian di sini.
- Kita tidak boleh menetapkan lebar dan tinggi kepada elemen jenis sebaris.
- Sifat lebar dan tinggi yang kita tetapkan secara lalai adalah bebas daripada sifat lain seperti jidar, pelapik dan sempadan. Sifat ini hanya digunakan untuk kawasan di dalam elemen.
Kita akan memberikan maklumat tambahan tentang pengecualian di atas kemudian.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Lebar dan Tinggi 2
Dalam contoh sebelumnya, kita menetapkan nilai width dan height sebagai statik. Walau bagaimanapun, nilai yang boleh ditetapkan tidak terhad kepada nombor tetap.
Sekarang mari kita lihat cara menetapkan width menggunakan peratusan dalam contoh kita.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Kotak kandungan berbanding kotak sempadan
Sifat box-sizing menggunakan nilai content-box secara lalai.
Secara lalai, nilai width dan height digunakan untuk merujuk kandungan.
Nilai sempadan dan padding ditambahkan pada nilai width dan height.
Katakan lebar sebuah kotak ialah 100px.
Apabila kita menambahkan padding 10px dan sifat border 20px pada kotak ini, jumlah lebar elemen ialah 100px + 10px + 20px = 130px.
Lebar maksimum
Dengan sifat max-width, kita boleh menetapkan lebar maksimum yang boleh diambil oleh sesuatu elemen.
Dalam contoh di bawah, oleh sebab nilai max-width ditetapkan sebagai 100px, walaupun nilai lalai width ialah auto (elemen sepatutnya meliputi 100% induknya), elemen tersebut menggunakan 100px dan kandungannya berada di luar kotak.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Hiasan Teks
Kita boleh mentakrifkan hiasan untuk teks dengan sifat text-decoration.
Saya rasa lebih wajar untuk meneliti sifat ini melalui contoh. Lihat output kod contoh kita dalam pratonton.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>text-indent
Kita mungkin mahu menambah ruang pada permulaan teks. Untuk tujuan ini, kita menggunakan sifat text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>text-align
Kita menetapkan kedudukan mendatar teks dengan sifat text-align.
Mari kita takrifkan satu contoh HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>font-family
Kita mentakrifkan gaya font-family untuk menggunakan jenis fon yang kita kehendaki bagi teks.
Terdapat beberapa perkara penting yang perlu kita ketahui di sini.
- Fon yang saya takrifkan mestilah didaftarkan dalam sistem pengguna kita. Untuk tujuan ini, kita perlu menggunakan salah satu fon yang dikenali sebagai fon selamat web.
- Jika kita mahu menggunakan fon tersuai, kita perlu menambahkan fon yang akan digunakan sebagai kebergantungan pihak ketiga antara teg head. Apabila menambahkan font-family, kita hendaklah menentukan pilihan font-family utama dan sekunder.
- Jika pelayar tidak dapat menemukan pilihan utama kita dalam sistemnya, pelayar akan memaparkan pilihan sekunder kepada pengguna.
font-family 2
Dalam contoh di bawah, jenis fon Times New Roman telah ditetapkan untuk kelas utama.
Fon Times dan serif masing-masing ditetapkan sebagai fon sekunder dan tertier.
Pelayar terlebih dahulu cuba menggunakan jenis fon Times New Roman; jika jenis ini tidak ditemui dalam sistem, pilihan kita yang lain akan digunakan.
Jika fon yang kita tetapkan tidak tersedia, pelayar akan menggunakan fon lalai.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Seperti yang dapat difahami daripada namanya, sifat ini menentukan gaya fon untuk teks yang kita gunakan.
Sekarang mari kita lihat sifat font-style dengan satu contoh.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Tahniah
Tahniah 🎉
Dalam bahagian ini, kita telah mempelajari sifat CSS yang paling banyak digunakan.
Dalam bahagian seterusnya, kita akan mempelajari Jidar CSS.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 16
- Pelajaran
- 35
Soalan Lazim
Adakah pelajaran “Sifat CSS yang paling banyak digunakan” percuma?
Ya — teks penuh “Sifat CSS yang paling banyak digunakan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus HTML for Kids, tingkat taraf kepada CoddyKit PRO. Kursus HTML for Kids merangkumi sejumlah 1 pelajaran.
Apakah yang akan saya pelajari dalam “Sifat CSS yang paling banyak digunakan”?
Sifat CSS yang paling banyak digunakan Anda berlatih HTML for Kids menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan HTML for Kids?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML for Kids di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 1.
Berapa lamakah pelajaran “Sifat CSS yang paling banyak digunakan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.