Home-theater-designers
Sebaik sahaja anda mula menceburkan diri dalam HTML, anda mungkin akan berminat untuk menambahkan lebih banyak visual pada halaman web anda. CSS adalah kaedah terbaik untuk melakukannya. CSS membolehkan anda menerapkan perubahan di seluruh halaman anda tanpa bergantung pada gaya sebaris.
Berikut adalah beberapa contoh CSS mudah untuk menunjukkan kepada anda cara membuat beberapa perubahan gaya asas di laman web anda.
1. Kod CSS Asas untuk Pemformatan Perenggan yang Mudah
Gaya dengan CSS bermaksud anda tidak perlu menentukan gaya setiap kali anda membuat elemen. Anda hanya boleh mengatakan 'semua perenggan harus mempunyai gaya khusus ini' dan anda sudah bersedia.
Katakan anda mahu setiap perenggan (
, salah satu tag HTML yang mesti diketahui oleh semua orang) untuk menjadi sedikit lebih besar daripada biasa. Dan dengan teks kelabu gelap, bukannya hitam.
Berkaitan: Lembaran Menipu HTML
Kod CSS untuk ini adalah:
p { font-size: 120%; color: dimgray; }Ringkas! Sekarang, setiap kali penyemak imbas membuat perenggan, teks akan mewarisi ukuran (120 peratus normal) dan warna ('dimgray').
Sekiranya anda ingin tahu warna teks biasa yang boleh anda gunakan, lihat ini Senarai warna CSS dari Mozilla.
2. Contoh CSS untuk Menukar Kes Karakter
Ingin membuat sebutan untuk perenggan yang harus dalam huruf kecil? Contoh CSS untuk itu adalah:
p.smallcaps { font-variant: small-caps; }Untuk membuat perenggan yang sepenuhnya dalam huruf kecil, gunakan tag HTML yang sedikit berbeza. Begini rupanya:
Your paragraph here.
Menambah titik dan nama kelas pada elemen menentukan sub-jenis elemen yang ditentukan oleh kelas. Anda boleh melakukannya dengan teks, gambar, pautan, dan apa sahaja perkara lain.
Sekiranya anda ingin menukar sekumpulan teks ke kes tertentu, gunakan contoh kod CSS ini:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;Yang terakhir menggunakan huruf besar dari setiap ayat.
3. CSS yang mudah untuk menukar warna pautan
Perubahan gaya tidak terhad pada perenggan. Terdapat empat warna yang berbeza yang dapat diberikan pautan: warna standardnya, warna yang dikunjungi, warna hovernya, dan warna aktifnya (yang dipaparkan semasa anda mengkliknya). Gunakan contoh kod CSS ini:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }Dengan pautan, setiap 'a' diikuti oleh titik dua, bukan titik.
Setiap deklarasi tersebut mengubah warna pautan dalam konteks tertentu. Tidak perlu menukar kelas pautan untuk menjadikannya berubah warna.
4. Keluarkan Garis Bawah Pautan Dengan Contoh CSS ini
Walaupun teks yang digarisbawahi menunjukkan dengan jelas pautan, kadang-kadang kelihatan lebih baik untuk memisahkan garis bawahnya. Ini dicapai dengan atribut 'hiasan-teks'. Contoh CSS ini menunjukkan cara membuang garis bawah pada pautan:
a { text-decoration: none; }Apa-apa dengan teg pautan ('a') tidak akan digarisbawahi. Ingin menggariskannya semasa pengguna melayang di atasnya? Cukup tambahkan:
a:hover { text-decoration: underline; }Anda juga boleh menambahkan hiasan teks ini ke pautan aktif untuk memastikan garis bawah tidak hilang semasa pautan diklik.
5. Buat Butang Pautan Dengan Kod CSS
Ingin menarik lebih banyak perhatian ke pautan anda? Butang pautan adalah kaedah terbaik untuk menyelesaikannya. Yang ini memerlukan beberapa baris lagi:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }Mari terangkan contoh kod CSS ini.
Termasuk keempat-empat keadaan pautan memastikan bahawa butang tidak hilang semasa pengguna melayang atau mengklik padanya. Anda juga boleh menetapkan parameter yang berbeza untuk menuding dan pautan aktif, misalnya, menukar butang atau warna teks.
Warna latar ditetapkan dengan warna latar, dan warna teks dengan warna. Padding menentukan ukuran kotak --- teksnya dilapisi oleh 10px secara menegak dan 25px secara mendatar.
Text-align memastikan bahawa teks dipaparkan di tengah-tengah butang, dan bukan ke satu sisi. Hiasan teks, seperti contoh terakhir, menghilangkan garis bawah.
bagaimana menukar dpi dalam gimp
Kod CSS 'display: inline-block' sedikit lebih rumit. Singkatnya, ia membolehkan anda menetapkan ketinggian dan lebar objek. Ini juga memastikan bahawa ia memulakan baris baru ketika dimasukkan.
6. CSS Contoh Kod untuk Membuat Kotak Teks
Perenggan yang jelas tidak begitu menarik. Sekiranya anda ingin menonjolkan elemen di halaman anda, anda mungkin mahu menambahkan sempadan. Inilah cara untuk melakukannya dengan rentetan kod CSS ringkas:
p.important { border-style: solid; border-width: 5px; border-color: purple; }Yang ini berterus terang. Ia membuat sempadan ungu padat, selebar lima piksel, di sekitar mana-mana perenggan kelas penting. Untuk menjadikan perenggan mewarisi sifat ini, nyatakan seperti ini:
Your important paragraph here.
Ini akan berjaya walau seberapa besar perenggannya.
Terdapat banyak gaya sempadan yang berbeza yang boleh anda gunakan; bukannya 'padat', cuba 'putus-putus' atau 'berganda'. Sementara itu, lebarnya boleh 'tipis', 'sederhana' atau 'tebal'. Kod CSS bahkan dapat menentukan ketebalan setiap sempadan secara individu, seperti ini:
border-width: 5px 8px 3px 9px;Itu menghasilkan batas atas lima piksel, batas kanan lapan, bawah tiga, dan ukuran sempadan kiri sembilan piksel.
7. Pusat-Sejajarkan Elemen Dengan Kod CSS Asas
Untuk tugas biasa, elemen pemusat dengan kod CSS sangat tidak menyenangkan. Setelah melakukannya beberapa kali, ia menjadi lebih mudah. Anda mempunyai beberapa cara untuk memusatkan perkara.
Untuk elemen blok (biasanya gambar), gunakan atribut margin:
.center { display: block; margin: auto; }Ini memastikan elemen ditampilkan sebagai blok dan margin di setiap sisi ditetapkan secara automatik. Sekiranya anda ingin memusatkan semua gambar pada halaman tertentu, anda juga boleh menambahkan 'margin: auto' ke tag img:
img { margin: auto; }Untuk mengetahui mengapa ia berfungsi dengan cara ini, lihat Penjelasan model kotak CSS di W3C .
Tetapi bagaimana jika anda mahu memusatkan teks dengan CSS? Gunakan contoh CSS ini:
.centertext { text-align: center; }Ingin menggunakan kelas 'centertext' untuk memusatkan teks dalam perenggan? Cukup tambahkan kelas itu ke
teg:
This text will be centered.
8. Contoh CSS untuk Melaraskan Padding
Pelapisan elemen menentukan berapa banyak ruang di setiap sisi. Sebagai contoh, jika anda menambahkan 25 piksel padding ke bawah gambar, teks berikut akan diturunkan 25 piksel ke bawah. Banyak elemen boleh mempunyai padding, bukan hanya gambar.
Katakan anda mahu setiap gambar mempunyai padding 20 piksel di sisi kiri dan kanan, dan 40 piksel di bahagian atas dan bawah. Pelaksanaan kod CSS yang paling asas untuk ini adalah:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }Terdapat arahan CSS yang lebih pendek, yang menunjukkan semua maklumat ini dalam satu baris:
img { padding: 40px 25px 40px 25px; }Ini menetapkan padding atas, kanan, bawah, dan kiri ke nombor kanan. Dengan hanya dua nilai yang digunakan (40 dan 25), anda dapat menjadikannya lebih pendek:
img { padding: 40px 25px }Apabila anda hanya menggunakan dua nilai, nilai pertama ditetapkan untuk bahagian atas dan bawah, sementara yang kedua akan kiri dan kanan.
9. Serlahkan Baris Jadual Dengan Pengekodan CSS
Kod CSS menjadikan jadual kelihatan lebih bagus daripada grid lalai. Menambah warna, menyesuaikan sempadan, dan menjadikan meja anda responsif terhadap skrin mudah alih semuanya mudah. Contoh CSS ringkas ini menunjukkan kepada anda cara menonjolkan baris jadual semasa anda mengarahkan tetikus ke atasnya.
tr:hover { background-color: #ddd; }Sekarang setiap kali anda mengarahkan mouse ke sel meja, baris itu akan berubah warna. Untuk melihat beberapa perkara menarik yang boleh anda lakukan, lihat Halaman W3C pada jadual CSS yang mewah .
10. Contoh CSS untuk Menukar Imej Antara Telus dan Buram
Kod CSS juga dapat membantu anda melakukan perkara yang menarik dengan gambar. Berikut adalah contoh CSS untuk memaparkan gambar pada tahap kurang opacity penuh, sehingga gambar tersebut kelihatan sedikit 'diputihkan'. Apabila anda mengarahkan kursor ke atas gambar, gambar akan dikurangkan sepenuhnya:
img { opacity: 0.5; filter: alpha(opacity=50); }Atribut 'filter' melakukan perkara yang sama dengan 'opacity', tetapi Internet Explorer 8 dan sebelumnya tidak mengenali pengukuran kelegapan. Untuk penyemak imbas yang lebih tua, ada baiknya anda memasukkannya.
Sekarang kerana gambarnya sedikit telus, anda boleh menjadikannya legap sepenuhnya pada mouseover:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }10 Contoh CSS Dengan Kod Sumber
Dengan contoh kod CSS ini, anda seharusnya mempunyai idea yang lebih baik tentang bagaimana CSS berfungsi. Templat CSS boleh membantu, tetapi memahami unsur-unsur mentah sangat penting.
10 contoh kod CSS mudah yang dikemukakan semula:
- Pemformatan perenggan yang mudah
- Tukar huruf besar
- Tukar warna pautan
- Alih keluar garis bawah pautan
- Buat butang pautan
- Buat kotak teks
- Unsur penjajaran tengah
- Laraskan pelapik
- Serlahkan baris jadual
- Buat gambar legap
Meneliti semula, anda akan melihat beberapa corak yang boleh anda gunakan untuk kod masa depan. Dan ketika itulah anda tahu anda benar-benar mula menjadi master CSS. Tetapi mengingatnya boleh menjadi sukar. Anda mungkin mahu menandakan halaman ini untuk rujukan di masa hadapan.
Berkongsi Berkongsi Tweet E-mel Lembaran Menipu Properti CSS3 Yang PentingKuasai sintaks CSS penting dengan helaian cheat sifat CSS3 kami.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- Reka Bentuk Web
- CSS
- Skrip
Wakil Editor untuk Keselamatan, Linux, DIY, Pengaturcaraan, dan Penerbit Podcast yang Dijelaskan, dan Benar-benar Berguna, dengan pengalaman luas dalam sokongan desktop dan perisian. Penyumbang kepada majalah Linux Format, Christian adalah Raspberry Pi tinkerer, peminat Lego dan peminat permainan retro.
Lagi Dari Christian CawleyLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan