Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 1 - Funkysst.com

Thursday, February 8, 2018

Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 1

Avertisement
Avertisement
Tutorial ini akan menjelaskan bagaimana mengubah perbatasan luar dari setiap gambar dengan menggunakan beberapa aturan CSS sederhana untuk membuatnya bulat, tapi ini begitu mudah melakukan hal ini, bahwa aku akhirnya akan membuat posting ini untuk tujuan lain.
sudut bulat, trik css, trik blogger, desain blogger
Trik hari ini bahwa saya akan mempublikasikan dalam dua bagian adalah untuk membantu Anda untuk 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 .

Pengantar dan terminologi

style sheet bertujuan untuk membantu memilah apa struktur dari sebuah situs web dan yang formatnya atau penampilan. Jadi, model kotak CSS adalah, pada dasarnya, 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 ini secara otomatis akan berlaku di semua halaman.

Style sheet adalah seperangkat aturan yang terbuat dari pemilih dan deklarasi. 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 menambahkan nilai-nilai yang diinginkan (informasi lebih lanjut tentang sintaks CSS )

Menambahkan pemilih CSS

Jika kita menambahkan, misalnya, kode di atas dalam lembar gaya kami, kami mungkin tidak melihat apa-apa terjadi khususnya di website kami. Seperti yang telah saya sebutkan di atas, pemilih berkaitan dengan HTML dan CSS sehingga, jika kita ingin kotak untuk mengambil nilai-nilai ini untuk lebar, warna latar belakang, perbatasan dan ukuran font, kita perlu menyertakan pemilih dalam HTML halaman elemen, seperti ini:
<div class = " SelectorName "> Teks disini </ div>
Di sini kita menambahkan aturan memberitahu browser untuk menafsirkan bahwa kotak ini harus menjadi dari jenis tertentu atau kelas . Ini kelas 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 yang lain yang tidak memiliki   nama SelectorName akan mengikuti tampilan standar.

Pada dasarnya, ketika kita menambahkan sebuah aturan dalam style sheet, atau memodifikasi yang sudah ada, apa yang terjadi adalah bahwa semua kotak yang ditandai dengan pemilih itu akan mengubah penampilan mereka sesuai dengan properti dan nilai yang telah kita definisikan di style sheet.


Dimana menambahkan style CSS

Gaya ini dapat ditambahkan dalam file CSS eksternal - buat file CSS dengan semua aturan, upload di situs hosting dan dapatkan URL dari file tersebut. Untuk memanfaatkannya, sertakan baris berikut di header template Anda. Untuk Blogger, Anda bisa menambahkannya di 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>
Hal 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; "> Teks disini </ div>
Di Blogger, aturan antara <b: skin> <! [CDATA [/ * dan ]]> </ b: skin> tag kulit. Jika kita mengakses HTML 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 .


Itu cukup untuk hari ini. Dalam tutorial berikutnya kita akan mengenal cara menambahkan sudut dibulatkan ke gambar kami menggunakan CSS -> cara mengatur batas bulat di sekitar gambar menggunakan CSS .
Avertisement
Comments


EmoticonEmoticon