CSS Nedir? Nasıl Kullanılır?
Şimdi A etiketinin özel durumunu da gördükten sonra esaslı bir css kullanma tekniğini görelim. Bu örneğimizde div , table , span , h1-2-.. , p , a gibi Html etiketlerini kullanırken nasıl bir yöntem izlememiz gerektiğini göreceğiz.
İlk öncelikle stillerimiz hem bağlantılı hem global hem de yerel kullanacağız. Bunu belirteyim. Böylelikle sizde nasıl bir yol izlemenize kara verin
Şimdi bağlantılı css dosyamızı hazırlayalım. Hatırlayacağınız üzere bu dosyanın uzantısı css olmalı. Bu css dosyasını Html dosyamızın içerisinde çağıracağız.
Aşağıdaki kodları stil.css adıyla kaydedelim.
| A {font-style : normal; color : navy; font-family : Times New Roman ! important; text-decoration : none; <!-- bu satır linkin altında satır olmamasını sağlar --> A:Visited {font-family : Times New Roman ! important; font-style : italic; color : olive;} A:Active { font-family : Times New Roman; color : red;} A:Hover {text-decoration : underline; font-family : Times New Roman ! important; font-weight : bold; font-style : normal; color : maroon;} BODY { background: white url("fon.gif");background-repeat: repeat-y;background-position: left; } p#sol {position : relative;visibility : visible;left : 30pt;width : 450pt;font-family:"Verdana,Arial,Helvetica" ! important;font:15pt;} |
Aşağıdaki kodları da css.html adıyla kaydedelim. (Dikkat ! html uzantlı kaydedin )
| <html> <head> <title>Css</title> <style type="text/css"> <!-- .onemli {font-weight:bold;} h4 {color:blue;position : relative;visibility : visible;left : 25pt;font-size:large;.solic { color:brown;font-family: "Verdana,Arial,Helvetica"; position : relative;visibility : visible;left : 20pt;font-weight:bold; } li { list-style-type : circle;list-style-position : inside;list-style : decimal;} ; --> </style> <link rel=stylesheet href="stil.css" type="text/css"> </head> <body> <table width="500" align="center"> <tr><td> <!-- Global --> <h4>Bilgisayar;<a name="bsl"> </a></h4> <!-- Eğer koordinatları tam olarak ayarlamak istiyorsanız (MSIE ve NN icin) Global Stil Şablonu Kullanmalısınız. --> <p id="sol"> Aldığı komutlar uyarınca, veri işleyerek problem çözen otomatik elektronik aygıtların ortak adı. Bu tür aygıtlar, çalışma ilkeleri,donanım tasarımları ve uygulama alanları bakımından örneksel, sayısal ve karma bilgisayarlar olarak <font class="onemli">üçe</font> ayrılır.</p> <p id="sol"> <ul> <li><a href="css.html#orneksel">Örneksel (analog) bilgisayarlar</a> <li><a href="css.html#sayisal">Sayısal bilgisayarlar</a> <li><a href="css.html#karma">Karma bilgisayarlar</a> </ul> </p> <p class="solic"> örneksel (analog) bilgisayarlar<a name="orneksel"> </a></p> <p id="sol">Açısal konum ya da gerilim gibi değişken nicelikleri temsil eden veriler üzerinde işlem yapar ve çözülmesi istenen matematiksel problemin fiziksel bir örneğini oluştururlar. Sıradan diferensiyel denklemleri çözebilen örneksel bilgisayarlar, sistem mühendisliğinde, özellikle bazı süre ve donatımların gerçek zamanlı benzetim modellerinin oluşturulmasına çok elverişlidirler. Bu bilgisayarların bir başka yaygın kullanım alanı da elektrik dağıtım sistemi gibi şebekelerin analizidir.<br> <a href="css.html#bsl">Başa Dön</a> </p> <p class="solic">Sayısal bilgisayarlar,<a name="sayisal"> </a></p> <p id="sol">Çeşitli üretim süreçlerine, takım tezgahlarına , karmaşık laboratuvar ve hastane aygıtlarına kumanda etmekte kullanılırlar. Aynı özellikten, uçakların ve uzay araçlarının karmaşık iletişim sistemlerinin otomatizasyonunda da yararlanılır. Sayısal bilgisayarlar ayrıca, eğitimde yardımcı olarak (örn. temel dil ve matematik becerilerinin kazandırılmasında) , bilimsel araştırmalarda ise verilerin analizi ve matematiksel modellerin geliştirilmesi amacıyla kullanılır. <br> <a href="css.html#bsl">Başa Dön</a> </p> <p class="solic">Karma bilgisayarlar,<a name="karma"> </a></p> <p id="sol">Örneksel ve sayısal bilgisayarların özelliklerine ve yararlarını birleştirirler; örneksel bilgisayarlara oranla daha fazla kesinlik, sayısal bilgisayarlara oranla daha fazla deneteleme sağlarlar. <br><a href="css.html#bsl">Başa Dön</a> </p> </td> </tr> </table> </body> </html> |
Burada birkaç konuya açıklık getirelim.
Bazı stil özelliklerinin sonunda gördüğünüz !important ifadesi ile ziyaretçi kendi bilgisayarındaki tarayıcı özelliklerini değiştirmiş olsa dahi bu değerleri kullanmamasının bizim belirttiğimiz değerleri kullanmasını söylemiş oluyoruz.
Font özelliklerinde çoğu zaman birden çok font ismi kullandık. Bunun nedeni eğer ziyaretçinin makinasında ilk font yoksa ikincisi o da yoksa üçüncü font kullanılır.Şayet o fontta yoksa tarayıcının kendi banko fontu kullanılır. Böylelikle bizde değişik ziyaretçi makinalarında sayfamızın nasıl görünebileceğini öncelikle kontrol altına almış oluruz.
------------------------------------------
Bu dökümanın her hakkı saklıdır. Döküman Tahribat.Com için özel olarak derlenmiş ve/veya yazılmıştır. Tamamının veya bir kısmının yazardan (renegadealien) izin alınmadan başka kaynaklarda yayınlanması, kopyalanması, değişiklik yapılması kesinlikle yasaktır. Lütfen saygısızlık yapmayalım.
Mail :renegadealien@gmail.com
------------------------------------------
renegadealien-www.tahribat.com-Her hakkı saklıdır.
Hit: 5632
Yazar: renegadealien