Artikel

Home > Artikel
 

 

Menata Teks


Diposting : 2017-04-13 oleh : WebHozz



Halo sobat Webhozz berjumpa lagi dengan saya, kali ini saya ingin membagikan artikel mengenai contoh script untuk menata teks pada CSS3, nah biar pada nggak bingung langsung aja yuk kita lihat artikelnya sobat Webhozz. Selain mengatur font, kalian juga bisa mengatur bagaimana teks-teksnya ditampilkan di halaman web. Contoh sebagai berikut:

 

                <!DOCTYPE html>

                <html>

                       <head>

                                <title>Menata Toko</title>

                                       <style>

                                                . renggang { letter – spacing :  5px ; }

                                                . spasi { line - height :  300% ; }

                                                . tabulasi  { tab – else :  16 ; }

                                                . kekanan  { text – align :  right ; }

                                                . darikanan  { direction :  rt1 ;  unicode - bidi :  bidi – override ; }

                                                . garisatas  { text – decoration :  overline ; }

                                                . indentasi  { text – indent :  50px ; }

                                                . bayangan  { text – shadow ;   2px  2px  #ff0000 ; }

                                                . transformasi  { text – transform :  uppercase ; }

                                                . kotak  { width :  200px ;   border :   3px   solid red }

                                                . lurus  {white – space :  nowrap ; }

                                                . berjarak   {word – spacing :   20px ; }

                                                . potong  { word – wrap :   break – word ; }

`                                        </style>

                                </head>

 

                                    <body>

                                          <p>Teks normal . </p>

                                            <p  class = “ renggang “ >Teks renggang . </p>

                                            <p  class = “ spasi “ >Teks jarak spasinya 300% dari tinggi teks . </p>

                                            <p>Teks normal . </p>

                                            <pre  class= “ tabulasi “ >Teks dipisahkan dengan tab1 tab2 . </pre>

                                            <p  class = “ kekanan “ >Teks ke kanan . </p>

            <p  class = “ darikanan “ >Teks dari kanan ke kiri . </p>

                                            <p  class = “ garisatas “ >Teks diberi garis di bagian atas . </p>

                                            <p  class = “ indentasi “ >Teks diberi indentasi sehingga menjorok ke kanan . </p>

                                            <p  class = “ bayangan “ >Teks memiliki bayangan merah . </p>

                                            <p  class = “ transformasi “ >Teks ditampilkan dalam huruf kapital . </p>

                                            <div  class = “kotak “ >

                                                   <p>Teks mengikuti lebar class kotak . </p>

                                                   <p  class = “ lurus “ >Teks tidak mengikuti lebas class kotak . </p>

                                                   <p  class = “ potong “ >Katainiakandipotongkarenaterlalupanjang . </p>

                                              </div>

                                              <p  class = “ berjarak “ >Jarak antar kata lebih panjang . </p>

                                       </body>

                                </html>

 

Nah sobat Webhozz itulah pembahasan singkat mengenai mengenai contoh script menata teks pada CSS3. Semoga pembahasan artikel ini dapat membantu sobat Webhozz semua dalam mempelajari CSS3, dan juga dapat menambah pengetahuan sobat Webhozz semua. Sampai berjumpa lagi pada pembahasan artikel-artikel lainnya yang tentunya lebih menarik lagi.

 

 




Tag : kursus android, kursus web, kursus web design, kursus php, kursus website, lenovo, woocommerce, windows, excel, xampp, php, mysql, twitter, analytic, adwords, google, maps, seo, jquery, slider, browser, game, transition, animation, whatsapp, desktop, wireframe, desain, vps, css, aplikasi, html, javascript, captcha, form, kode, kaskus, autoscroll, codeigniter, processor, bootstrap, ios, wordpress, div, span, lollypop, background, marquee, behaviour, plugin, chaton, bitcoin, opencart, payment, post, get, tooltip, button, silverlight, webmaster, phonegap, facebook, html5, swicth, sass, bbm, alert, mvc, fungsi, mobile, loading, nokia, template, traffic, laravel, yii, jquerymobile, blogger, adobe, baidu, hosting, font, server, input, sticky, menu, tokoonline, prestashop, joomla, java, yahoo, angular, microsoft, responsive, generator, visitor, counter, flatdesign, kursus web design jakarta, kursus web design bandung, kursus website bandung, kursus php bandung, kursus android bandung, kursus java bandung, kursus web bandung, Aplikasi Ramadhan, Cara Membuat Website, Tempat Kursus Website Bandung, Manfaat Internet, Menggunakan Wireframe Web, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, multikolom, horizontal, ym, toko online, controllers, optimalisasi, landing page, DOM, kursus web jogja, kursus website jogja, kursus web design jogja, kursus web programming jogja, kursus php jogja, kursus android jogja, kursus android programming jogja, kursus java jogja, kursus webmaster jogja, kursus codeigniter jogja, kursus wordpress jogja, kursus seo jogja, kursus vb jogja, kursus sql server jogja, kursus game jogja, kursus website jakarta, kursus web design jakarta, kursus web programming jakarta, kursus webmaster jakarta, kursus php jakarta, kursus wordpress jakarta, kursus android jakarta, kursus seo jakarta, kursus java jakarta, kursus sql server jakarta, framework cordova, mengenal framework cordova, apa itu cordova, membuat aplikasi android dengan cordova, cordova android, aplikasi hybrid android, cordova vs phonegap, Kursus Website Surabaya, Kursus Web Design Surabaya, Kursus Webmaster Surabaya, Kursus PHP Surabaya, Kursus Wordpress Surabaya ,