Magic-net | Css hakkında herşey

CSS Nedir ?

CSS'nin İngilizce açılımı 'Cascading Style Sheets'dir, yani Türkçe olarak 'Çağlayan Stil Tabakası' gibi bir anlama geliyor. Peki CSS ile neler yapabiliyoruz? Bize faydaları nelerdir? Ve CSS'yi sayfa içinde ne şekillerde kullanabiliriz? Bu yazımızda bunlardan bahsedeceğim.


CSS ile Neler Yapılıyor?

CSS kullanarak HTML ile yapamayacağımız birçok şeyi yapabiliriz. Bir sayfadaki tüm öğeleri veya belli bir kısım öğeyi renk, boyut, arkaplan resmi, sayfadaki konumu, sağından solundan olan boşlukları ve daha birçok özelliği yönünden CSS ile tanımlayabiliriz. Bir CSS dosyasıyla bütün sayfalarınızın stilini oluşturabileceğiniz için sayfalarınızın boyutu küçülür, yükü hafifler. CSS ayrıca öğrenmesi en kolay dillerden birisidir.Kısaca hem kolay hem kullanışlı olan bir dil olan css günümüzün en büyük site yapım trenddidir


DEVAMI EN KISA SÜREDE GELECEK
______________
Projelerinizi Destekliyoruz.Maddi Kaynak Sağlıyoruz : http://magic-net.tr.gg/Bu-Benim-Projem.htm
T-Shirt Tasarımlarımızı Görmek İster Misin http://magic-net.tr.gg/T_shirt.htm
Zor Başarılır İmkansız Zaman Alır

CSS öğrenmek için gerekli olacak ön bilgiler

CSS öğrenmek için gereken en önemli bilgi Temel HTML bilgisidir. HTML bilmeden CSS kodlarını kullanmanız çok zor olacaktır. Bu anlatacağım konu CSS olduğu için HTML bildiğinizi varsayıyorum. HTML öğrenmeden CSS'ye başlamamanızı tavsiye ederim.Eğer başlarsanız çok büyük sıkıntılar çekebilir,kodları anlamayabilirsiniz. CSS öğrenmek için diğer gerekli bilgi ise İngilizce'dir. Tabi ki ingilizceyi su gibi bilmek değil bu sadece CSS kodları içinde geçen kelimeler İngilizce'dir ve bu kelimelerin büyük bir çoğunluğunun ifade ettiği şey Türkçe karşılığı olan kelimeyle alakalıdır. Yine de ezberiniz iyiyse İngilizce bilmeniz de şart değil.Ama kısa bir not: css için bile olsa ingilizce öğrenin

Bir CSS Kuralı Hangi Parçalardan Oluşur?

CSS kuralları 3 parçadan oluşur. Her CSS kuralı bir seçici ve bir tanımlama bölümüne sahiptir. Tanımlama bölümü bir özellik ve bir değerden meydana gelir. Yani bir CSS kuralı şu şekilde oluşturulur; seçici {özellik:değer} Bir CSS kuralında seçici olarak bir html ögesinin ismi(Örneğin; a, p, span, div, body), kimliği(id'si) veya sınıfı(class'ı) kullanılabilir. Bu anlatımdaki örneklerde seçici olarak HTML ögelerinin isimleri kullanılmıştır. CSS kurallarında özellik olarak ise sadece belirli maddeleri kullanabiliyoruz.(Belirli dediğim yaklaşık 120 tane kadar) değer olarak ise her özelliğin alabileceği kendi değerleri var, bunları kullanabiliyoruz. Örnek olarak a{font-size:12pt} ve span{font-size:10px; font-color:blue;} verilebilir. Tanımlama bölümünde birden fazla özellik giriliyorsa aralarına noktalı virgül konulur. Sadece tek değer giriliyorsa konulmayabilir ancak değerin sonuna eklemenin de bir sakıncası yoktur. Ayrıca aynı değerleri vereceğimiz iki seçiciyi aralarına virgül koyarak tek seferde tanımlayabiliriz de; a, span, p {font-size:12pt; font-color:blue;} gibi...
______________
Projelerinizi Destekliyoruz.Maddi Kaynak Sağlıyoruz : http://magic-net.tr.gg/Bu-Benim-Projem.htm
T-Shirt Tasarımlarımızı Görmek İster Misin http://magic-net.tr.gg/T_shirt.htm
Zor Başarılır İmkansız Zaman Alır

paylaşım için teşekkürler....
______________

______________
Projelerinizi Destekliyoruz.Maddi Kaynak Sağlıyoruz : http://magic-net.tr.gg/Bu-Benim-Projem.htm
T-Shirt Tasarımlarımızı Görmek İster Misin http://magic-net.tr.gg/T_shirt.htm
Zor Başarılır İmkansız Zaman Alır

CSS'yi Sayfa İçine Yerleştirme Metotları

A)HTML Ögesi İçine Yerleştirmek; Şurada bir html kodumuz olsun: mesela link kodu ekleyelim bir tane; Linkimizin Adı Bu şekilde eklenen bir link sayfamızda varsayılan link özelliğiyle, yani mavi renkte ve altı çizili olarak görünecektir. HTML içine yerleştireceğimiz style tagının içine ekleyeceğimiz CSS kurallarıyla bu linkimize farklı özellikler kazandırabiliriz. Örnek olarak kodumuz: Linkimizin Adı Bu şekilde yazılmış bir kodda style="" içindeki CSS kuralları linkin özelliğini belirler. color:red; -> linkin renginin kırmızı olmasını, background:blue; -> Linkin arkaplanının mavi olmasını, font:10pt Comic Sans MS; -> Linkin 10pt yazı boyutuyla ve Comic Sans MS fontuyla yazılmasını ifade ediyor. Bu linkin görünümü aşağıdaki gibi olacaktır; Linkimizin Adı Bu şekilde HTML tagları içine entegre edilmiş CSS kuralları sadece içine eklendiği HTML nesnesini etkiler
______________
Projelerinizi Destekliyoruz.Maddi Kaynak Sağlıyoruz : http://magic-net.tr.gg/Bu-Benim-Projem.htm
T-Shirt Tasarımlarımızı Görmek İster Misin http://magic-net.tr.gg/T_shirt.htm
Zor Başarılır İmkansız Zaman Alır

B) Sayfa İçerisine Yerleştirmek; Sayfanızın içerisine ekleyeceğimiz birkaç CSS kuralı ile o sayfadaki bütün HTML ögelerini etkileyebiliriz. Sayfa içerisine ekleyeceğimiz CSS kuralları, genellikle tagından sonra tagları arasına yazılır. Örnek olarak aşağıda basit bir sayfanın CSS kodlarını verdim.
______________
Projelerinizi Destekliyoruz.Maddi Kaynak Sağlıyoruz : http://magic-net.tr.gg/Bu-Benim-Projem.htm
T-Shirt Tasarımlarımızı Görmek İster Misin http://magic-net.tr.gg/T_shirt.htm
Zor Başarılır İmkansız Zaman Alır

C) Bir CSS Dosyasından Sayfamıza Çağırmak; CSS dosyası, uzantısı .css olan dosyadır. Amacı çağrıldığı bütün sayfaların CSS kurallarını taşımaktır. Sayfa içine yerleştirilen CSS kodlarından tek farkı sadece bir sayfaya değil, çağrıldığı bütün sayfalara etki etmesidir. Bir CSS dosyasının içerisinde sadece CSS kuralları bulunur. Örneğin bir CSS dosyasının içeriği; a{font-color: blue; margin: 5px;} p{font:12px;} div{width:100px; height;100%;} gibi olabilir. CSS dosyası oluşturmak için içine yerleştireceğiniz bütün CSS kurallarını bir not defterine yazıp uzantısını .css olacak şekilde kaydetmeniz yeterlidir. Tamam, CSS dosyamızı oluşturduk. Peki bu dosyayı nasıl istediğimiz HTML sayfalarına ekleyeceğiz? Onu da HTML sayfamızdaki tagından sonra ekleyeceğimiz koduyla başaracağız. Bu kod; kodudur. Kodu kendinize göre düzenleyip HTML sayfanıza eklediğinizde CSS dosyanızdaki kurallar sayfanıza etki etmeye başlayacaktır.



HTML Kodlarındaki Sınıf(class) ve Kimlik(id)

HTML kodlarındaki sınıflar ve kimlikler CSS kodları için çok güzel seçici'lerdir. Tabi seçicileri HTML içine entegre CSS kurallarında kullanamıyorduk. Bu nedenle seçicileri .css dosyamızda veya sayfa içindeki CSS kodları arasında kullanıyoruz. Neyse. Bir HTML kodu yazayım da başlayalım; -Bu kodda class="ali1" sınıfını seçici olarak kullanmak istersek, CSS kurallarını yazdığımız bölüme kuralımızı şu şekilde yazacağız; .ali1 {width:100px; height:100px;} Görüldüğü gibi sınıflar(class) seçici olarak kullanılırken başına nokta alıyor. -Eğer üstteki HTML kodundaki id="veli2" kimliğini seçici olarak kullanmak istersek, CSS kuralını şu şekilde oluşturacağız; #veli2 {width:100px; height:100px;} Görüldüğü gibi kimlikler(id) seçici olarak kullanılırken başına kare(#) alıyor. Eğer aynı id ve class'ları başka HTML ögelerine de verirseniz, bu CSS kuralları onları da etkiler. Örneğin veli2 id'sini bir resime(img) de ekleseniz bir bir div'e bir linke(a) de ekleseniz CSS kuralı çalışır. Ama kuralın seçicisini a veya img gibi herhangi bir HTML tagıyla kısıtlarsanız, yani şunun gibi bir biçimde yazarsanız; img.ali1 {width:100px; height:100px;} Seçiciyi bu şekilde kısıtlarsak, CSS kuralımız sadece sınıfı(class) ali1 olan resimleri(img) etkileyecektir. Kural seçicisindeki img yerine a yazarsak da sadece sınıfı(class) ali1 olan linkleri(a) etkileyecektir.


-> KISA NOTUMUZ; Bir kuralın yazılışında kelimeler arası boşlukların hiçbir anlamı yoktur. Örneğin; a{color:black; font:12pt;} kuralı ile a { color: black; font: 12pt; } kuralı arasında hiçbir fark yoktur.

______________
Projelerinizi Destekliyoruz.Maddi Kaynak Sağlıyoruz : http://magic-net.tr.gg/Bu-Benim-Projem.htm
T-Shirt Tasarımlarımızı Görmek İster Misin http://magic-net.tr.gg/T_shirt.htm
Zor Başarılır İmkansız Zaman Alır

paylaşımlarınız güzel olmuş, teşekkürler..
______________

PAYLAŞIM İÇİN TEŞEKKÜRLER
İYİ GÜNLER

S.a

Güzel Site Olmuş Emege Saglık
______________

Devamı Geliyo Bakam

paylaşım için teşekkürler

PAYLAŞIM İÇİN TEŞEKÜRLER

____________________

http://fikra-sel.tr.gg

______________

Sitenizde Başarılar Dilerim
______________

Siteme Girerseniz Konularımdan Birni Okumanızı Tavsiye Ederim