Ragam Bisnis Online Blogger Yang Populer Saat Ini Dan Paling Banyak Peminat Serta Popular Dengan Menggunakan Media Website

Opsi Tambahan dan Menyisipkan STYLE

Posted by farah aksesoris 0 komentar

Untuk menyisipkan (embed) Style Sheet, tambahkan blok <STYLE> </STYLE> di awal dokumen, di antara tag-tag <HTML> dan <BODY>. Hal ini memungkinkan anda unutk mengubah penampilan satu halaman web. Tag <STYLE> memilki satu parameter yaitu TYPE, yang menspesifikasi type media internet sebagai “text/css” (memungkinkan browser yang tidak mendukung type ini untuk mengabaikan Style Sheet). Tag <STYLE> diikuti oleh sejumlah definisi style dan berakhir dengan tag </STYLE>.

<HTML>


<STYLE TYPE="text/css">


<!--


  BODY {font: 10pt "Arial"}


  H1 {font: 15pt/17pt "Arial";


      font-weight: bold;


      color: maroon}


  H2 {font: 13pt/15pt "Arial";


      font-weight: bold;


      color: blue}


  P  {font: 10pt/12pt "Arial";


      color: black}


-->


</STYLE>


<BODY>


...


</BODY>


</HTML>



Sederhanakan melalui pengelompokkan



Bila anda ingin menerapkan pemformatan yang sama bagi berbagai tag, misal:




  H1 {font-size: 15pt;


      font-weight: bold;


      color: maroon}


  H2 {font-size: 15pt;


      font-weight: bold;


      color: maroon}


  H3 {font-size: 15pt;


      font-weight: bold;


      color: maroon}



anda dapat mengelompokkannya menjadi




  H1, H2, H3


{font-size: 15pt;


            font-weight: bold;


            color: maroon}



Anda dapat pula mengelompokkan spesifikasi pemformatan. Misal:




  H1 {font-size: 15pt;


      line-height: 17pt;


      font-weight: bold;


      font-family: "Arial"


      font-style: normal}



dapat disederhanakan menjadi seperti berikut ini




  H1 {font:


15pt/17pt bold "Arial" normal}



 


Variasi melalui class



Gunakan class untuk membuat berbagai macam variasi bagi satu tag HTML. Sebagi contoh, bila anda ingin menggunakan tiga warna untuk heading H1 (katakanlah bergantung pada konteks), anda dapat mendefinisikannnya dalam tiga class dalam STYLE tag berikut:




<STYLE>


  H1.red {font: 15pt/17pt;


          color: red}


  H1.green {font: 15pt/17pt;


          color: green}


  H1.blue {font: 15pt/17pt;


          color: blue}


</STYLE>


Pada halaman web gunakan class tersebut



<H1 CLASS=red>This is the red heading</H1>


...


<H1 CLASS=blue>This is the blue heading</H1>


...


<H1 CLASS=green>You get the picture...</H1>



 


Link



Implementasi Style Sheet juga memungkinkan anda mengubah penampilan dari link (teks yang diklik oleh user untuk lompat ke halaman lain) dengan memberikan dua class yang telah didefinisikan pada tag <A>:




  • A:link menunjukkan link yang belum dikunjungi


  • A:visited menunjukkan link yang telah diklik/dikunjungi oleh user



Anda dapat mengeset sejumlah properti pemformatan teks pada class-class A tersebut, termasuk color, Font-size, font-weight, dan text-decoration. Sebagai contoh, untuk menentukan warna yang spesifik pada tiga tipe link, anda dapat menspesifikasi:




  A:link {color: red}


  A:visited {color: blue}


  A:active {color: orange}



Dengan menambahkan text-decoration “none” menghilangkan garis bawah pada teks link




  A:visited {color: blue; text-decoration: none}



 


Komentar



Anda dapat menambahkan komentar pada Style Sheet. Komentar dapat ditulis pada baris manapun dalam spesifikasi style di antara tanda /* dan */ misal:




  H1 {font: 20pt/22pt


bold; color=#00FF00} /* Hijau untuk heading 1 */