CSS’e başlamak
Cascading Style Sheets (CSS) HTML ‘deki bazı problemleri halletmek için ama asıl neden olarak da; web sayfası içeriği ve web sayfası görünümünü birbirinden ayırmak için oluşturulan bir standarttır.
CSS 1996′da W3C tarafından duyuruldu. Son olarak CSS2.1 versiyonu işler durumdadır. CSS3.0′da çalışmaları devam etmektedir. CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work adresinden ulaşabilirsiniz.
CSS kullanımının bir çok bakından avantajları bulunmaktadır. Belli başlı avantajlarını sıralarsak:
Görünüm Avantajları
CSS HTML’e göre bir çok stil özelliğine sahiptir. CSS’in sayfa içeriği öğelerinin sayfa görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan anlaşılmış olur.
<h1>CSS'e Giriş</h1>
HTML’de bu elementi(h1) kalın,altı çizili, ardalanı kırmızı olarak atama gibi çeşitli stiller verbiliriz ancak bunlar içinde ayrı HTML elementleri kullanmak zorundayız (örn:strong, gibi), ancak CSS de bunu tek bir elementle yapabiliriz ve ayrıca daha fazla stil özellikleride atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)
h1 {
color: white;
font: italic 11px Arial, serif;
text-decoration: underline;
background: yellow url(titlebg.gif) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;
}
Kullanım Kolaylığı
HTML’de her elmente artı özellikler eklemek için başka bir element ve özellik eklmemiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptımızı düşünütseniz çok büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.
<h1><font color="blue">Başlık</font></h1>
Bunun gibi onlarca veya yüzlerce başlığınız olduğunu düşünün, gerçekten çok zor. CSS’de aynı işlem için
h1 {color: blue;}
hatta daha sonra bu elementin özelliklerinde değişiklik yapmamızda kolay olacaktır. Hatta bu işlemi sadece bu etiket için değil diğer etiketlerede uygulayabiliriz.
h1, h2 {color: blue;}
Ayrıca tek bir CSS dosyası ile sitenin tamamının yönetmekte web kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada değişlik yaparak tüm sitemizi yönetebiliriz isterse yüzlerce sayfa olsun.
Tasarım Tutarlılığı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre %50′ye varan performans ve hız artışları olacaktır.
Gelecek Vaadediyor
HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML’in işlevselliğini artıracağı düşünülürse, CSS gibi tümleşik bir stadardın önemi daha çok anlaşılıyor.
XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.) uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak bizlere gelecek vaadediyor.
notlarınız yeterli içerikte ve gayet anlaşılabilir. css dersleri bölümündeki notları; bir kitap haline getirmeyi düşündünüz mü hiç? Bu sayede hem daha fazla kişiye ulaşmış olursunuz hem de sizin de emeğinizin bir miktar karşılığı olmuş olur. benim de aklıma bu geldi durup dururken :)
resim üzerine yazı yazmak isterseniz ya bir resim editörü ile yazarsınız yada resmi zemine(background) koyup üzerine yazı yazarsınız.
merhaba.css hakkinda fazla bilgim yok ve bir siteden satin aldigim sablon uzerinde problem yasiyorum.Ufak bir sorum olacak.Aldigim sablonu dreamweaver da aciyorum ancak herhangi biryere text eklemek istedigimde (ornegin bir resmin uzerine) normal bir sekilde insert>text vs gibi birsey yapamiyorum ve de css den dolayi olan cerceveler sabit bir sekilde duruyor boyutlarini kucultup buyutemiyorum.Saniyorumki bunun cok kolay bi yolu vardir kisaca yardim ederseniz sevinirim.
CSS olayına yeni giriyorum bu sitede yararlı kaynaklar bulabileceğime inanıyorum inş bulurum ;)
css tasarım için çok faydalı ancak biraz acemiyim malesef. derslerinizin devamını bekliyoruz
Selamlar ben css yi duydum ve bir araştırma yapayım dedim ve sitenizi buldum çok faydalı bir konuya değinmişsiniz bu konuda henüz türkçe kaynak çok az heralde sizin bu siteyi hazırlamanız yerinde olmuş inşallah css yi sizin sitenizdeki derslerden öğreneceğim teşekkürlerimi sunarım.
.kutu1,.kutu2{width:150px;}
:)
2 tane genişliği 150px olan kutun var diyelim şöyle yapacaksın
.kutu1,.kutu2{150px;}
ilk sorun için
http://www.fatihhayrioglu.com/?p=91
makalesindeki 4. yöntemi kullanmanı öneririm.
virgül ile ayırma işlemi farklı sınıf veya id’ye aynı özellikleri atamak istediğimizde kullanıyoruz.
.deneme, h1{
color:#f00;
}
deneme sınıfını kullanan ve h1 aynı renkde olacak
Css’i biliyorum ve yaptığım sayfalarda hep kullanıyorum fakat artık herşeyiyle öğrenmek ve bilinçli olarak kullanmak istiyorum.Bu anlamda hazırladığınız döküman ilk adım için çok çok işime yarayacak düşüncesindeyim.
Ben şunu öğrenmek istiyorum;çok sayfalı ve içeriği çok fazla olan siteler hazırlıyorum.Her sayfa için farklı css dökümanları oluşturuyorum çünkü diğer sayfalarda kullanılmayan csslerin dökümanda kalabalık etmesini istemiyorum.Bu ne kadar doğru bilmiyorum dediğim gibi tam olarak bilinçli kullanıyo sayılmam.
Ve sayfanızda da okudum ama şunu tam anlayamadım;ben class oluşturduğumda örn: .title{font:Tahoma 11px,color:red;} gibi kullanıyorum hep ama h1,h2 yada mesela bi sitede;
.geneltable tr.uzatilmisalan td {
border: none;
padding-top: 0;
padding-bottom: 0;
}
şeklindeki kullanımları yani aralara virgül koyup yeni özellik atama olayını anlayamadım tam.
Biraz daha açıklayabilirseniz örneklerle benim gibi anlamayanlara da ışık olacaksınız. Emeğinize ve paylaşımlarınıza en içten teşekkürlerimi sunarım!