CSS nedir? CSS Türleri Nelerdir? CSS Kodları ve Anlamları

İngilizcesi Cascading Style Sheets olan CSS açılımı, Basamaklanmış Stil Katmanları anlamına gelmektedir. CSS nedir? CSS kodları ve anlamları, CSS örnekleri
9kuyruk.com
1770
.
9kuyruk.com
11 Aralık 2021 22:20
.
Yazılım
.
Yazar: 9k
CSS nedir? CSS Türleri Nelerdir? CSS Kodları ve Anlamları

CSS Nedir?


CSS (Cascading Style Sheet) açılımı “Basamaklı Stil Sayfaları” anlamına gelen web sayfalarında “yazı tipi, renk, boyut, arka plan ve dokular” gibi ögelerde arzu edilen değişiklikleri tanımlamanızı sağlayan bir programlama dilidir.


Dahili CSS Stilleri (Internal CSS Style) : 


Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın head kısmında, style…/style etiketi içinde yer alır.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dahili CSS</title>
<style type="text/css">
h3{
text-align: left;
font-size: 15px;
color: red;
}
</style>
</head>
<body>
<h3>DAHİLİ CSS</h3>
</body>
</html>


Harici CSS Stilleri (External CSS Style) : 


Genellikle .css uzantısını kullanan harici dosyalardır.  Sityede head bloğu içerisinde link etiketi yardımıyla çağırılır. 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HARİCİ CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3>HARİCİ CSS</h3>
</body>
</html>


Birde Yerel CSS var fakat kullanılmıyor. Neden kullanılmıyor; çünkü her bir nesleye tek tek CSS kodlamanız gerekyor ve buda çok fazla kod satırı ve SEO'da kayıp demek. Kodlayan olarak sizde kodların içinde kaybolabilirsiniz.


CSS Kodları ve Anlamları


a : Linkin genel durumu
a:hover: Linkin fare üzerine getirildiğindeki durumudur
a:active: Linkin tıklandığı andaki durumudur
a:visited: Linkin tıklandıktan sonraki durumudur



color: Yazı rengini belirler
background-color: Arkaplan rengi
background-image: Arkaplana resim ekleme
text-decoration: Yazının altında üstünde çizgi koyma
font-weight: Yazının kalınlık değeri
border: Kenarlık
display: Gizle / Göster
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.



top: Üst uzaklık veya yakınlık
left: Sol uzaklık veya yakınlık
width: Genişlik
height: Yükseklik
overflow: Yazının sığmayan bölmüne ne olacağını belirler
auto: Otomatik
scroll: Kaydırma çubuğu ekler
hidden: Sığmayan yerleri gizler.
visible: Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index: Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.



font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-size: Yazının büyüklüğünü belirler.
word-spacing: Kelimeler arasında bırakılacak boşluğu belirler.
letter-spacing: Harfler arasında bırakılacak boşluğu belirler.
vertical-align: Metnin yatay olarak nasıl hizalanacağını belirler.
capitalize: Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase: Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase: Kelimelerin bütün harflerinin küçük olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left: Metni sola yaslar.
right: Metni sağa yaslar.
center: Metni ortalar.
justify: Metni iki yana yaslar.
line-height: Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)



background-color: Zeminin rengini belirler.
color: Renk adı
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url: Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat: Resmin bütün zemine yayılmasını sağlar.
repeat-x: Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y: Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll: Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top: Yukarı yerleştirir.
center: Ortalar.
bottom: Aşağı yerleştirir.
left: Sola yerleştirir.
right: Sağa yerleştirir.

margin: Pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top: Pencerenin üst kenar bosluğu
margin-right: Pencerenin sağ kenar bosluğu
margin-bottom: Pencerenin alt kenar bosluğu
margin-left: Pencerenin sol kenar bosluğu



padding: Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top: Üst kenarı ile tablo içerik arasında bırakılacak boşluğu belirler.
padding-right: Sağ kenarı ile tablo içerik arasında bırakılacak boşluğu belirler.
padding-bottom: Alt kenarı ile tablo içerik arasında bırakılacak boşluğu belirler.
padding-left: Sol kenarı ile tablo içerik arasında bırakılacak boşluğu belirler.



border: Kenarlarlık
border-top: Üst kenarlarlık
border-left: Sol kenarlarlık
border-bottom: Alt kenarlarlık
border-right: Sağ kenarlarlık
border-width: Kenarlarının kalınlığını belirler.
border-top-width: Üst kenarılık kalınlığı
border-right-width: Sağ kenarılık kalınlığı
border-bottom-width: Alt kenarılık kalınlığı
border-left-width: Sol kenarılık kalınlığı
border-color: Tablonun kenarlarının rengini belirler.
border-top-color: Tablonun üst kenarının rengini belirler.
border-right-color: Tablonun sağ kenarının rengini belirler.
border-bottom-color: Tablonun alt kenarının rengini belirler.
border-left-color: Tablonun sol kenarının rengini belirler.



color: Tabloda geçen metnin rengini belirler.
width: Tablonon genişliğini belirler.
height: Tablonun yüksekliğini belirler.

Yorumlar (0)
İlginizi Çekebilir
Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev