Color Dan Background CSS
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Warna latar depan: properti 'color'
Properti menggambarkan warna warna foreground elemen.
h1 {
color: # FF0000;
}
Properti 'background-color'
body {
background-color: # FFCC66;
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Perhatikan bahwa menetapkan dua properti untuk <h1>, dipisahkan dengan titik koma.
Background gambar [background-image]
CSS-background-image properti digunakan untuk memasukkan gambar latar belakang.
body {
background-color: # FFCC66;
background-image: url ("image.gif");
}
h1 {
color: # 990000;
background-color: # FC9804;
}
url ("http://wen.ru/i/logo.gif")
Ulangi / animasi gambar latar [background-repeat]
Di bawah ini adalah empat nilai-nilai background-repeat:
background-repeat: repeat-x (Gambar diulang horizontal)
background-repeat: repeat-y (gambar ini diulangi vertikal)
background-repeat: repeat (gambar ini diulangi horizontal dan vertikal)
background-repeat: no-repeat (Gambar tidak diulang)
Misalnya, untuk membatalkan mengulang / wallpaper kartun, kita harus menulis kode seperti ini:
body {
background-color: # FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Mengunci gambar latar belakang [background-attachment]
Berikut adalah dua nilai background-attachment:
Background-attachment: scroll (gulungan gambar dengan halaman -unlocked)
Background-attachment: fixed (gambar diblokir)
Sebagai contoh, kode berikut menangkap gambar:
body {
background-color: # FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
background-attachment: fixed;
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Lokasi wallpaper [background-position]
Tabel berikut memberikan beberapa contoh:
background-position: 2cm 2cm (Gambar 2 cm terletak di sebelah kiri dan 2cm dari atas)
background-position: 50% 25% (Gambar terletak di pusat dan seperempat layar di atas)
background-position: top right (Gambar di sudut kanan atas halaman)
Dalam kode contoh gambar latar belakang terletak di sudut kanan bawah layar:
body {
background-color: # FFCC66;
background-image: url ("image.gif")
; background-repeat: no-repeat-;
background-attachment: fixed;
background-position: right bottom;
}
h1{
color: # 990000;
background-color: # FC9804;
}
Disingkat notasi [background]
latar belakang ini termasuk dalam semua karakteristik yang tercantum dalam pelajaran ini.
Sebagai contoh:
background-color: #FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
background-attachment: fixed;
background-position: right bottom;
Menggunakan latar belakang, hasil yang sama dapat dicapai dengan satu baris kode:
background: #FFCC66 url ("image.gif") no-repeat fixed-right bottom;
Urutan sifat unsur ini adalah sebagai berikut:
background: # FFCC66 url ("image.gif") no-repeat;
maka kedua sifat yang tidak ditentukan diberikan nilai default - scroll dan top left.
Demikian kurang lebih untuk Cara Edit Warna Background di dalam blogger termasuk menu bar.
Dalam pelajaran ini anda akan belajar cara menggunakan warna dan latar belakang di website Anda. Kami juga mempertimbangkan teknik canggih posisi dan manajemen gambar latar belakang. Akan dijelaskan di CSS-sifat berikut:
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Warna latar depan: properti 'color'
Properti menggambarkan warna warna foreground elemen.
Sebagai contoh, bayangkan bahwa kita ingin melakukan semua judul dokumen merah gelap. Semua judul yang ditunjuk HTML-elemen <h1>. Dalam kode di bawah elemen warna merah <h1> diatur.
h1 {
color: # FF0000;
}
Warna bisa ditentukan sebagai nilai heksadesimal, seperti dalam contoh ( #FF0000 ), atau Anda dapat menggunakan nama warna ( "red" ) atau nilai rgb (RGB (255,0,0) ).
Properti 'background-color'
Latar Belakang properti warna menggambarkan warna latar belakang dari elemen.
Dalam elemen <body> ditempatkan seluruh isi dokumen HTML. Jadi, untuk mengubah warna latar belakang dari keseluruhan halaman, background-color berlaku untuk sebuah <body>.
Anda juga dapat menggunakan properti ini untuk unsur-unsur lain, termasuk - untuk judul dan teks. Contoh berikut warna latar belakang yang berbeda yang diterapkan pada elemen dan <h1> <body>.
body {
background-color: # FFCC66;
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Perhatikan bahwa menetapkan dua properti untuk <h1>, dipisahkan dengan titik koma.
Background gambar [background-image]
CSS-background-image properti digunakan untuk memasukkan gambar latar belakang.
Anda dapat digunakan sebagai gambar latar belakang, gambar yang sudah ada di situs Anda atau langsung dari situs lain, yang perlu Anda lakukan adalah untuk menentukan path lengkap ke sana dengan http:// di awal.
Untuk menyisipkan gambar sebagai gambar latar belakang, halaman tersebut hanya menerapkan properti background-image dalam tag <body> dan tentukan lokasi gambar.
body {
background-color: # FFCC66;
background-image: url ("image.gif");
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Perhatikan bahwa kita tentukan di mana file tersebut berada sebagai url ("image.gif"). Ini berarti bahwa dalam folder yang sama dengan stylesheet. Tentu saja Anda juga dapat mengacu pada file gambar dalam folder lain menggunakan, misalnya, url ("/Images/image.gif"), atau bahkan file di Internet, masukkan alamat lengkap file:
url ("http://wen.ru/i/logo.gif")
Ulangi / animasi gambar latar [background-repeat]
Apakah Anda melihat pada contoh sebelumnya, gambar akan diulang di default horisontal dan vertikal mengisi seluruh layar. Properti background-repeat kontrol atas hal itu.
Di bawah ini adalah empat nilai-nilai background-repeat:
background-repeat: repeat-x (Gambar diulang horizontal)
background-repeat: repeat-y (gambar ini diulangi vertikal)
background-repeat: repeat (gambar ini diulangi horizontal dan vertikal)
background-repeat: no-repeat (Gambar tidak diulang)
Misalnya, untuk membatalkan mengulang / wallpaper kartun, kita harus menulis kode seperti ini:
body {
background-color: # FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Mengunci gambar latar belakang [background-attachment]
Properti background-attachment menentukan apakah gambar latar belakang tetap atau gulungan dengan dengan halaman.
Berikut adalah dua nilai background-attachment:
Background-attachment: scroll (gulungan gambar dengan halaman -unlocked)
Background-attachment: fixed (gambar diblokir)
Sebagai contoh, kode berikut menangkap gambar:
body {
background-color: # FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
background-attachment: fixed;
}
h1 {
color: # 990000;
background-color: # FC9804;
}
Lokasi wallpaper [background-position]
Gambar latar belakang default diposisikan di sudut kiri atas layar. Properti background-position memungkinkan mengubah nilai standar, dan wallpaper dapat ditempatkan di manapun pada layar.
Ada banyak cara untuk mengatur background-position. Namun demikian, mereka mewakili satu set koordinat. Sebagai contoh, nilai '200px 100px' memiliki gambar latar belakang ke kiri 100px dan 200px dari atas jendela browser.
Koordinat dapat ditetapkan sebagai persentase dari lebar layar, unit tetap (pixel, cm, dll) atau Anda dapat menggunakan kata-kata top, bottom, center, left dan right.
Tabel berikut memberikan beberapa contoh:
background-position: 2cm 2cm (Gambar 2 cm terletak di sebelah kiri dan 2cm dari atas)
background-position: 50% 25% (Gambar terletak di pusat dan seperempat layar di atas)
background-position: top right (Gambar di sudut kanan atas halaman)
Dalam kode contoh gambar latar belakang terletak di sudut kanan bawah layar:
body {
background-color: # FFCC66;
background-image: url ("image.gif")
; background-repeat: no-repeat-;
background-attachment: fixed;
background-position: right bottom;
}
h1{
color: # 990000;
background-color: # FC9804;
}
Disingkat notasi [background]
latar belakang ini termasuk dalam semua karakteristik yang tercantum dalam pelajaran ini.
Dengan latar belakang, Anda dapat memampatkan beberapa properti dan menulis gaya Anda dalam bentuk singkatan, yang memfasilitasi membaca tabel.
Sebagai contoh:
background-color: #FFCC66;
background-image: url ("image.gif");
background-repeat: no-repeat-;
background-attachment: fixed;
background-position: right bottom;
Menggunakan latar belakang, hasil yang sama dapat dicapai dengan satu baris kode:
background: #FFCC66 url ("image.gif") no-repeat fixed-right bottom;
Urutan sifat unsur ini adalah sebagai berikut:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Jika properti tidak ada, secara otomatis mendapat nilai default. Sebagai contoh, jika background-attachment dan background-position tidak ada dalam contoh ini:
background: # FFCC66 url ("image.gif") no-repeat;
maka kedua sifat yang tidak ditentukan diberikan nilai default - scroll dan top left.
Demikian kurang lebih untuk Cara Edit Warna Background di dalam blogger termasuk menu bar.