BAB 8 CSS LANJUTAN
1. PENGATURAN
LINK DENGAN CSS
Beberapa property yang sering digunakan untuk link adalah :
Color : mengganti warna link
Background : memberi warna sorotan
Text-decoration : biasanya untuk membuat link bergaris
bawah (underline) atau tidak,tetapi dapat pula digunakan untuk membuat link
bergaris silang,berkedip atau bergaris tengah.
Ada
4 pseudo-classes untuk yaitu,yaitu :
v
Link : style untuk link secara umum (biasa).
v
Visited : style untuk style yang telah
dikunjungi.
v
Hover : style untuk link ketika didekati kursor.
v
Active : style untuk link yang sedang aktif.
Berikut adalah contoh CSS untuk link :
Body
{background-color : #ffffff; }
a {
font-family
: arial,verdana,sans-seri
font-size
: 12px;
font-wight
: bold; }
a :
link {
color
: #0000ff;
text-decoration
: none; }
a:
visited {
color
: #333399;
text-decoration
: none; }
a :
link : hover {
background-color
:#e9e9e9;
text-decoration
: underline; }
a
:active {
color
: #0033ff;
text-decoration
: underline; }
2. PENGATURAN
BACKGORUND DENGAN CSS
Berikut
adalah beberapa property yang dapat digunakan untuk melakukan pengaturan
background :
Property
|
Fungsi
|
Background-color
|
Digunakan untuk mengatur warna latar.
Contoh :
|
body{background-color
: #cccccc ; color : #000000;}
b
{background-color : #FF0000; color: #FFFFFF;}
p
{backgorund-color : rgb (255,255,255);}
|
|
Background-image
|
Menggunakan gambar sebagai latar.
Contoh :
|
body
{
background-image
:
url
(“image/background.gif”) ;
background-color
: #cccccc;}
|
|
Background-repeat
|
Mengatur apakah gambar latar diulang
atau tidak.
Ada 4 macam perulangan gambar untuk
background :
Ø
Repeat :
gambar diulang memenuhi halaman.
Ø
Repeat-x : gambar diulang secara vertikal.
Ø
Repeat-y : gambar diulang secara horizontal.
Ø
No-repeat : gambar hanya ditampilkan sekali.
|
body
{
background-image
:
url
(“image/background_small.gif”);
background-repeat
: repeat-y;}
|
|
Background-attachment
|
Menetapkan gambar latar pada letak
tertentu di halaman dan apakah gambar tersebut tetap pada letaknya jika
halaman digeser kebawah. Ada dua value dari property ini :
ü
Fixed : gambar tidak akan bergerak walau halaman
digeser keatas atau kebawah.
ü
Scroll : gambar bergerak bersama halaman.
|
body
{
background-image :
url
(“images/background_small.hif”);
background-attachment:fixed;}
|
|
Background-position
|
Mengatur dimana gambar latar akan
diletakkan. Ada beberapa value untuk property ini :
X% y% : persentasi dimana x ( horizontal) dan y
(vertikal)
X y : nilai tetap x dan y dalam pixel.
Left : gambar disebelah kiri halaman atau elemen.
Center : gambar ditengah halaman atau elemen.
Right : gambar berada di sebelah kanan halaman
atau elemen.
Top : gambar disebelah atas halaman atau elemen.
Bottom : gambar disebelah bawah atau elemen. |
body
{
background-image
:
url
(“images/background_small.gif”);
background-position
: 50% 20%;}
|
|
Background
|
Memungkinkan untuk melakukan
pengaturan dari semua property.
|
body
{background : #cc66ff;
url(“image/background_small.gif”)
fixed
non-repeat
center ;}
|
(color.html)
Body {background-color : #ffffff; }
a {
font-family : arial,verdana,sans-seri
font-size : 12px;
font-wight : bold; }
a : link {
color : #0000ff;
text-decoration : none; }
a: visited {
color : #333399;
text-decoration : none; }
a : link : hover {
background-color :#e9e9e9;
text-decoration : underline; }
a :active {
color : #0033ff;
text-decoration : underline; }
(link.html)
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css"
href="link.css"/>
</head>
<body>
<h1>Link Style</h1>
<p>This example contains some links,which you should
play with to see how they behave:</p>
<ul>
<li>The <a href="http://www.wrox.com/">Wrox Website</a> is the home of the XHTML and CSS recomendation.</li>
<li>The <a href="http://www.google.com/">Google Website</a> is a popular search tool that will help you
find answer to any question you have.</li>
</ul>
</body>
</html>
link.css
(List.html)
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css"
href="list.css"/>
</head>
<body>
<ul>
<li> This example illustrates using an image for a bullet point.</li>
<li> This example illustrates using an image for a bullet point.</li>
<li> This example illustrates using an image for a bullet point.</li>
</ul>
</body>
</html>
list.css
table.html
<html>
<head>
<title> CSS Example</title>
<link rel="stylesheet" type="text/css"
href="table.css"/>
</head>
<body>
<table border="2">
<caption><b>Font properties</caption>
<tr>
<th>Property</th>
<th>Purpose</th>
</tr>
<tr>
<td class="code">font-family</td>
<td>Specifies the size font use. </td>
</tr>
<td class="code">font-size</td>
<td>Specifies the size of font use. </td>
</tr>
<tr>
<td class="code">font-style</td>
<td>Specifies whether the font sould be normal,
italic, or oblique. </td>
</tr>
<td class="code">font-wight</td>
<td>Specifies whether the font sould be normal,
bold,bolder,or lighter. </td>
</tr>
</table>
</body>
</html>
table.css
table2.html
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>Table styles</title>
<link rel="stylesheet" type="text/css"
href="table2.css"/>
</head>
<body>
<table border="2">
<tr>
<th>Quantity</th>
<th>Ingredient</th>
</tr>
<tr class="odd">
<td>3</td>
<td>Eggs</td>
</tr>
<td>100ml</td>
<td>Milk</td>
</tr>
<tr class="odd">
<td>200g</td>
<td>Spinach</td>
</tr>
<tr>
<td>1 pinch</td>
<td>Cinnanom</td>
</tr>
</table>
</body>
</html>
table2.css
Body {background-color : #ffffff; }
a {
font-family : arial,verdana,sans-seri
font-size : 12px;
font-wight : bold; }
a : link {
color : #0000ff;
text-decoration : none; }
a: visited {
color : #333399;
text-decoration : none; }
a : link : hover {
background-color :#e9e9e9;
text-decoration : underline; }
a :active {
color : #0033ff;
text-decoration : underline; }
(link.html)
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css"
href="link.css"/>
</head>
<body>
<h1>Link Style</h1>
<p>This example contains some links,which you should
play with to see how they behave:</p>
<ul>
<li>The <a href="http://www.wrox.com/">Wrox Website</a> is the home of the XHTML and CSS recomendation.</li>
<li>The <a href="http://www.google.com/">Google Website</a> is a popular search tool that will help you
find answer to any question you have.</li>
</ul>
</body>
</html>
link.css
body{background-color:#ffffff;}
a {
font-family:arial,verdana,sans-serif;
font-size:12px;
font-weight:bold;}
a:link {
color:#0000ff;
text-decoration:none;}
a:visited{
color:#333399;
text-decoration:none;}
a:active{
color:#0033ff;
text-decoration:underline;}
a:link:hover{
background-color:#e9e9e9;
text-decoration:underline;}
(List.html)
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css"
href="list.css"/>
</head>
<body>
<ul>
<li> This example illustrates using an image for a bullet point.</li>
<li> This example illustrates using an image for a bullet point.</li>
<li> This example illustrates using an image for a bullet point.</li>
</ul>
</body>
</html>
list.css
body {background-color: #ffffff;}
ul{list-style-image: url("image/bulletpoint.gif");}
li {marker-offset:20px;}
table.html
<html>
<head>
<title> CSS Example</title>
<link rel="stylesheet" type="text/css"
href="table.css"/>
</head>
<body>
<table border="2">
<caption><b>Font properties</caption>
<tr>
<th>Property</th>
<th>Purpose</th>
</tr>
<tr>
<td class="code">font-family</td>
<td>Specifies the size font use. </td>
</tr>
<td class="code">font-size</td>
<td>Specifies the size of font use. </td>
</tr>
<tr>
<td class="code">font-style</td>
<td>Specifies whether the font sould be normal,
italic, or oblique. </td>
</tr>
<td class="code">font-wight</td>
<td>Specifies whether the font sould be normal,
bold,bolder,or lighter. </td>
</tr>
</table>
</body>
</html>
table.css
body {
color:#000000;
h1 {font-size:18pt;}
p {font-size:12pt;}
table{
background-color:#efefef;
width:350px;
border-style:solid;
border-width:1px;
border-color:#999999;
font-family:arial,verdana,sans-serif;}
caption {
font-weight:bold;
text-align:left;
border-style:sclid;border-widht:1px;border-color:#666666;}
th{
height:50px;
font-weight:bold;
text-align:left;
background-color:#cccccc}
td,th{padding:5px;}
td.code{
width:50px;
font-family:courier,courier-new,serif;
font-weight:bold;
text-align:right;
vertical-alihn:top;}
table2.html
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>Table styles</title>
<link rel="stylesheet" type="text/css"
href="table2.css"/>
</head>
<body>
<table border="2">
<tr>
<th>Quantity</th>
<th>Ingredient</th>
</tr>
<tr class="odd">
<td>3</td>
<td>Eggs</td>
</tr>
<td>100ml</td>
<td>Milk</td>
</tr>
<tr class="odd">
<td>200g</td>
<td>Spinach</td>
</tr>
<tr>
<td>1 pinch</td>
<td>Cinnanom</td>
</tr>
</table>
</body>
</html>
table2.css
body {
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size : 14px;}
table {
border-style:solid;
border-width:1px;
border-color:#666666;}
th {
color:#ffffff;
background-color:#999999;
font-weight:bold;
border:none;
padding:4px;}
tr {background-color :#cccccc;}
tr.odd {background-color:#efefef;}
td {
color:#000000;
padding:2px;}
