ݺߣ

ݺߣShare a Scribd company logo

Css uygulamaları

•Download as PPTX, PDF•
•
Hilal Seda Yıldız
Hilal Seda Yıldız
1 of 14
Download to read offline
Four Equalizing Divisions within Two Columns Hilal Seda Yıldız BÖTE-4 Eskişehir Osmangazi Üniversitesi hilalyildiz.com
HTML Dosyasını Oluşturma-1 Bu kısımda, HTML dökümanımızın dil kodlamasını utf-8, Başlığını ‘Four Equalizing Divisions within Two Columns’ olarak belirledik.
HTML Dosyasını Oluşturma-2 Bu kısımda, <body> etiketini açarak sayfanın görünen kısmını kodlamaya başladık. <div> etiketiyle sayfayı anlamsal bölümlere ayırdık, class lara daha sonra stil dosyamızda kullanacağımız isimler verdik.
HTML Dosyasını Oluşturma-3 Bu kısımda da bir önceki aşamada yaptığımız işlemlerin devamını gerçekleştirdik.
HTML Dosyasını Oluşturma Önceki üç aşamadan sonra html dökümanımızı fed.html olarak kaydedip tarayıcıdaki çıktısının yandaki gibi olduğunu görebilirsiniz
CSS Dosyasını Oluşturma-1 Halihazırdaki sayfamızın, yandaki gibi görünmesini sağlamak istersek neler yapmamız gerekir?  Öncelikle bunun için bir style dosyası oluşturmamız gerekiyor.  Oluşturduğumuz style dosyasını stylefed.css kaydedelim  fed.html dosyamızın <head></head> kısmına aşağıdaki gibi bir ekleme yapalım. Bu ekleme bizim sayfamızı şekillendireceğimiz stil dosyamızı html sayfamıza çağırmamızı sağlayacak.
CSS Dosyasını Oluşturma-1 1. Satırda sayfanın genel iç ve dış boşlukları belirlenmiştir. 2. Satırdan itibaren body kısmının özellikleri belirlenmiştir. 7. Satırda sayfanın sağında scroolbarı pasif bir şekilde gösterilmesi sağlanmıştır Şekilde kullanılan etiketler: margin: Dış boşlık padding: Kenarların iç boşluğu owerflow-y: dikey düzlemde oluşacak taşmalar scroll: kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar
CSS Dosyasını Oluşturma-2 fed.html dosyamızda govde olarak belirlediğimiz class ve alt classları, stylefed.css dosyamızın bu kısmında şekillendirdik. Background’u açık mavi yaptık Şekilde kullanılan etiketler: border: Kenarlık position:relative: Göreceli konumlandırma yani diğer nesnelere bağlı olarak bu nesnenin konumunun değişebilmesi
CSS Dosyasını Oluşturma-2.1: Kod çıktısı
CSS Dosyasını Oluşturma-3 Yukarıdaki kodları yazdığımızda ise, tablomuzun genel görünümünü tamamlamış oluyoruz. Şekilde kullanılan özellikler: float:left: sütunu sola yerleştirir z-index:1: sütunu üst katmana taşır
CSS Dosyasını Oluşturma-3.1: Kod çıktısı
CSS Dosyasını Oluşturma-4 Bu kısımda ise fed.html dosyasında genislet olarak tanımladığımız class’ın fiziksel özelliklerini beliriyoruz.
CSS Dosyasını Oluşturma-5:Son Ekran
CSS’den önce  CSS’den sonra

More Related Content

Css uygulamaları

  • 1. Four Equalizing Divisions within Two Columns Hilal Seda Yıldız BÖTE-4 Eskişehir Osmangazi Üniversitesi hilalyildiz.com
  • 2. HTML Dosyasını Oluşturma-1 Bu kısımda, HTML dökümanımızın dil kodlamasını utf-8, Başlığını ‘Four Equalizing Divisions within Two Columns’ olarak belirledik.
  • 3. HTML Dosyasını Oluşturma-2 Bu kısımda, <body> etiketini açarak sayfanın görünen kısmını kodlamaya başladık. <div> etiketiyle sayfayı anlamsal bölümlere ayırdık, class lara daha sonra stil dosyamızda kullanacağımız isimler verdik.
  • 4. HTML Dosyasını Oluşturma-3 Bu kısımda da bir önceki aşamada yaptığımız işlemlerin devamını gerçekleştirdik.
  • 5. HTML Dosyasını Oluşturma Önceki üç aşamadan sonra html dökümanımızı fed.html olarak kaydedip tarayıcıdaki çıktısının yandaki gibi olduğunu görebilirsiniz
  • 6. CSS Dosyasını Oluşturma-1 Halihazırdaki sayfamızın, yandaki gibi görünmesini sağlamak istersek neler yapmamız gerekir?  Öncelikle bunun için bir style dosyası oluşturmamız gerekiyor.  Oluşturduğumuz style dosyasını stylefed.css kaydedelim  fed.html dosyamızın <head></head> kısmına aşağıdaki gibi bir ekleme yapalım. Bu ekleme bizim sayfamızı şekillendireceğimiz stil dosyamızı html sayfamıza çağırmamızı sağlayacak.
  • 7. CSS Dosyasını Oluşturma-1 1. Satırda sayfanın genel iç ve dış boşlukları belirlenmiştir. 2. Satırdan itibaren body kısmının özellikleri belirlenmiştir. 7. Satırda sayfanın sağında scroolbarı pasif bir şekilde gösterilmesi sağlanmıştır Şekilde kullanılan etiketler: margin: Dış boşlık padding: Kenarların iç boşluğu owerflow-y: dikey düzlemde oluşacak taşmalar scroll: kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar
  • 8. CSS Dosyasını Oluşturma-2 fed.html dosyamızda govde olarak belirlediğimiz class ve alt classları, stylefed.css dosyamızın bu kısmında şekillendirdik. Background’u açık mavi yaptık Şekilde kullanılan etiketler: border: Kenarlık position:relative: Göreceli konumlandırma yani diğer nesnelere bağlı olarak bu nesnenin konumunun değişebilmesi
  • 10. CSS Dosyasını Oluşturma-3 Yukarıdaki kodları yazdığımızda ise, tablomuzun genel görünümünü tamamlamış oluyoruz. Şekilde kullanılan özellikler: float:left: sütunu sola yerleştirir z-index:1: sütunu üst katmana taşır
  • 12. CSS Dosyasını Oluşturma-4 Bu kısımda ise fed.html dosyasında genislet olarak tanımladığımız class’ın fiziksel özelliklerini beliriyoruz.