Belajar CSS #Intermediate

Juni 8, 2011 at 3:37 am (komputer, Materiku, pemrograman) (, , )

1. Class dan ID selector

Pada css selektor class diawali dengan titik (.) dan selektor ID dinyatakan dengan tanda kress (#)

eq:
#top {
background-color: #ccc;
padding: 1em
}

.intro {
color: red;
font-weight: bold;
}

Contoh HTML refers to the CSS yang menggunakan atribut class dan ID seperti code di bawah ini:

<div id=”top”>

<h1>Chocolate curry</h1>

<p>This is my recipe for making curry purely with chocolate</p>

<p>Mmm mm mmmmm</p>

</div>

Perbedaan antara  ID dan class yaitu bahwa sebuah ID dapat digunakan untuk mengidentifkasi satu elemen, sedangkan class digunakan untuk mengidentifikasi lebih dari satu elemen.
2. Grouping dan nesting
2.1 grouping
Kita dapat memberikan properti yang sama ke sejumlah selektor tanpa harus mengulangnya dengan cara memisahkan selektor dengan tanda koma.
contoh:

h2 {
color: red;
}

.thisOtherClass {
color: red;
}

.yetAnotherClass {
color: red;
}

bisa ditulis seperti ini:

h2, .thisOtherClass, .yetAnotherClass {
color: red;
}

2.2 nesting
Jika css terstruktur dengan baik seharusnya tidak perlu menggunakan banyak selektor class ataupun ID.
contoh:

#top {
background-color: #ccc;
padding: 1em
}

#top h1 {
color: #ff0;
}

#top p {
color: red;
font-weight: bold;

Hapus kebutuhan class atau ID jika itu diterapkan untuk HTML yang terlihat seperti dibawah ini:

<div id=”top”>

<h1>Chocolate curry</h1>

<p>This is my recipe for making curry purely with chocolate</p>

<p>Mmm mm mmmmm</p>

</div>

Contoh diatas mungkin akan menjadi rumit

3. Pseudo classes

Pseudo class berfungsi untuk memperinci bagian dari selektor. Formatnya adalah selector:pseudo class {property: value;}
Ada empat pseudo class yang sering digunakan antara lain:

– link : digunakan untuk menunjukkan link yang belum dikunjungi
– visited : digunakan untuk menunjukkan link sebuah halaman yang sudah dikunjungi
– active: digunakan untuk menunjukkan sebuah link yang aktif (ketika mouse meng-klik link)
– hover: digunakan untuk menunjukkan link ketika kursor berada di atas tulisan (yang dilink-kan)

contoh:
a.snowman:link {
color: blue;
}

a.snowman:visited {
color: purple;
}

a.snowman:active {
color: red;
}

a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}

4. Shorthand properties

Penulisan property pada css bisa saja ditulis lebih singkat. contoh:

p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}

dapat diringkas menjadi:
p {
border-width: 1px 5px 10px 20px;
}

top, right, bottom dan left merupakan property

border-width, border-color, dan border-style juga dapat disingkat menjadi seperti berikut ini:

p {
border: 1px red solid;
}

contoh lebih lengkapnya:

p {
font: 1em/1.5 “Times New Roman”, times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}

keterangan:
/1.5 menerangkan line-height

5. Background image

Ada sejumlah property yang dapat digunakan untuk merubah tampilan background yaitu:

– background-color

– background-image

– background-repeat
untuk mengulang image background / menggandakan image. meliputi:
>repeat: mengulang gambar dan menatanya seperti ubin diseluruh halaman.
>repeat-y: mengulangi pada y-axis, atas dan bawah
>repeat-x: mengulangi pada x-axis, side-by-side
>no-repeat:tidak ada pengulangan /penggandaan image

– backgrpund-position
posisi background dapat top, center, bottom, left atau right

contoh:

body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: