Untuk mengubah tampilan font pada website biasanya digunakan property font-size, font-style, font family, font-weight font-variant dll. Masing masing property ditulis dan diberi value. Namun ternyata penulisan tersebut bisa disingkat dalam bentuk umum. Format penulisan font dalam satu property saja contohnya adalah :
dengan penulisan seperti di atas akan diartikan bahwa untuk selector p akan tampil huruf miring tebal dan bentuk smal-caps dengan ukuran font 17px dan jenis huruf san-serif. Dengan demikian beberapa propertybisa dibuat dalam satu baris dan lebih singkat.
Penulisan bentuk seperti ini tidak harus lengkap. Yang harus ada adalah font-size dan font-family. Yang lain seperti fon-style boleh ada dan boleh tidak. Pada contoh di atas maka yang harus ada adalah nilai 17px dan san-serif.
Untuk antara font value cukup di batasi spasi. Sementara untuk antara dua font-family dibatasi dengan koma.
Dalam penggunaan line-height dengan cara ini, line-height ditambahkan dengan menggunakan garis miring dan value sesudah font-size. Contohnya : font : bold italic small-caps 12px/120% monospace, cursive, sans-serif.5em/120%.
Urutan penulisan tidak harus berurutan. hanya saja untuk font-size dan font-family harus berada pada dua urutan paling akhir. Sebagai contoh bisa digunakan diperhatikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { font: italic bold small-caps 16px/80% serif;}
.lower { font: italic 16px/120% Arial, Helvetica, sans-serif; }
.cap { font: 16px/1.2em Georgia, Times, serif; }
.small { font: small-caps 18px/24px "Comic Sans MS", serif; }
</style>
</head>
<body>
<h3>Menulis Properties Font pada CSS</h3>
<p class="upper"> Puji dan syukur penulis ucapkan kehadiran Allah SWT yang telah melimpahkan rahmat, hidayah dan karunia-Nya sehingga penulis dapat menyelesaikan laporan observasi Praktek Lapangan Kependidikan ini. </p>
<p class="lower"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="cap"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="small">Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
</body>
</html>
Bisa difokuskan memperhatikan bagian yang berwarna merah. Dalam penulisan tersebut semua gay huruf diitulis dalam bentuk satu baris pada masing masing paragraf yang di defenisikan.
p { font: italic bold small-caps 17px san-serif; }
dengan penulisan seperti di atas akan diartikan bahwa untuk selector p akan tampil huruf miring tebal dan bentuk smal-caps dengan ukuran font 17px dan jenis huruf san-serif. Dengan demikian beberapa propertybisa dibuat dalam satu baris dan lebih singkat.
Penulisan bentuk seperti ini tidak harus lengkap. Yang harus ada adalah font-size dan font-family. Yang lain seperti fon-style boleh ada dan boleh tidak. Pada contoh di atas maka yang harus ada adalah nilai 17px dan san-serif.
Untuk antara font value cukup di batasi spasi. Sementara untuk antara dua font-family dibatasi dengan koma.
Dalam penggunaan line-height dengan cara ini, line-height ditambahkan dengan menggunakan garis miring dan value sesudah font-size. Contohnya : font : bold italic small-caps 12px/120% monospace, cursive, sans-serif.5em/120%.
Urutan penulisan tidak harus berurutan. hanya saja untuk font-size dan font-family harus berada pada dua urutan paling akhir. Sebagai contoh bisa digunakan diperhatikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.upper { font: italic bold small-caps 16px/80% serif;}
.lower { font: italic 16px/120% Arial, Helvetica, sans-serif; }
.cap { font: 16px/1.2em Georgia, Times, serif; }
.small { font: small-caps 18px/24px "Comic Sans MS", serif; }
</style>
</head>
<body>
<h3>Menulis Properties Font pada CSS</h3>
<p class="upper"> Puji dan syukur penulis ucapkan kehadiran Allah SWT yang telah melimpahkan rahmat, hidayah dan karunia-Nya sehingga penulis dapat menyelesaikan laporan observasi Praktek Lapangan Kependidikan ini. </p>
<p class="lower"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="cap"> Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
<p class="small">Akhir kata, penulis menyadari masih banyak kekurangan dalam penulisan laporan ini, oleh karena itu, penulis mohon masukan dan kritikan yang sifatnya membangun demi kebaikan laporan ini. Semoga laporan ini bermanfaat di masa yang akan datang.</p>
</body>
</html>
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment