TÜM CSS KODLARI VE ANLAMLARI

TÜM CSS KODLARI VE ANLAMLARI

Bu yazımızda Css kodları nelerdir? Css3 ile gelen yeni Css özellikleri nelerdir? Bu Css kodları ne işe yarar? sorularının cevaplarını detaylı bir şekilde öğreneceğiz. 

Tüm Css kodlarını gruplayarak listeledim. Gruplamış olduğum her tabloda Css kodlarının ne işe yaradığını anlatmaya çalıştım. Eğer o Css kodları ile ilgili daha detaylı yazmış olduğum bir yazım bulunuyorsa, tablonun altında o yazılara link verdim. Açıklamaların yeterli olmadığını düşündüğünüz yerlerde daha detaylı anlatımlar için link verdiğim yazılarımı okuyabilirsiniz.,

FONTLAR İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

@font-faceFont face özelliği, bilgisayarımızda hazır olarak gelen yazı tiplerinin ( Arial, Verdana vb..) dışında istediğimiz yazı tiplerini kullanmamıza olanak sağlar.
fontDiğer font özelliklerini tek Css özelliği (font) ile tanımlamamızı sağlar.
font-familyYazıların tipini yani hangi font ailesinden olmasını istiyorsak onu belirtmek için kullanılır. Değer olarak sadece bir yazı tipi verebildiğimiz gibi birden fazla değerde verebiliriz. Çünkü verdiğimiz ilk değeri tarayıcı desteklemiyorsa bir sonraki verdiğimiz değeri uygulayacaktır.
font-sizeBu özellik ile yazı boyutlarını ayarlayabiliyoruz. Yazı boyutuna px veya em türünden değerler veriyoruz. Tarayıcılar varsayılan olarak yazı boyutunu 16px uygularlar.
font-styleYazıları italik yapmak için kullanılır. font-style özelliğine şu değerleri verebiliriz:italicnormaloblique : İtalic değerine çok benzer ama daha az tarayıcı tarafından desteklenir.
font-variantYazılarda küçük harfleri büyük harflere çevirmek için kullanılır. Burada şuna dikkat etmemiz gerekiyor. Eğer yazıda hepsi küçük harf ise dönüştürdüğümüzde hepsi aynı boyutta büyük harfe dönüşecektir. Eğer yazıda hem büyük hem küçük harfler varsa, dönüştürdüğümüzde yine hepsi büyük harf olacaktır ama önceden zaten büyük harf olanlar yeni dönüştürülenlerden biraz daha büyük olacaktır.font-variant özelliğine şu değerleri verebiliriz:small-caps : Küçük harfleri büyük harflere dönüştürür.normal
font-weightBu özellik ile yazıların kalınlık incelik durumlarını ayarlayabiliriz. font-weight özelliğine şu değerleri verebiliyoruz:boldbolderlighternormal100’den 900’e kadar 100’ün katları olacak şekildede verilebilir. 900 en kalını iken, 100’e doğru incelir ve 100’de en ince halini alır.  

YAZILARA STİL VERMEK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

colorBu özellik ile yazılara istediğimiz renkleri verebiliriz. Dilerseniz direk renk adını verebileceğiniz gibi renklerin rgb ve hex kodlarınıda kullanabilirsiniz.
letter-spacingYazıların karakterleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır. Negatif değerler verdiğimizde aradaki boşluklar azalır.
line-heightSatır yüksekliğini belirlemek için kullanılır.
word-breakSatır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölmek için kullanılır. word-break özelliğine şu değerleri verebiliriz:keep-all : Varsayılan olarak gelen değer.Satır sonundaki kelimeler bölünmez.break-word : Satır sonundaki sığmayan kelimeler bölünür.
word-spacingYazıların kelimeleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır. Negatif değerler verdiğimizde aradaki boşluklar azalır.
white-spaceYazılardaki boşlukların nasıl değerlendirileceğini belirlemek için kullanılır. white-space özelliğine şu değerleri verebiliriz:normalnowrapprepre-linepre-wrap
word-wrapBulunduğu alana sığmayacak kadar uzun olan kelimeleri satır sonundan bölmek için kullanılır. word-wrap özelliğine şu değerleri verebiliriz:normal : Varsayılan olarak gelen değer.break-word : Sığmayan kelimeyi böler.
writing-modeYatay şekilde olan yazıları dikey hale getirmek için kullanılır. writing-mode özelliğine şu değerleri verebiliriz:horizontal-tb : Yazı yatay halde olur.vertical-lr : Yazı dikey halde olur.vertical-rl : Yazı dikey halde olur.
text-transformYazılarda küçük harfleri büyük harfe, büyük harfleri küçük harfe dönüştürmek için kullanılır. Aynı zamanda sadece ilk harfleri büyük diğerleri küçük olacak şekilde kelime ve cümlelerde oluşturabiliriz. text-transform özelliğine şu değerleri verebiliriz:uppercase : Küçük harfleri büyük harfe dönüştürür.lowercase : Büyük harfleri küçük harfe dönüştürür.capitalize : İlk harf büyük diğer harfler küçük olacak şekilde dönüştürür.
text-alignYazıları yatayda hizalamak için kullanılır. Yani yazının sağda, solda, ortada veya sağa ve sola dayalı şekilde olmasını sağlayabiliriz. text-align özelliğine şu değerleri verebiliriz:rightleftcenterjustifyendstart
text-decorationYazıların altını, üstünü, üzerini çizmek veya çizili olanları kaldırmak için kullanılır. text-decoration özelliğine şu değerleri verebiliriz:underline : Yazının altını çizer.line-through : Yazının üzerini çizer.overline : Yazının üstünü çizer.none : Varolan etkileri kaldırır.
text-decoration-colorYazıların altını, üstünü ve üzerini hangi renk ile çizeceğimizi belirtmek için kullanılır.
text-decoration-styleYazıların altını, üstünü ve üzerini hangi stil ile çizeceğimizi belirtmek için kullanılır. Örneğin düz çizgi, kesikli çizgi vb.
text-indentParagrafın ilk cümlesinin vereceğimiz değer ölçüsünde içeriden yani girintili olarak başlaması için kullanılır. Değeri px olarak verebiliriz.
text-shadowYazılara gölge efekti vermek için kullanılır. Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.
text-overflowBu özellik ile yazılarımızın sığmadığı durumlarda yazının devamının olduğunu belirtmek için “…” (üç nokta) koyabiliriz. text-overflow özelliğine şu değerleri verebiliriz:clip : Varsayılan olarak gelen değer.ellipsis : Yazının taştığını belirten “…” (üç nokta) koyar.

İÇ VE DIŞ BOŞLUK VERMEK İÇİN KULLANDIĞIMIZ CSS KODLARI VE ANLAMLARI

paddingHtml öğelerine iç boşluk vermek için kullanılır. Padding değeri verirken bunu 3 farklı yol ile yapabiliriz. Bunlar:length ( padding: 10px; ) : px, pt, cm vb. bir değer verebiliriz.% ( padding: 20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz.inherit ( padding: inherit; ) : inherit değeri verirsek, ebeveyn etiketinin padding değeri ne ise onu miras alır ve aynı değer uygulanır.
padding-bottomHtml öğelerine aşağı iç boşluk vermek için kullanılır.
padding-leftHtml öğelerine sol iç boşluk vermek için kullanılır.
padding-rightHtml öğelerine sağ iç boşluk vermek için kullanılır.
padding-topHtml öğelerine yukarı iç boşluk vermek için kullanılır.
marginHtml öğelerine dış boşluk vermek için kullanılır. Margin değeri verirken bunu 4 farklı yol ile yapabiliriz. Bunlar:length ( margin: 10px; ) : px, pt, cm vb. bir değer verebiliriz.% ( margin: 20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz.inherit ( margin: inherit; ) : inherit değeri verirsek, ebeveyn etiketinin margin değeri ne ise onu miras alır ve aynı değer uygulanır.auto ( margin: auto; ) : auto değeri verirsek, etiketin kenar boşluklarını tarayıcı otomatik olarak belirler. Bu özelliğin düzgün çalışması için etiketin width özelliğine bir genişlik değeri vermelisiniz.
margin-bottomHtml öğelerine aşağı dış boşluk vermek için kullanılır.
margin-leftHtml öğelerine sol dış boşluk vermek için kullanılır.
margin-rightHtml öğelerine sağ dış boşluk vermek için kullanılır.
margin-topHtml öğelerine yukarı dış boşluk vermek için kullanılır.

Bu gönderi ne kadar yararlı oldu?

Derecelendirmek için bir yıldıza tıklayın!

Ortalama puanı 0 / 5. Oy sayısı: 0

Şu ana kadar oy yok! Bu gönderiyi ilk değerlendiren siz olun.

TÜM CSS KODLARI VE ANLAMLARI YAPILAN YORUMLAR