Web Tasarım Dersleri CSS

Web Tasarım Dersleri CSS, CSS, CSS Nedir, CSS kodları, css kodlama, css tasarım, css tasarım kodları, html web tasarım css, html5 web tasarım css, css öğrenmek istiyorum, html5 css öğren, html css öğren, XHTML CSS, Css işlemleri, Css kodları oluşturma, css kodu yazma gibi sorgular yazarak web tasarımını merak eden, web tasarımına yeni başlayan değerli ziyaretçimiz web sitemize hoş geldiniz, çıktığınız bu yolda başarılar diler css konusuyla ilgili bilgi paylaşımımızı yapmaya başlamak isteriz.

CSS, Cascading Style Sheets – Basamaklı Stil Sayfaları), web sayfalarını biçimlendirmemizi sağlayan en harika teknolojidir css.

Web Tasarım Dersleri CSS

Web Tasarım Dersleri CSS

Harikadır çünkü, sayfa yapısı ile sayfa tasarımını birbirinden ayırmamızı sağlar. Yani sayfamızın yapısını XHTML ile, tasarımını ise CSS ile oluştururuz. Bunun en önemli faydası her sayfa için ya da sayfadaki her öğe için tekrar tekrar tasarım yapmak yerine tasarımı bir kez CSS ile yapıp istediğimiz tüm sayfalara uygulamaktadır. Onlarca sayfadan oluşan bir siteniz olduğunda her sayfa için tasarım yapmanın ne kadar zahmetli olacağını tahmin edersiniz. İşte CSS bize bu noktada çok büyük kolaylık sağlayarak zamandan ve emekten çok ciddi oranda tasarruf yapmamıza imkan vermektedir.

Bu noktaya gelmişken size, buraya kadar anlattıklarımı göstermek istiyorum. Aşağıdaki ilk resimde yayınevimizin sitesinin normal, yani tasarımlı halini; ikinci resimde örnek sitemizin normal, yani tasarımlı halini ikinci resimde ise CSS dosyasının devre dışı olduğu durumu görmektesiniz.

Web Tasarım Dersleri CSS

Web Tasarım Dersleri CSS

Gerçekten bu oldukça ilginç değil mi bu resimlerden css in işin ne kadar önemli bir kısmını üstünde aldığını görmektesiniz. Css işin önemli bir kısmını üstlenince haliyle çok daha sade ve hızlı XHTML sayfaları elde etmiş oluyoruz.

Bu iki resmi gördükten sonra sanırım biraz önce okuduğumuz XHTML bölümündeki sade suya tirit durumlarının sebebi hitmenini daha iyi kavramış olduk. Bu arada unutmadan CSS bölümümüzde yapacağımız uygulamaların da videolarını paylaşacağım.

CSS’i Belgelere Ekleme

CSS’i XHTML belgelerimize eklemek için kullanabileceğimiz 4 yöntem mevcuttur. Bu aşamada detaya girmeden sadece bu dört yöntemi tanımlayalım.

İlk yöntem doğrudan doğruya XHTML etiketi ile beraber (In-line ) kullanılmaktadır.

Kullanımı

<div style=”color:blue”> CSS seni de öğreneceğim </div> şeklindedir.

Bu yöntem çok  kullanışlı değildir. Çünkü tüm etiketlere bu şekilde uygulamaya kalkmak çok zahmetli olacağından CSS kullanmamızın esprisini de yarı yarıya azaltmış olacaktır. Fakat benim ifade etmek istediğim aslında bu yöntemi yaygın olarak kullanmayacağımızdır.

İkinci yöntemimiz uygulanacak stili belgemizin <head > </head> kısmında bir kez tanımlayarak belgemizin istediğimiz her yerinde kullanmaktır.

Kullanımı

<head>

<style type=”text/css”>

div {color:blue;}

</style>

</head>

Bu yöntem ile hem CSS i XHTML etiketlerinden ayırmış olduk hem de aynı stili kullanmamız gereekn tüm etiketler için ayrı ayrı yazmaktanda kurtulmuş olduk.

3. yöntem harci bir CSS dosyası eklemetir. Bu yöntemde CSS komutlarını ayrı bir .css uzantılı dosyaya kadederiz. Sonra da sayfamıza bu harici CSS dosyasının yolunu gösteririz. Bu yol gösterme işini gene belgemizin <head> </head> etiketleri arasında yaparız.

Web Tasarım Dersleri CSS Kullanımı 

harici css dosyasıs mesela ilk_deneme.css

p {color:red;}

a {color:blue;}

XHTML dosyamız

<head>

<link rel=”stylesheet” type=”text/css” href=” ilk_deneme.css” />

</head>

bu yöntem CSS’in farkını esas fark ettiren yönemdir. Çünkü stiller harici bir dosyadadır ve bu dosyayı bir çok sayfada kullanabiliriz. Dolayısıyla CSS dosyası bir kez yüklendikten sonra sitemizdeki diğer sayfalarda da kullanılacağından bu durum sitemize hız da kazandıracaktır. Üstelik bir değişiklik gerektiğinde belgemize hiç dokunmadan CSS dosyasından stil özelliklerini değiştirebiliriz.

Dördüncü ve son yöntemimiz @import ile eklemektir.

Kullanımı

<head>

<style type=”text/css”>

@import “ornek.css”;

</style>

</head>

Kullanım mantığı üçüncü yöntemle aynıdır. @import ile ekleme yaptığınızda eski web tarayıcıları harici css dosyasını görüntüleyemezler.

Yöntemleri tek tek saydıktan sonra en avantajlısı ve en kapsamlısı olması sebebiyle üçüncü yöntemin kullanımını tavsiye ediyoruz.

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

 

Web Tasarım Dersleri CSS
Bu yazıya oy ver

By | 2017-09-14T10:55:49+00:00 Kasım 28th, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|Tags: , , , , , |0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL