Cascading Style Sheets(CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs kita sekaligus memformat ulang situs kita.
CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.
KeuntunganCSS
- Dapat di-update denga ncepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapkan pada seluruh dokumen-dokumenHTML pada halaman situs kita.
- User yang berbeda dapat mempunyai style-sheet yang berbeda pula.
- Ukuran dan kompleksitas document code dapat diperkecil.
Sebuah style sheet terdir dari beberapaaturan(rules). Masing-masing aturan terdiri dari satu atau lebih selektor(selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa
deklarasi yang dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua(:) dan nilai(value).
 |
| Struktur penulisan CSS
<html>
<head> <style> #body{ margin:auto; width:800px; border:1px solid ; border-color:white black black black; } DIV#menuku { /* ini digunakan untuk mengatur bingkai menu */ width:780px; /* digunakan untuk mengatur lebar bingkai menu */ margin: 0 auto; /* digunakan untuk mengatur posisi menu ditengah halaman */ padding: 1px; /* digunakan untuk mengatur jarak bingkai dengan menu */ } DIV#menuku ul { /* ini digunakan untuk merubah tampilan list */ list-style: none; /* digunakan untuk menghilangkan simbol list */ margin: 0; /* digunakan untuk menghilangkan jarak list dengan bingkai menu */ padding: 0; /* sda */ } DIV#menuku ul li { display: inline; /* mengubah list menjadi horizontal */ padding-right: 5px; /* mengatur jarak list item */ } DIV#menuku ul li a { /* digunakan untuk mengatur hyperlink yang sudah dibuat */ background-color: #d9dce5; /* warna background tulisan */ padding: 5px 10px 3px 10px; /* memberi efek kotak pada tulisan */ color: white; /* memberi warna tulisan */ border:1px; /* memberi garis luar kotak hyperlink */ text-shadow: 1px 1px #000; /* efek bayangan pada tulisan */ text-decoration:none; /* menghilangkan garis bawah */ /* dengan konfigurasi diatas hyperlink akan terlihat berbentuk kotak */ } DIV#menuku ul li a:hover { /* digunakan untuk mengatur tampilan hyperlink pada saat mouse diatasnya */ background-color: silver; } #header{ bottom: auto; position: fixed; top: 10px; z-index: 100; height:30px; background-color:#717277; width:780px; -webkit-box-shadow: #666 1px 1px 2px; -moz-box-shadow: #666 1px 1px 2px; box-shadow: #666 1px 1px 2px; padding:10px; text-align:center; size:30px; } #footer { background-color: #383838; border-top: 1px solid #ccc; bottom: 0; color: #ffffff; height: 20px; padding: 10px; position: fixed; top: auto; width: 780px; z-index: 101; text-align:center; } #konten { padding:5px; margin-top:80px; margin-bottom:35px; } </style> </head> <body> <frameset> <frame src="website pertamaku.html" name="main" id="utama"> <div id="body"> <div id="header"> <div id="menuku"> <ul> <li><a href="#">HOME</a></li> <li><a href="content.html" target="utama">CONTENT</a></li> <li><a href="#">ABOUT US</a></li> </ul> </div> </div> <div id="konten"> <pre> a b c d e f g h i j k l m n o p q r s t u v w x k k k k k k k k k k k k k k k k k k k y z gcjhcj gchj fv h h h h h h h h h <pre> </div> <div id="footer"> Desain by indra Tobing </div> </div> </frameset> </body> </html> |
Tidak ada komentar:
Posting Komentar