Color Dan Background
Property-property ini menggambarkan warna (color) dan latar belakang (background) dari suatu element. Kita. Kita dapat menentukan warna latar (background color) dari gambar latar belakang (background image). Posisi dari gambar (image), bagaimana jika berulang-ulang dan apakah tetap atau relatif terhadap canvas juga dapat di tentukan.
Dalam pembahasan artikel kali ini, banyak mencakup atribut-atribut yang harus kalian kenal dan pahami arti di dalam atribut tersebut. Penjelasan ni akan banyak mejelaskan Color dan Background, membuat tampilan website yang anda bangun menjadi lebh menarik.
Color
Syntax : color: <value>
Property color digunakan untuk menentukan warna dari element HTML.
Contoh :
H1 { color: blue }H2 { color: #FFCC88 }H3 { color: #00CCCC }
Contoh diatas memberikan warna pada element H1, H2, H3.
Background Color
Syntax : background-color: <value>
Possible Values: <color> | transparent
Property bacground color digunakan untuk menentukan background color (warna latar belakang dokumen).
Contoh :
BODY { background-color: white }H1 { background-color: #000080 }
Background Image
Syntax: background-image: <value>
Property bacground-image digunakan untuk memberikan background-body image dari suatu element.
Contoh :
BODY { background-image: url (http://www.myserver.com/foo.gif) }P { background-image: url (http://www.myserver.com/bg.png) }
Background Repeat
Syntax: background-repeat: <value>
Possible Values: repeat | repeat-x | no-repeat
Propery background-repeat menentukan bagaimana suatu background image yang telah didefinisikan ditampilkan berulang-ulang, repeat-x value akan mengulang image secara horizontal sedangkan repeat-y value akan mengulang image secara vertikal.
Contoh :
BODY { background: yellow url (candybar.gif);background-repeat: repeat-y }
Contoh diatas akan menampilkan background-image berulang-ulang (tiled) secara horizontal dengan background color kuning.
BODY { background: white url (candybar.gif);background-repeat: repeat-y }
Contoh diatas akan menampilkan background-image berulang-ulang (tiled) secara vertikal dengan background color putih.
Background
Syntax: background: <value>
Possible Value: <background-color> ||
<background-image> ||
<background-repeat>
Property ini memiliki value yang mungkin seperti background-color, background-image, background-repeat.
Contoh definisi bacground sebagai berikut :
BODY { background: white url (http://www.power.com/foo.gif) }BLOCKQUOTE { background: #7fffd4 }P { background: url(../images/pawn.png) #f0f8ff fixed }TABLE { background: #0c0 url (leaves.jpg) }
Propery Background Lainnya
| Property | Description | Values | CSS |
| background | Setting semua properti background | background-color background-image background-repeat background-attachment background-position inherit |
1 |
| background-attachment | Seting apakah sebuah background gambar adalah fix atau dapat di scroll dalam sebuah halaman website | scroll fixed inherit |
1 |
| background-color | Setting warna background sebuah element | color-rgb color-hex color-name transparent inherit |
1 |
| background-image | Setting background dengan image pada sebuah element | url (URL) none inherit |
1 |
| background-position | Setting posisi awal dari gambar yang dijadikan background | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos inherit |
1 |
| background-repeat | Seting apakah gambar yang dijadikan background akan berulang (repeated) | repeat repeat-x repeat-y no-repeat inherit |
1 |
Dalam mengenal propert CSS kalian bisa banyak mengetahui dan mengenal atribut-atribut yang tersedia seperti di atas yang dapat kalian pelajari. Untuk membangun sebuah website kalian perlu mempercantik tampilan dengan menggunakan CSS. Karena CSS adalah peran utama dalam tampilan atau mengaturnya menjadi lebih indah pada halaman website.
Belum ada tanggapan untuk "Mengenal Property Dalam CSS"
Posting Komentar