 |
| CSS |
Tutorial ini akan menjelaskan bagaimana mengubah batasan luar dari setiap gambar dengan menggunakan beberapa aturan CSS sederhana untuk membuatnya menjadi bulat, tapi ini sangat mudah untuk dilakukan, akhirnya akan membuat posting anda lebih elegant.
Trik ini akan saya akan publikasikan dalam dua bagian, gunanya adalah untuk membantu Anda memahami, setidaknya, sedikit dari apa CSS (Cascading Style Sheets) adalah.
Bagi mereka yang ingin mempelajari lebih lanjut, silakan lihat di Link Ini dan bagi mereka yang benar-benar ingin belajar secara menyeluruh, saya sarankan untuk mengunjungi Situs Ini.
 |
| CSS |
Pendahuluan dan Lembar Terminologi
Gaya ini bertujuan untuk membantu memilah struktur apa dari sebuah situs web yang formatnya atau penampilannya. Jadi, model kotak CSS adalah, sebuah kotak yang membungkus di sekitar elemen HTML, dan menentukan bagaimana kotak-kotak disajikan dalam hal warna, font, lebar, latar belakang dll.
Keuntungannya adalah bahwa, kapan saja kita memutuskan untuk mengubah sesuatu, kita tidak harus mengubah semua halaman satu per satu, tetapi hanya, mengubah properti dari style sheet dan modifikasi nya secara otomatis yang akan berlaku di semua halaman.
Style sheet adalah seperangkat aturan yang terbuat dari pemilih dan deklarasi. Maksudnya pemilih yang akan digunakan sebagai nama panggilan atau nama dari apa yang Anda ingin mengkonfigurasi dari style sheet dan berlaku untuk HTML, dan deklarasi adalah properti yang kita tambahkan dari nilai-nilai yang diinginkan (informasi lebih lanjut tentang Sintaks CSS
 |
| CSS |
Menambahkan Pemilih CSS
Jika kita menambahkan, misalnya, kode di atas dalam lembar gaya , kami mungkin tidak melihat apa-apa terjadi khususnya di website . Seperti yang telah saya sebutkan di atas, pemilih berkaitan dengan HTML dan CSS ,sehingga jika kita ingin kotak untuk mengambil nilai-nilainya untuk melihat lebar, warna latar belakang, perbatasan dan ukuran font, kita perlu menyertakan pemilih dalam HTML halaman elemen, seperti ini:
<div class="SelectorName">Text here</div>
Di sini kita menambahkan beberapa aturan untuk memberitahu browser menafsirkan bahwa kotak ini harus menjadi tipe tertentu atau kelas. Kelas ini atau pemilih bisa memiliki beberapa sifat tertentu dan nilai-nilai yang didefinisikan dalam style sheet, seperti yang Anda lihat pada gambar di atas.
Sekarang mari kita lihat bagaimana ini akan mengubah tampilan kotak, sementara semua orang lain yang tidak memiliki nama SelectorName akan mengikuti penampilan standar.
Pada dasarnya, ketika kita menambahkan aturan dalam style sheet, atau memodifikasi yang sudah ada, apa yang terjadi adalah bahwa semua kotak yang ditandai dengan pemilih yang akan mengubah penampilan mereka sesuai dengan sifat dan nilai-nilai yang telah kita didefinisikan dalam style sheet.
Dimana Untuk Menambahkan Gaya CSS
Gaya ini dapat ditambahkan dalam file CSS eksternal - membuat file CSS dengan semua aturan, meng-upload di situs hosting dan mendapatkan URL dari file. Untuk memanfaatkannya, termasuk baris berikut di header template Anda. Untuk Blogger, Anda dapat menambahkannya antara <head> dan <b: skin> <[CDATA [/ *:<link href="syle.css" rel="stylesheet" type="text/css"/>
Catatan: Mengganti teks warna biru dengan url dari file CSS.
Anda juga dapat menambahkan gaya langsung dalam HTML template dengan menambahkan CSS antara tag gaya:
<style>
.SelectorName {
background-color: #EAEAEA;
border: 1px solid #444444;
width: 200px;
font-size: 12px;
}
</style>
Ini dapat ditambahkan dalam HTML dari elemen halaman juga. Dalam hal ini, Anda tidak perlu menambah pemilih apapun untuk menunjukkan di mana gaya CSS adalah:
<div style="background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here</div>
Di Blogger, aturannya antara <b: skin> <[CDATA [/ * dan ]] / b: skin> tag. Jika kita mengakses HTML dari template kita, kita akan menemukan sekelompok kode di antara tag ini, yang sebenarnya adalah styling CSS yang mendefinisikan tampilan blog kita.
Bagi mereka yang tidak ingin menyentuh kode template, kita dapat menambahkan CSS langsung dengan pergi ke desainer Blogger Template> Lanjutan> Tambah CSS.
 |
| CSS blogger |
Itu cukup untuk hari ini. Pada tutorial berikutnya kita akan mengenal cara menambahkan sudut dibulatkan ke gambar kami menggunakan CSS >> Cara Membuat Gambar Telihat Nyata Dengan CSS Bagian #2
EmoticonEmoticon