css nedir komutları ve türkçe açıklamarı

CSS Nedir ?

Kısa Adı CSS olan, açılımı Cascading Style Sheets ve türkçesiyle stil şablonu olan yazılım türü bizlere HTML’in tasarımında büyük esneklikler sağlamaktadır.

css ile tüm web sitenizdeki yazıları tek bir komutla renklendirebilir, biçimlendirebilirsiniz. Son yıllarda google ın desteklediği SEO için de gerekli şartlardan birisi olarak, web sitelerimizde her yazı için tekrar tekrar font, renk biçim kullanmak yerine bunları tek bir css dosyasından göstermek sayfalarımızdaki kod yoğunluğunu azaltacak ve hem sayfamızın hızında hemde google botların sayfamızı taramasında daha fazla yardımcı olacaktır. Ayrıca, web sitenizdeki tüm başlıkları tek biçimde göstermek için her sayfada tek tek css düzenlemek yerine css dosyanızdaki ilgili konumdan değişikliği yapıp çalışma zamanınızdan da tasarruf edebilirsiniz.

Css komutlarımızı html sayfamızda da kullanabiliriz, bu kullanım head tagları arasında yer alabileceği gibi özelliğine göre body tagları arasında da yer alabilirler. Yanlız bu kullanım yukarda da bahsettiğim gibi sayfada kod kirliliğine yer açmaktadır. Diğer kullanımı ve doğru olanı da head tagları arasında harici oluşturulan css dosyamızı çağırmamızdır. bunun için örnek kullanım aşağıdaki gibidir.

<head>

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

</head>

Yukarda görüldüğü gibi css dosyamız css klasöründe yer almaktadır ve harici dosya olarak sayfamıza head tagları arasında çağırılmıştır.

css konusunda genelde explorer diğer browserlara göre bazı komutlarda farklı yazım kuralları kabul etmektedir. bu çelişkiyi ortadan kaldırmak için ise reset.css kullanılabilir.

Gelelim CSS KOmutları ve Türkçe Açıklamalarına.

CSS LİNK ÖZELLİKLERİ

a : web sayfası açıldığında bağlantı üzerine mouse imleci gelmeden önceki halidir.
a:hover : Bağlantı üzerine mouse imlecinin geldiği andaki bağlantı halidir.
a:active : Bağlantıya tıklanıldığı andaki halidir.
a:visited : Bağlantıya tıklandıktan sonraki halidir.

CSS BİÇİM ÖZELLİKLERİ:

color: Bağlantının renginin ne olacağını belirtir.
background-color: Bağlantının arka plan / zemin renginin ne olacağını belirler.
background-image: Bağlantı arka planının renk değilde resim olmasını sağlamaktadır.
text-decoration: Bağlantının çizgilerini belirler. Genel Kullanımları aşağıdaki gibidir.
    text-decoration: none; – çizgi kullanılmaz
    text-decoration: overline;  : bağlantı üzerine çizgi atar.
    text-decoration:underline;  : bağlantı altına çizgi atar.
font-weight: Text / yazının kalınlığını ayarlamada kullanılmaktadır.
border: Bağlantı veya tabloya ya da resme kenarlık atar
display: Bağlantıda istediğimiz alanın seçilmesini sağlar.

CSS TEXT ÖZELLİKLERİ:

word-spacing : Kelimelerin birbiri arasındaki boşluğun büyüklüğünü belirlemekte kullanılır.
letter-spacing : harflerin birbiri arasındaki boşluğun büyüklüğünü belirlemekte kullanılır.
text-decoration : Kelimenin alt veya üst çizgisinin olup olmayacağını belirtmekte kullanılır.
underline : Kelimenin alt kısmının çizgili olup olmaması gerektiğini belirtir.
overline : Kelimenin üst kısmının çizgili olup olmaması gerektiğini belirtir.
line-through : Kelimenin orta kısmının çizgili olup olmaması gerektiğini belirtir.
vertical-align : Metnin bulunduğu katmanda yatayda nasıl hizalanması gerektiğini belirler. örn: top, middle, bottom gibi
text-transform: Kelime öbeğindeki harflerin büyük veya küçük olmasını belirtmekte kullanılır.
capitalize : Kelimenin ilk harfinin büyük olmasını sağlar.
uppercase : Cümledeki tüm kelimelerin harflerinin büyük olmasını sağlar.
lowercase : Cümledeki tüm kelimelerin harflerinin küçük olmasını sağlar.
text-align: Metnin bulunduğu katmana göre dikeyde nasıl hizalanacağını belirtir.
left : Metni sola hizalama da kullanılır.
right : Metni sağa hizalama da kullanılır.
center : Metin konumunu bulunduğu katmana göre ortalı hizalar.
justify : Metnin bulunduğu katmanda her iki tarafa da yaslı durmasını sağlar.
text-indent : metinde parafraf başı yapılmasını sağlar. ve bu paragraf başının soldan ne kadar içeriden başlaması gerektiğini belirler.
line-height : Satırlar arası yüksekliği belirtir.
first-line : Metindeki ilk satırın biçimlendirilmesinde kullanılır.
first-letter : Metindeki ilk harfinin biçimlendirilmesinde kullanılır.

FONT ÖZELLİKLERİ:

font-family: Yazı türünü / ailesini belirtir. örn: Tahoma gibi
font-style: yazının eğik veya normal görünmesini sağlamaktadır.
font-variant: Yazının tümün büyük harf ya da normal görünmesini sağlamaktadır.
font-weight: yazının kalın veya ince olmasını sağlamaktadır.
font-size: yazının puntosunu yani büyük küçüklüğünü belirler.

CSS LİSTE ÖZELLİKLERİ;

disk: Listenin daire şeklinde olmasını sağlamaktadır.
circle : Listenin çember şeklinde olmasını sağlamaktadır.
square : Listenin kare şeklinde olmasını sağlamaktadır.
decimal : Listenin rakamsal olmasını sağlamaktadır.
lower-roman : Listenin küçük roma rakamlarıyla sıralanmasını sağlamaktadır.
upper-roman : Listenin Büyük roma rakamlarıyla sıralanmasını sağlamaktadır.
lower-alpha : Listenin alfabetik sıralamayla (küçük harf) sıralanmasını sağlamaktadır.
upper-alpha : Listenin alfabetik sıralamayla (büyük harf) sıralanmasını sağlamaktadır.
none : Listenin biçimsiz olmasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlamaktadır.

KATMAN ÖZELLİKLERİ:

position: Katmanın pozisyonunun belirtilmesinde kullanılmaktadır.
absolute: Katmanın pozisyonunun bağlı olduğu ana pencere esas alınarak belirlenmesini sağlamaktadır.
relative: Katmanın pozisyonunun bir önceki katman penceresi esas alınarak belirlenmesini sağlamaktadır.
static: Bu komutla katman sabit olarak hizzalanır e bu varsayıland eğer sol üst köşedir.
top: Katmanda üstten boşluk bırakılmasını sağlamaktadır.
left: Katmanda Soldan boşluk bırakılmasını sağlamaktadır.
width: Katmanın genişliğini belirtmektedir.
height: Katmana ait yüksekliği belirlememizi ssağlamaktadır.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Katmanı otomatik olarak hizalamaya yarar bu da genelde ekrana göre ortalamaya yarar.
scroll: katmana verilen genişlik ve yükseklik değeri dışında kalan içeriği kaydırma çubuğuyla gösterir.
visible : Katmanda verilen boyutlara içeriğin sığmadığı durumda dışar taşırarak içeriğin görünmesini sağlamaktadır.
hidden: katmana sığmayan yerleri gizler
visibility: Katmanın görünebilirliğini belirler.
visible : Katmanı görünür yapar.
z-index : Katmanları üst üste getirmemiz gerektiğinde hangisinin daha üstte olması gerektiğini ayarlar. 1 verildiğinde katman en altta görünür.

İMLEÇ ÖZELLİKLERİ:

crosshair: Mouse imlecinin + (artı) işareti şeklinde görünmesini sağlamaktadır.
auto: Mouse imlecinin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlamaktadır.
default: Mouse imlecinin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlamaktadır.
hand: Mouse imlecinin link üzerine geldiğinde olduğu gibi el iconu şeklinde görüntülenmesini sağlamaktadır.
move: Mouse imlecinin taşıma işareti şeklinde olmasını sağlamaktadır.
ne-resize: Mouse imlecinin sağa yatık şekilde normal ok iconu olmasını sağlamaktadır.
nw-resize: Mouse imlecinin sola yatık şekilde normal ok iconu olmasını sağlamaktadır.
se-resize: Mouse imlecinin yukardan aşağı doğru sağa yatık şekilde normal ok iconu olmasını sağlamaktadır.
sw-resize: Mouse imlecinin yukardan aşağı doğru sola yatık şekilde normal ok iconu olmasını sağlamaktadır.
n-resize: Mouse imlecinin aşağıdan yukarıya doğru ince ok iconu şeklinde olmasını sağlamaktadır.
s-resize: Mouse imlecinin yukardan ağaıya ince ok iconu şeklinde olmasını sağlamaktadır.
w-resize: Mouse imlecinin sola doğru ince ok iconu şeklinde olmasını sağlamaktadır.
e-resize: Mouse imlecinin sağa doğru ince ok iconu şeklinde olmasını sağlamaktadır.
text: Mouse imlecinin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlamaktadır.
wait: Mouse imlecinin meşgul animasyonuna dönüşmesini sağlamaktadır.
help: Mouse imlecinin yardım soru işaretine dönüşmesini sağlamaktadır.

Yazının Devam Yakında Yayınlanacaktır.

Mesaj 0 Comments

Leave A Reply