FATCHUR ROCHMAN : CSS LINKS AND LISTS

Links/hyperlink adalah sebuah acuan dalam dokumen hiperteks ke dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur. Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protocol akses, sebuah komputer dapat diminta untuk memperoleh sumber yang direferensikan.

Macam-macam links

a:link - normal, link yang belum dikunjungi
a:visited - link pengguna telah mengunjungi
a:hover - link ketika mouse pengguna di atasnya
a:active - link saat itu diklik

Property links antara lain :

Warna latar belakang (background-color)
Text Decorasi (Text Decorations)

   Text Decorations biasa di gunakan untuk menghilangkan garis bawah yang terdapat di links.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}
</style>
</head>
<body bgcolor="pink">
<p><b><a href="default.asp" target="_blank">Ini links</a></b></p>
<p><b>links: </b>Ini merupakan contoh dari links </p>
</body>
</html>
Hasilnya.

List/Daftar.
Dalam html terdapat 2 links yaitu :

daftar unordered (<ul>) - daftar item ditandai dengan peluru
daftar memerintahkan (<ol>) - daftar item ditandai dengan angka atau huruf

Daftar css properti memungkinkan anda untuk bisa

Set spidol item daftar yang berbeda untuk daftar memerintahkan
Set spidol item daftar yang berbeda untuk daftar unordered
Mengatur foto sebagai penanda item daftar
Menambahkan warna latar belakang untuk daftar dan daftar item

Daftar property list :

list-style-type
list-style-position
list-style-image

Contoh.

<!DOCTYPE html>
<html>
<head>
<style>
ol {
    background: #ff9999;
    padding: 20px;
}
ul {
    background: #3399ff;
    padding: 20px;
}
ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}
ul li {
    background: #cce5ff;
    margin: 5px;
}
</style>
</head>
<body>
<h1>lists menggunakan warna :</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
hasilnya.

FATCHUR ROCHMAN

Selasa, 19 Januari 2016

CSS LINKS AND LISTS

Tidak ada komentar:

Posting Komentar