nternet ProgramlamaI HTML CSS CSS Yardmyla Web Tipografisi

İnternet Programlama-I HTML - CSS

CSS Yardımıyla Web Tipografisi (Yazıtipi) Biçimlendirme Web İçin Tipografi Öncelikle tipografi kavramına değinelim: Tipografi bir grafik tasarım kavramıdır ve dilimize Yunanca’dan girmiştir. Yazıtipini bir forma, biçime sokma sanatı olarak tanımlanır. Tasarım kavramının yer aldığı (Web tasarımı da dahil olmak üzere) neredeyse her noktada büyük önem taşıyan bir olgudur.

Tipografi Neden Bu Kadar Önemli Tipografi, tasarımda metinsel içeriğin ziyaretçi veya izleyici tarafından okunacak öğeler haricinde görsel bütünlüğün bir parçası olarak ele alınmasına dayanır. Yani eğer hazırladığınız projenin konusuyla alakalı olmayan ya da görsel konsept bütünlüğünü bozacak yazıtipi stillendirmelerine girerseniz, tasarımsal kriterlere göre pek başarılı bir sonuç elde etmemiş olacaksınız.

Web Tasarımında Tipografinin Getirisi Ne Olacak? Elbette, öncelikle daha akıcı bir içerik görünümü elde edeceksiniz. Hazırladığınız Web sitesinin yapısıyla uyumlu ve okunaklı yazıtipi büyüklükleri ve renk tonlamaları, metinsel içeriğin görsel hiyerarşisi, siteyi görüntüleyen ziyaretçinin içeriği sıkıntı çekmeden rahat bir şekilde okumasını ve izlemesini sağlayacaktır. CSS yardımıyla, Web dokümanlarımızdaki yazıtipi ve metinsel içeriğin görünüm düzenlemesini yaparak göze daha akıcı ve okunaklı bir içerik yapısı sunacağız.

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak Yazıtipi, tasarımcılar olarak Web tasarımında en sıkıntı duyduğumuz konulardan biridir. HTML dokümanına atayarak tanımladığımız bir yazıtipi, bununla hazırladığımız bir Web sitesini gezen ziyaretçinin bilgisayarında yüklü olmayabilir, bu da sitemizin içeriğini ziyaretçinin tarayıcısının kendi standart yazıtipi görünümünde görüntülemesine sebep olarak görsel problemler yaratabilir. Bu nedenledir ki, elimizdeki 9 -10 kadar kısıtlı, her bilgisayarda yüklü olan standart yazıtipi aileleriyle yetinmek durumunda kalıyoruz. Bu yazıtipleriyle oluşturduğumuz Web siteleri böylece her bilgisayar tarafından tüm tarayıcılarda sorunsuzca görüntülenebiliyor.

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak Yazıtipi adedimizdeki limitlere rağmen, CSS içindeki yazıtipi özellikleri (property) yardımıyla bu problemi mümkün olduğunca giderebilecek, yaratıcılığımızı kısıtlayan bu sıkıntıyı bir nebze olsun azaltabileceğiz. Şimdi, bu bahsettiklerimle ilgili kısa bir ön çalışma yapalım ve oluşturacağımız bir h 1 başlığın yazıtipi özelliklerini biçimlemeye çalışalım:

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak <head> <title>CSS Denemeleri</title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz*/ </style> </head> <body> <h 1> CSS Denemeleri - Merhaba </h 1> </body> </html>

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak Stillendirmemizi henüz uygulamadığımız için, yukarıdaki görüntüde h 1 başlığımızın stilsiz, tarayıcı standardı yazıtipiyle (çoğunlukla “Times New Roman”) yer aldığını görüyoruz. Şimdi, bu başlığa biraz stil atayalım:

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak <head> <title>CSS Denemeleri</title> <style type="text/css"> h 1 { font-family: Verdana, Arial, Helvetica, Tahoma; font-size: 300%; letter-spacing: -5 px; } </style> </head> <body> <h 1> CSS Denemeleri - Merhaba </h 1> </body> </html>

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak h 1 { font-family: Verdana, Arial, Helvetica, Tahoma; font-size: 300%; letter-spacing: 5 px; font-weight: normal; }

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak h 1 { font-family: Verdana, Arial, Helvetica, Tahoma; font-size: 300%; letter-spacing: 5 px; font-weight: normal; font-style: italic; text-transform: lowercase; }

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak h 1 { font-family: Verdana, Arial, Helvetica, Tahoma; font-size: 300%; letter-spacing: 1 px; font-weight: normal; font-style: italic; font-variant: small-caps; }

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak <head> <title>CSS Denemeleri</title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz*/ </style> </head> <body> <p> Yazıtipi, tasarımcılar olarak Web tasarımında en sıkıntı duyduğumuz konulardan biridir. HTML dokümanına atayarak tanımladığımız bir yazıtipi, bununla hazırladığımız bir Web sitesini gezen ziyaretçinin bilgisayarında yüklü olmayabilir, bu da sitemizin içeriğini ziyaretçinin tarayıcısının kendi standart yazıtipi görünümünde görüntülemesine sebep olarak görsel problemler yaratabilir. </p> </body> </html>

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak <style type="text/css"> p{ font-family: “Trebuchet MS”; line-height: 130%; word-spacing: . 2 em; } </style>

CSS Yardımıyla Şık Görünümlü Yazıtipi Oluşturmak p{ line-height: 130%; word-spacing: . 2 em; text-align: left; text-indent: 45 pt; }

CSS İçindeki Renk Tanımlamaları Web dokümanlarımız üzerine renk uygulamaları yaparken, CSS bize tasarımımızda kullanmış olduğumuz renkleri en doğru şekilde tutturabilmek için tamamı rgb renk paletine bağlı olan 3 farklı renk değer kategorisi girme olanağı sunuyor. Renk tanımları, popüler renklerin İngilizce adlarından oluşur. Bilinen Internet tarayıcıları ve Web standartları konsorsiyumu (W 3 C-www. w 3 c. org) bu renk tanımlarından 16 tanesine kesin destek sunar.

CSS İçindeki Renk Tanımlamaları Aqua: deniz mavisi Olive: zeytin yeşili Black: siyah Purple: mor Fuchsia: fuşya Red: kırmızı Gray: gri Silver: gümüş Green: yeşil Teal: tuğla Lime: limon sarısı White: beyaz Maroon: bordo Yellow: standart sarı Navy: koyu lacivert

CSS İçindeki Renk Tanımlamaları Tahmin edeceğiniz üzere bu kısıtlı renk adediyle hazırladığımız komplike renk paletine sahip bir tasarım çalışmamızı hayata geçirmemiz pek mümkün olmayacaktır. Ancak bu tonları kullanarakbazı temel öğelerin renk özelliklerini tanımlayabiliriz. Şimdi İlk olarak bir doküman oluşturalım ve içerik olarak tıklandığında Google’a gönderme işlemini yapan bir link oluşturalım, daha sonra bu link rengi üzerinde değişiklik sağlayacağız:

CSS İçindeki Renk Tanımlamaları <html> <head> <title>Google Web Sitesine Link</title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz*/ </style> </head> <body> <a href="http: //www. google. com. tr">Google Türkiye Anasayfası</a> </body> </html>

CSS İçindeki Renk Tanımlamaları

CSS İçindeki Renk Tanımlamaları <style type="text/css"> a{ color: red; } </style> a{ color: #AC 0000; }

CSS İçindeki Renk Tanımlamaları a{ color: rgb(0, 0, 0); /* siyah */ } h 1 { color: rgb(255, 255); /* beyaz */ } Burada 255’e kadar olmak üzere rakam girmek yerine rgb tonlarına yüzde (%) cinsinden de değer girebiliriz: h 1 { color: rgb(%100, %100); /* beyaz */ }

A Etiketi İçin Linklere Özel Class’lar <style type="text/css"> a: link { color: red; } a: visited { color: blue; } a: hover { color: green; } a: active { color: grey; } </style>

A Etiketi İçin Linklere Özel Class’lar

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek <style type="text/css"> a: link { color: red; } a: visited { color: blue; } a: hover { color: green; } a: active { color: grey; } </style>

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek <html> <head> <title>CSS Nedir? </title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz*/ </style> </head> <body> <div id="anakutu"> <p id="ilk_paragraf"> CSS / Cascading Style Sheets, ham HTML dokümanlarımızın barındırdığı içeriği ve genel doküman yapısını ziyaretçiye daha albenili ve estetik şekilde sunmak amacıyla kullanacağımız bir stillendirme dilidir. </p>

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek <p> CSS, HTML’den farklı bir dil uygulama yapısına (Syntax) sahip. Onunla HTML içinde olduğu gibi etiketler oluşturmak yerine etiketleri ve HTML dokümanları içindeki öğeleri seçip yapılarını değiştirebileceğimiz selektörler, seçiciler ve biçimleyiciler oluşturacağız. </p>

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek <p> CSS dokümanlarını HTML dokümanlarımız içine dahil ederek sayfalarımızın görünümünde köklü değişimler yapabilme şansı elde edeceğiz. </p> </div>  </body> </html>

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek body { background-color: #2 e 6673; /* koyu pastel mavi arkaplan */ color: #9 bbab 9; /* açık pastel mavi metin rengi */ font-family: “Trebuchet MS”; font-size: 9. 5 pt; }

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek #anakutu { padding: 10 px; background-color: #295 c 68; }

$Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek p#ilk_paragraf { padding: 5 px; background-color: #9$

Web Dokümanları İçindeki Elementleri CSS ile Renklendirmek p#ilk_paragraf { padding: 5 px; background-color: #9 bbab 9; color: #295 c 68; }

CSS Renklendirme ile Derinlik Oluşturmak <html> <head> <title>CSS Nedir? </title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz*/ </style> </head> <body> <div id="anakutu"> <h 1> CSS Nedir? </h 1> <p id="ilk_paragraf"> CSS / Cascading Style Sheets, ham HTML dokümanlarımızın barındırdığı içeriği ve genel doküman yapısını ziyaretçiye daha albenili ve estetik şekilde sunmak amacıyla kullanacağımız bir stillendirme dilidir. </p>

CSS Renklendirme ile Derinlik Oluşturmak <p id="ikinci_paragraf"> CSS, HTML’den farklı bir dil uygulama yapısına (Syntax) sahip. Onunla HTML içinde olduğu gibi etiketler oluşturmak yerine etiketleri ve HTML dokümanları içindeki öğeleri seçip yapılarını değiştirebileceğimiz selektörler, seçiciler ve biçimleyiciler oluşturacağız. </p> <em>CSS dokümanlarını HTML dokümanlarımız içine dahil ederek sayfalarımızın görünümünde köklü değişimler yapabilme şansı elde edeceğiz. </p>

CSS Renklendirme ile Derinlik Oluşturmak <p id="ikinci_paragraf"> CSS, HTML’den farklı bir dil uygulama yapısına (Syntax) sahip. Onunla HTML içinde olduğu gibi etiketler oluşturmak yerine etiketleri ve HTML dokümanları içindeki öğeleri seçip yapılarını değiştirebileceğimiz selektörler, seçiciler ve biçimleyiciler oluşturacağız. </p> <em>CSS dokümanlarını HTML dokümanlarımız içine dahil ederek sayfalarımızın görünümünde köklü değişimler yapabilme şansı elde edeceğiz. </p> </div>  </body> </html>

CSS Renklendirme ile Derinlik Oluşturmak

CSS Renklendirme ile Derinlik Oluşturmak body { color: #999; /* gri metin rengi */ font-family: “Trebuchet MS”; font-size: 9. 5 pt; } #ilk_paragraf { color: #000; /* siyah metin rengi */ }

CSS Renklendirme ile Derinlik Oluşturmak body { color: #999; /* gri metin rengi */ font-family: “Trebuchet MS”; font-size: 9. 5 pt; } #ilk_paragraf { color: #000; /* siyah metin rengi */ } #ikinci_paragraf { background-color: #666; /* koyu gri metin rengi */ padding: 5 px; /* 5 piksellik paragraf iç boşluğu */ } em { color: #000; /* siyah metin rengi */ }

CSS Renklendirme ile Derinlik Oluşturmak

CSS Konumlandırma (Float) Eski tablolu tasarımı kullanmış olanların kolay bir şekilde uyguladığı (ve aynı zamanda dokümanı şişiren) konumlandırma ve hizalamalar CSS ile daha hassas bir şekilde uygulanmak durumunda. Ancak bu şekilde tüm tarayıcılarda ve farklı platform erişimlerinde Web dokümanlarımız kusursuz görünecektir. CSS ile konumlandırma yöntemlerinin en basiti olan floating (yüzdürme) ile başlayacağız. Float eskiden içeriğimizdeki görselleri (<img>) metin yanına yerleşmeleri için sola veya sağa yaslama amaçlı kullanılıyordu.

CSS Konumlandırma (Float) CSS’in yaygınlaşmasıyla beraber float özelliği ana kutusal elementlere de (block level/div, p, table vs) uygulanmaya başladı ve float’un ana öğe konumlandırmada da oldukça yardımcı olduğu fark edildi. Bununla beraber float’un doğrudan kullanımı ile konumlandırma sorununu kökten çözen bir özellik olduğunu söylemek mümkün değildir. Float yine de tasarımı dokümana uygulama esnasında temel konumlandırma işlemlerini gerçekleştirme amaçlı olarak en sık kullanılan özelliklerden biridir.

Kutuları Sola ve Sağa Yaslamak Float özelliği hiçbir şekilde net hizalama anlamına gelmiyor. Türkçe tam karşılığı “havada süzülmek” olan float, öğelerimizi soyut olarak sol veya sağa yaslamaya sağlayarak konumlanmış etkisini vermeye yarayacaktır. Kesin konumlandırma amaçlı uygulamalar için ileride position özelliğini göreceğiz. Selektör ve elementlere uygulamak istediğimiz float özelliği, üç değer alabilir: left: sola yasla right: sağa yasla none: float yok / öğeye evvelce uygulanmış bir float varsa onu kaldır. Normal şartlarda float özelliği verilmemişse öğelerin standart float’u bu değere sahiptir.

Kutuları Sola ve Sağa Yaslamak <html> <head> <title>Lorem İpsum Nedir? </title> <style type="text/css"> /*az sonra buraya css kodlarımızı gireceğiz*/ </style> </head> <body> <div id="anakutu"> <h 1> Lorem Ipsum Nedir? </h 1> <div id="sol_kutu"> <p> Lorem Ipsum, masaüstü yayıncılık ve basın yayın sektöründe kullanılan taklit yazı bloğu olarak tanımlanır. Lipsum, oluşturulacak şablon ve taslaklarda içerik yerine geçerek yazı bloğunu doldurmak için kullanılır. </p>

Kutuları Sola ve Sağa Yaslamak <p> Lipsum, 1500’lerin başlarında bir matbaacının font model kitabı oluştumak için, bir yazi tipi kütüphanesindeki harflerin sıralamasını bozarak yerleştirdiğinden bu yana endüstri standardı haline gelmiştir. </p> <p> Lorem Ipsum, 500 yıl boyunca varlığını sürdürmekle kalmamış ve günümüzde elektronik yazı tipinin gerektiği birçok konuda hazır bir araç olarak kullanılmaya başlanmıştır. Lipsum 1960’larda içinde Lorem Ipsum paragraflarının bulunduğu letrasetlerin piyasaya çıkması ve 90 larda Lorem Ipsum versiyonlarını içeren Aldus Pagemaker gibi programlarla beraber yaygın hale gelmiştir. </p>

Kutuları Sola ve Sağa Yaslamak </div> <div id="sag_kutu"> <p> Bilinenin aksine, Lipsum sadece rastgele dizilmiş harflerden oluşan paragraflardan ibaret değildir , tarihi M. Ö. 45 yıllarına dayanan bir klasik Latin edebiyatı eserine dayanir. Yaklaşık 2000 yıldan fazla bir geçmişi vardır. ABD Virjinya’daki Hampden - Sydney Üniversitesi’nden Latin Dili Profesörü Richard Mc. Clintock, Lorem Ipsum paragraflarından birinde anlaşılması en güç Latince kelimelerden bir “consectetur” kelimesine rastlamış , klasik Latin edebiyatı eserlerinde de gördüğü bu kelimeden hareketle Lipsum’un aslında işe yarar bir kaynak olduğunu farketmiştir. </p>

Kutuları Sola ve Sağa Yaslamak <p> Lorem Ipsum, Çiçero’nun M. Ö. 45 yılında yazdığı “de Finibus Bonorum et Malorum – İyi ve Kötünün Uç Sınırları” eserindeki 1. 30. 32 sayılı paragrafında yer alır. Bu eser Rönesans döneminde etik teorileri üzerine bilimsel inceleme konusu haline gelmiştir. </p> </div>  </div>  </body> </html>

Kutuları Sola ve Sağa Yaslamak

Kutuları Sola ve Sağa Yaslamak <style type="text/css"> body { background: #503 b 28; /* koyu pastel kahverengi arkplan */ color: #666; /* koyu gri metin rengi */ font: 9. 5 pt “Trebuchet MS”; text-align: center; /* tüm içeriği ortala */ margin: 20 px; /* doküman geneli boşluk oranı */ } #anakutu { width: 780 px; background: #fff; padding: 10 px; margin: 0 auto; /* kutuyu doküman geneline ortala */ text-align: left; }

Kutuları Sola ve Sağa Yaslamak #anakutu h 1 { color: #8 c 7760; /* pastel kahverengi metin rengi */ margin: 0; /* h 1 elementinin standart margin boşluğunu sıfırla */ padding: 0; /* h 1 elementinin standart padding boşluğunu sıfırla */ font-size: 16 pt; /* h 1 elementinin standart yazıtipi boyutunu 16 puntoya sabitle */ } </style>

Kutuları Sola ve Sağa Yaslamak

$Kutuları Sola ve Sağa Yaslamak #sol_kutu, #sag_kutu { /*selektör gruplama ile iki kutuya da$

Kutuları Sola ve Sağa Yaslamak #sol_kutu, #sag_kutu { /*selektör gruplama ile iki kutuya da ortak özellikler */ border: 3 px solid #685 a 4 b; /* 3 piksellik kahverengi tek ton çerçeve */ padding: 3. 5 px; }

Kutuları Sola ve Sağa Yaslamak

Kutuları Sola ve Sağa Yaslamak Artık kutuları hizalamak için hazırız. Öncelikle sol_kutu div’imize anakutumuzun yarı genişliğine yakın bir oranda genişlik verdikten sonra sola float ettirerek yaslayalım: #sol_kutu { width: 370 px; float: left; }

Kutuları Sola ve Sağa Yaslamak

Kutuları Sola ve Sağa Yaslamak • Float eden bir veya daha fazla öğe, kendilerinin bir üst elementinin yüksekliğini kırarlar. Bizim örneğimizde sol kutunun bir üst elementi anakutudur ve onun yüksekliği aslında kırıldı. Halen anakutu ve arkaplan beyazını görebilmemizin sebebi, henüz sağ kutuya float uygulamamış olmamızdır. • 370 piksellik alan boyunca devam eden sol kutuya uygulanan yaslama sağ kutunun da solun hemen yanına yapışmasına neden oldu. Bu da float’un doğasıdır. Eğer sol kutu yerine bir görsel (<img>) koyup aynı özellikleri uygulamış olsaydık da bu sonucu elde edecektik

Kutuları Sola ve Sağa Yaslamak Bilginiz olsun, her float uyguladığımızda bu sıkıntılarla karşılaşacağız. Bu sıkıntıları çözmeden önce sağ kutunun da yaslamasını yaparak sonuca bir bakalım: #sag_kutu { width: 370 px; float: right; }

Kutuları Sola ve Sağa Yaslamak

Float Eden Öğeleri Temizlemek (Clear Özelliği) Float eden öğeler devamlı bize yukarıdaki sıkıntıları çıkarmaya devam edeceği için, bu tür durumlarda devreye bir tür CSS hacking tekniği devreye girecek. Yapacağımız işlemler sırasıyla şu şekilde: Kendi belirleyeceğimiz bir adla class selektöre sahip bir div oluşturacağız. Selektör türünün class olmasının sebebi şudur: Bir dokümanda bu tip kurtarmalara birden fazla kez ihtiyacımız olabilir. Class selektörler dokümanda tekrar çağrılabildikleri için en doğru seçim olacaktır. Id selektörleri tercih etmeye kalkarsak, bu selektör türü dokümanda yalnızca bir kez kullanılabildiğinden, işimizi görmeyeceklerdi.

Float Eden Öğeleri Temizlemek (Clear Özelliği) Gereken her noktada kurtarıcı div kutusunu HTML dokümanımızda float eden son öğeden hemen sonra yerleştiriyor olacağız Kurtarıcı class selektörünün özellikleri aşağıdaki gibi olacaktır: • Clear özelliğine sol, sağ veya ikisi birden değeri verildiğinde float yaslamaları ortadan kalkacak. • Div içeriğinde hiçbir şey bulunmayacağı için, kendisinin yüksekliği 0 px değerine sahip olacak. • Div yüksekliğinin tüm tarayıcılarda 0 olduğundan emin olmak için font boyutu da 0 px oranına indirgenecek.

Float Eden Öğeleri Temizlemek (Clear Özelliği) • Kurtarıcı div bir nevi gizli kahraman statüsüne sahip olduğu için, görünürlük (visibility) özelliğine gizli (hidden) değeri vererek tüm tarayıcılara aslında orada olmadığını ancak sıkıntıları çözdüğünü belirteceğiz. • Kurtarıcı div’in iki tarafı da boydan boya temizlediğinden emin olmak için genişliği “%100” oranına sahip olacak.

Float Eden Öğeleri Temizlemek (Clear Özelliği) Burada kilit işlemi gerçekleştirecek olan clear özelliği aşağıdaki değerleri alabilir: Left: sol tarafı temizle Right: sağ tarafı temizle Both: hem sağ, hem sol, iki tarafı da temizle Dolayısıyla clear özelliğinin asıl maksadının etrafta float eden öğeler varsa, onlardan sonra gelecek içeriğin float eden öğelerin yanına yaslanmadan normal akışına devam etmelerini sağlayan bir işleve sahip olduğunu söyleyebiliriz.

Float Eden Öğeleri Temizlemek (Clear Özelliği). kurtarici { clear: both; height: 0 px; font-size: 0 px; visibility: hidden; width: 100%; }

Float Eden Öğeleri Temizlemek (Clear Özelliği) </p> </div>  <div class=”kurtarici”> </div>  </body> </html> Kurtarıcı sınıfına sahip div’imizi mutlaka en son float eden öğeden sonra yerleştirmemiz gerekmektedir. Kurtarıcı div’in yanlış noktalara yerleştirilmesi, farklı görünümlere ve sıkıntılı hizalamalara neden olabilir.

Float Eden Öğeleri Temizlemek (Clear Özelliği)

Float Eden Öğeleri Temizlemek (Clear Özelliği) Daha önce de gördüğümüz gibi, float dilediğimiz her elemente uygulanabilir. Tercih ettiğimiz noktalarda float uygulayarak dokümanımızın görünümüne yeni açılar kazandırabiliriz. Bu kez dokümanımızdaki paragrafların tamamına float uygulayarak yana dizili kutular görünümü elde etmeye çalışalım.

Float Eden Öğeleri Temizlemek (Clear Özelliği) <html> <head> <title>Lorem İpsum Nedir? </title> <style type=”text/css”> body { /* doküman geneli stillendirme */ background: #503 b 28; /* koyu pastel kahverengi arkplan */ color: #666; /* koyu gri metin rengi */ font: 9. 5 pt “Trebuchet MS”; text-align: center; /* tüm içeriği ortala margin: 20 px; /* doküman geneli boşluk oranı */ }

Float Eden Öğeleri Temizlemek (Clear Özelliği) #anakutu { width: 930 px; background: #fff; padding: 20 px; margin: 0 auto; /* kutuyu doküman geneline ortala */ text-align: left; } #anakutu h 1 { color: #8 c 7760; /* pastel kahverengi metin rengi */ margin: 0 padding: 0; font-size: 16 pt } </style>

Float Eden Öğeleri Temizlemek (Clear Özelliği) </head> <body> <div id=”anakutu”> <h 1> Lorem Ipsum Nedir? </h 1> <p> Lorem Ipsum, masaüstü yayıncılık ve basın yayın sektöründe kullanılan taklit yazı bloğu olarak tanımlanır. Lipsum, oluşturulacak şablon ve taslaklarda içerik yerine geçerek yazı bloğunu doldurmak için kullanılır. </p> <p> Lipsum, 1500’lerin başlarında bir matbaacının font model kitabı oluştumak için, bir yazi tipi kütüphanesindeki harflerin sıralamasını bozarak yerleştirdiğinden bu yana endüstri standardı haline gelmiştir. </p>

Float Eden Öğeleri Temizlemek (Clear Özelliği) <p> Lorem Ipsum, 500 yıl boyunca varlığını sürdürmekle kalmamış ve günümüzde elektronik yazı tipinin gerektiği birçok konuda hazır bir araç olarak kullanılmaya başlanmıştır. Lipsum 1960’larda içinde Lorem Ipsum paragraflarının bulunduğu letrasetlerin piyasaya çıkması ve 90 larda Lorem Ipsum versiyonlarını içeren Aldus Pagemaker gibi programlarla beraber yaygın hale gelmiştir. </p> <p> Bilinenin aksine , Lipsum sadece rastgele dizilmiş harflerden oluşan paragraflardan ibaret değildir , tarihi M. Ö. 45 yıllarına dayanan bir klasik Latin edebiyatı eserine dayanır. </p>

Float Eden Öğeleri Temizlemek (Clear Özelliği) <p> Yaklaşık 2000 yıldan fazla bir geçmişi vardır. Latin Dili Profesörü Richard Mc. Clintock , Lorem Ipsum paragraflarından birinde anlaşılması en güç Latince kelimelerden bir “consectetur” kelimesine rastlamış, klasik Latin edebiyatı eserlerinde de gördüğü bu kelimeden hareketle Lipsum’un aslında işe yarar bir kaynak olduğunu farketmiştir. </p> <p> Lorem Ipsum, Çiçero’nun M. Ö. 45 yılında yazdığı “de Finibus Bonorum et Malorum – İyi ve Kötünün Uç Sınırları” eserindeki 1. 30. 32 sayılı paragrafında yer alır. </p> </div>  </body> </html>

Float Eden Öğeleri Temizlemek (Clear Özelliği)

Float Eden Öğeleri Temizlemek (Clear Özelliği) Şimdi anakutunun içinde yer alan 6 adet paragrafın hatlarını biraz belirginleştirip onlara sabit birer genişlik değeri atayalım: #anakutu p { width: 280 px; border: 10 px solid #685 a 4 b; padding: 5 px; }

Float Eden Öğeleri Temizlemek (Clear Özelliği)

Float Eden Öğeleri Temizlemek (Clear Özelliği) Şimdi anakutunun içinde yer alan 6 adet paragrafın hatlarını biraz belirginleştirip onlara sabit birer genişlik değeri atayalım: #anakutu p { width: 280 px; border: 5 px solid #685 a 4 b; padding: 5 px; float: left; margin-right: 10 px; }

Float Eden Öğeleri Temizlemek (Clear Özelliği)

Float Eden Öğeleri Temizlemek (Clear Özelliği) Artık kurtarıcıyı yerleştirebilir, anakutunun yüksekliğini kurtarabiliriz: . kurtarici { clear: both; height: 0 px; font-size: 0 px; visibility: hidden; width: 100%; }

Float Eden Öğeleri Temizlemek (Clear Özelliği) </p><!—float eden son paragraf --> <div class=”kurtarici”> </div>  </body> </html>

Float Eden Öğeleri Temizlemek (Clear Özelliği)