CSS

internet sayfası nasıl açılır

internet sayfası yapmak için öncelikle html ce css bilmeniz gerekir. bu bölümde internet sayfası temellerine değineceğiz','İNTERNET SAYFASI NEDİR, NASIL AÇILIRinternet sayfası açabilmek için iki farklı ihtiyacınız var.Site ismiSitenin dosyalarını koyacak yerAslında bu iki seçenek birbirinden farklı olmasına rağmen birçok firma ikisini aynı anda satmaktadır.Bu dersimizde örnek olarak Hostgator isimli yabancı bir firmanın kullanımını gösterdim. ingilizce olması size biraz sıkıcı gelebilir ama hizmet kalitesi açısından memnun kaldığım için tavsiye ediyorum. denemek isterseniz ana sayfasındaki ... Devamı

Dreamweaver CS4 ile web sayfası yapmak

Bu dersimizde dreamweaver cs4 kullanacağız. sebebi ise: daha önceki sürümlerde html1.0 mantığına göre çalışıp sizi yanlış yönlendirirken güncel sürüm html 4.0 standardına göre çalışıyor ve hata yapma oranı çok düşüyor.

 

Şimdi yeni başlayanlar için temel noktalara bakalım:

1- Dil ayarı: Öncelikle Dil ayarını yaparsanız açtığınız dosyaları UTF-8 yapmasını engellersiniz.

Edit -preferences kısmını açın ve aşağıdaki iki yeri değişin.

Aşağıdaki ayar yeni dosyalarınızın di... Devamı

Css Nedir

CSS (Cascading Style Sheets)

Css internet sayfalarının görünümünü değiştiren bir tanım dosyasıdır. CSS kendine has kuralları olan bir tanım dilidir denilebilir. CSS Sayfa içersindeki her bir elemana ait farklı özellik atamayı sağlar

Css Özellikleri:

Html sayfasındaki nesnelerin görüntüsünü belirler Html 4.0 sürümü ile stil dosyaları geliştirilmiştir CSS ayrı bir dosyada *.css uzantısı ile saklanabilir. Bu işlem sayfanın daha hızlı açılmasını sağlar Elemanlar üzerinde style="" parametresi ile özel kısa tanımlar yapılabilir

 

HTML ilk üretildiğinde yazı rengi ve bo... Devamı

Basit Css örneği

Aşağıda çok basit bir Html sayfası ve buna uygun CSS örneğini görüyorsunuz. Temel seviye olduğu için CSS dosyası ayrı bir sayfada tutulmak yerine aynı dosyanın başlık kısmında <style></style> tagları arasında tanımlanmıştır.

CSS stilleri yazılırken şu kurala göre yazılır:

eleman-tanımlayıcı { özellik:değeri ; }

 

Aşağıdaki Css örneği başlık yazısının rengini kırmızı yapar:

h1{ color:red}

Bu örneğe uygun bir html sayfası aşağıda gösterilmiştir. Bu kodları Not defterine yapıştırıp farklı kaydet seçeneği ile HTML uzantısı ile kaydedin.

... Devamı

Css kullanım şekilleri

CSS TANIMLAMA

Css tanımlamarı kullanılırken iki farklı şekilde yazılabilir. Bunladan birincisi saydadaki her elemanı kapsayan tag yazımıdır:

Sayfadaki Tag adları kullanarak Css yazılabilir

Aşağıdaki gibi bir tanım yapıldığında sayfadaki tüm linklerin rengi değişir.

a{color:blur}

Css için isim vererek özel tanımlamalar yapılabilir:

Bu tip Css tanımlamada nokta ile başlayan isimler kullanılır böylece sayfadaki tüm linklerin rengini bozmak yerine istenen birkaç elemanın rengi değiştirilebilir.

 

.renklilink{ color:yellow}

sayfa içersinde... Devamı

Css Relative ve Absolute ilişkisi

Css kullanarak cisimlerin hizalamasını yaparken düşülen hatalarda nbiri absolute ve relative ilişkisidir.','Css öğrenmeye yeni başlayanlar için bilinmesi gereken önemli konulardan biri iç içe iki cismin hizalanması olayıdır.Örnek: sayfamızda bir çerçeve var diyelim. bu çerçeve içine menü yerleştirmek istiyoruz ama menünün sağa dayalı olmasını istiyoruz. float yapabilirsiniz ama float havada kaldığı için genel yapıya terslik yapar. float yapmadan bunu elde etmenin yolu.Css dosyası:.cerceve{ position:relative}.menu{position:absolute;right:0}html ise şöyle olacaktır:<div class=\"cerceve\"&g... Devamı

Css ile sayfayı ortalamak

DIV ortalamak

Tablo kullanmadan Css ile herhangi bir div bölümünü ortalamak istiyorsanız. margin kullanabilirsiniz.

 

.ortala{margin:0 auto}

html ise şöyle olur:

<div class="ortala"></div>

 

Yazıyı ortalamak

Yazıyı ortalamak için ise text-align kullanabilirsiniz:

 

.menu{ text-align:center}

Yazıyı bulunduğu yerde düşey olarak ortalamak için ise aşağıdaki gibi lin height kullanıyoruz: örneğin yazı 30px yüksekliğinde bir çerçeve içinde ise, yazı alanı da 30px yapıldığında yazı ortalanır.

 

.menu{line-height:... Devamı