Css Makaleleri
CSS
Css metin işlemleri

font-size: Metinlerin büyüklüğünü yani puntosunu belirlediğimiz css özelliğidir.


Varsayılan font-size değeri 16px ‘dır.
Varsayılan font-size değerini body etiketine css özelliği vererek değiştirebiliriz. Örnek:

body { font-size: 20px }

örnek uygulama için tıkla!


px yerine em kullanırsak varsayılan font büyüklüğe oranla bir punto belirtmiş oluruz. Örneğin varsayılan font-size değeri 16px olsun, biz bu durumda herhangi bir etikete 2em değerini verirsek font büyüklüğünün iki katı yani 32px olarak belirtmiş oluruz. Örnek:

font-size : 2em; ( Bunun anlamı metin büyüklüğüm varsayılan metin boyutundan 2 kat fazla olsun demektir). Bu durumda font-size : 32px; olacaktır.

font-family: Metinlerin türünü yani yazı tipini belirlediğimiz css özelliğidir.


varsayılan font-family değeri "Times New Roman" ‘dır. Örnek:
font-family : "Times New Roman", Times, serif;

Burada "Times New Roman" font türü uygulanır ancak bu font türünü tarayıcı desteklemiyorsa bu durumda ikinci font türü olan Times ya da bir sonraki serif font türü etkin olacaktır. Biz mutlaka en az üç yazı tipi belirleyelim.
"Times New Roman" font türünün tırnaklar içinde belirtilmesindeki sebep birden fazla kelimeden oluşmasıdır.
Yazı tipi olarak kullanabileceğimiz diğer seçenekler:

courier, arial, helvetica, verdana, calibri vbs...

font-weight: Metinlerin koyuluk derecesini belirlediğimiz css özelliğidir.


Alabileceği değerler:
font-weight: normal;
font-weight: bold;
font-weight: bolder; Sayfadaki geçerli koyuluk derecesine göre yazıların daha koyu olmasını sağlar.
font-weight: lighter; Sayfadaki geçerli koyuluk derecesine göre yazıların daha açık olmasını sağlar.
Sayısal değer de alabilir. Bunlar 100-900 arası değerlerdir. Zaten diğer değerlerin de sayısal birer karşılıkları vardır:

normal: 400

bold: 700

text-decoration: Metinlerin üstünü, altını veya ortasını çizmek için kullanılır.


Alabileceği değerler:
text-decoration: underline; Metinlerin altını çizer.

Örnek: DUYURU
text-decoration: overline; Metinlerin üstünü çizer.

Örnek: DUYURU
text-decoration: line-through; Metinlerin ortasını çizer.

Örnek: DUYURU
text-decoration: none: Metinlerde çizik varsa kaldırır. Zaten varsayılan değerdir.

text-transform: Metinlerin büyük küçük harf ayarlarını yapar


Alabileceği değerler:
text-transform: uppercase; Metinleri büyük harfe çevirir.

Örnek: konya --> KONYA örnek uygulama için tıkla!
text-transform: lowercase; Metinleri küçük harfe çevirir.

Örnek: ZEYTİN --> zeytin
text-transform: capitalize; Kelimelerin ilk harfini büyük harfe çevirir.

Örnek: karadeniz dalgası --> Karadeniz Dalgası

text-indent: Paragrafların ilk cümlesinin ne kadar içeriden başlayacağını belirtir.

Örnek:
text-indent: 10px; Bu örneğe göre paragrafımız 10px içeriden başlayacaktır.

İlk zamanlar kabileler halinde yaşayan insanlar diğer kabilelere karşı çıkar çatışmaları ve menfaatleri yüzünden şiddet kullanma yoluna başvurmuştur. Böylesi bir ortamda da adına harp veya savaş dediğimiz bir kavram ortaya çıkmıştır. Toplumların zaman içerisindeki değişimi ve gelişimi göz önüne alındığında İlk Çağ’da kabileler arası çatışmalardan ibaret olan bu savaş kavramı, Orta Çağ’ da yerini şehir devletlerinin kurulması ile silahlı mücadelelere bırakmış, Yeni Çağ’dan itibaren ise ulusal devletlerin kurulması ile bu savaş kavramı milletlerin topyekün birbirleriyle savaşmasına dönüşmüştür.


text-indent:30px; Bu örneğe göre ise paragrafımız 30px içeriden başlayacaktır.

İlk zamanlar kabileler halinde yaşayan insanlar diğer kabilelere karşı çıkar çatışmaları ve menfaatleri yüzünden şiddet kullanma yoluna başvurmuştur. Böylesi bir ortamda da adına harp veya savaş dediğimiz bir kavram ortaya çıkmıştır. Toplumların zaman içerisindeki değişimi ve gelişimi göz önüne alındığında İlk Çağ’da kabileler arası çatışmalardan ibaret olan bu savaş kavramı, Orta Çağ’ da yerini şehir devletlerinin kurulması ile silahlı mücadelelere bırakmış, Yeni Çağ’dan itibaren ise ulusal devletlerin kurulması ile bu savaş kavramı milletlerin topyekün birbirleriyle savaşmasına dönüşmüştür.


text-align: Metinlerin hizalanmasını sağlar.

Alabileceği değerler:
text-align:left; Bu örneğe göre metnimiz sola hizalı olacaktır.

Savaşların en önemli unsuru olan insanlar ancak silah kavramı ile bir arada düşünüldüğünde tehlikeli bir hale gelmektedir. Zira insan tek başına düşünüldüğünde doğadaki diğer yırtıcı ve yabani canlılara nazaran daha savunmasız bir haldedir. Bu savunmasızlığı silah yapımı ile ortadan kaldırmanın gerekliliğini bilen insanlar; akıl, zeka ve mantık ile silah geliştirme düşüncesine sahip olarak doğanın kendilerine sunduğu imkanlar dahilinde çeşitli silahlar üretmişlerdir.



text-align:center; Bu örneğe göre metnimiz ortaya hizalanacaktır.

Savaşların en önemli unsuru olan insanlar ancak silah kavramı ile bir arada düşünüldüğünde tehlikeli bir hale gelmektedir. Zira insan tek başına düşünüldüğünde doğadaki diğer yırtıcı ve yabani canlılara nazaran daha savunmasız bir haldedir. Bu savunmasızlığı silah yapımı ile ortadan kaldırmanın gerekliliğini bilen insanlar; akıl, zeka ve mantık ile silah geliştirme düşüncesine sahip olarak doğanın kendilerine sunduğu imkanlar dahilinde çeşitli silahlar üretmişlerdir.



text-align:right; Bu örneğe göre metnimiz sağa hizalı olacaktır.

Savaşların en önemli unsuru olan insanlar ancak silah kavramı ile bir arada düşünüldüğünde tehlikeli bir hale gelmektedir. Zira insan tek başına düşünüldüğünde doğadaki diğer yırtıcı ve yabani canlılara nazaran daha savunmasız bir haldedir. Bu savunmasızlığı silah yapımı ile ortadan kaldırmanın gerekliliğini bilen insanlar; akıl, zeka ve mantık ile silah geliştirme düşüncesine sahip olarak doğanın kendilerine sunduğu imkanlar dahilinde çeşitli silahlar üretmişlerdir.



text-align:justify; Bu örneğe göre metnimiz iki yana yaslı olacaktır.

Savaşların en önemli unsuru olan insanlar ancak silah kavramı ile bir arada düşünüldüğünde tehlikeli bir hale gelmektedir. Zira insan tek başına düşünüldüğünde doğadaki diğer yırtıcı ve yabani canlılara nazaran daha savunmasız bir haldedir. Bu savunmasızlığı silah yapımı ile ortadan kaldırmanın gerekliliğini bilen insanlar; akıl, zeka ve mantık ile silah geliştirme düşüncesine sahip olarak doğanın kendilerine sunduğu imkanlar dahilinde çeşitli silahlar üretmişlerdir.



word-spacing: Kelimeler arasındaki boşluğun mesafesini belirler, negatif bir değer alırsa kelimeler birbirine çok yaklaşır.

Örnek:
word-spacing:5px; Bu örneğe göre kelimeler arası boşluk miktarı 5px olacak ve şöyle gözükecektir.

Gaius Julius Caesar (Jül Sezar), elde ettiği güçle Roma Cumhuriyeti’nin en nüfuzlu ve dokunulmaz lideri olmayı başarmış ve otoritesinden rahatsız olan Romalı senatörlerin MÖ 44 yılının 15 Mart gününde düzenlediği bıçaklı suikast sonucunda öldürülmüştü. Romalı sivillerin kalbini kazanan diktatör cumhuriyeti şu anda İspanya, Fransa, Almanya, İsviçre ve Belçika olan bölgeleri kapsayacak şekilde genişleten başarılı bir askeri lider olmakla kalmamış, aynı zamanda seyahatleri, teorileri ve siyasi görüşlerini kaydetmiştir.



word-spacing:30px; Bu örneğe göre kelimeler arası boşluk miktarı 30px olacak ve şöyle gözükecektir.

Gaius Julius Caesar (Jül Sezar), elde ettiği güçle Roma Cumhuriyeti’nin en nüfuzlu ve dokunulmaz lideri olmayı başarmış ve otoritesinden rahatsız olan Romalı senatörlerin MÖ 44 yılının 15 Mart gününde düzenlediği bıçaklı suikast sonucunda öldürülmüştü. Romalı sivillerin kalbini kazanan diktatör cumhuriyeti şu anda İspanya, Fransa, Almanya, İsviçre ve Belçika olan bölgeleri kapsayacak şekilde genişleten başarılı bir askeri lider olmakla kalmamış, aynı zamanda seyahatleri, teorileri ve siyasi görüşlerini kaydetmiştir.



letter-spacing: Harfler arasındaki boşluğun mesafesini belirler, negatif bir değer alırsa harfler birbirine çok yaklaşır.

Örnek:
letter-spacing:4px; Bu örneğe göre harfler arası boşluk miktarı 4px olacak ve şöyle gözükecektir.

And Dağları’nda küçük bir yabani meyve olarak zirai kariyerine başlayan domates olmasaydı bugün her gün tükettiğimiz yemeklerden kaçını tanıyabilirdik? Tavukların aslında Güneydoğu Asya’nın tropik ormanlarından, patatesin And Dağları’ndan, havucun ilk kez Orta Asya ve buğdayın ise Ortadoğu’dan dünyaya yayıldığını düşünüldüğünde küçük bir dünyada yaşadığımızı bir kez daha anlıyoruz.



letter-spacing:9px; Bu örneğe göre harfler arası boşluk miktarı 9px olacak ve şöyle gözükecektir.

And Dağları’nda küçük bir yabani meyve olarak zirai kariyerine başlayan domates olmasaydı bugün her gün tükettiğimiz yemeklerden kaçını tanıyabilirdik? Tavukların aslında Güneydoğu Asya’nın tropik ormanlarından, patatesin And Dağları’ndan, havucun ilk kez Orta Asya ve buğdayın ise Ortadoğu’dan dünyaya yayıldığını düşünüldüğünde küçük bir dünyada yaşadığımızı bir kez daha anlıyoruz.



line-height: Satır yüksekliğini belirler.

Örnek:
line-height:20px; Bu örneğe göre satır yüksekliği 20px olacak ve şöyle gözükecektir.

Bal, gün boyunca çiçekleri ziyaret edip, çiçeklerin tozlayıcıları çekmek için ürettiği şekerli sıvı olan nektarı toplayan bal arıları tarafından üretilmektedir. Nektarlar kovandaki mumlu peteklere taşınıp biriktirilirken, kovandaki arılar da toplanan nektarlardaki fazla suyu buharlaştırmak için kanatlarıyla sıvıyı havalandırmaktadır. Bu işlem sayesinde nektardaki şeker yoğunlaşmakta, taze nektarın kıt olabileceği ilerideki kıtlık dönemleri için depolanan bala dönüşmektedir.



line-height:50px; Bu örneğe göre satır yüksekliği 50px olacak ve şöyle gözükecektir.

Bal, gün boyunca çiçekleri ziyaret edip, çiçeklerin tozlayıcıları çekmek için ürettiği şekerli sıvı olan nektarı toplayan bal arıları tarafından üretilmektedir. Nektarlar kovandaki mumlu peteklere taşınıp biriktirilirken, kovandaki arılar da toplanan nektarlardaki fazla suyu buharlaştırmak için kanatlarıyla sıvıyı havalandırmaktadır. Bu işlem sayesinde nektardaki şeker yoğunlaşmakta, taze nektarın kıt olabileceği ilerideki kıtlık dönemleri için depolanan bala dönüşmektedir.



color: Yazı renklerini belirler.

Örnek:
color:red; Direkt renk ismini yazabiliriz.

Kaşıkçı Elması, adını kaşık benzeri oval formundan alan ve Topkapı Sarayı Müzesi’nde sergilenen en önemi mücehver olup, çevresi çift sıra olacak şekilde eski Mazarin kesimli 49 tane elmas ile süslenmiş, tek yüzü düz gül kesimli 86 karat ağırlığında bir elmastır.



color:#FF0000; Bir başka renk belirleme yöntemi ise Hexedecimal renk tanımlamasıdır. Kırmızı rengin hexedecimal karşılığı #FF0000 'dir.

Kaşıkçı Elması, adını kaşık benzeri oval formundan alan ve Topkapı Sarayı Müzesi’nde sergilenen en önemi mücehver olup, çevresi çift sıra olacak şekilde eski Mazarin kesimli 49 tane elmas ile süslenmiş, tek yüzü düz gül kesimli 86 karat ağırlığında bir elmastır.



color:rgb (190,94,244); Bir başka renk belirleme yöntemi de RGB türüdür. rgb (Red,green,blue) Üç ana temel renk için 0-255 arasında değer alır. Kırmızı renk için bu değer rgb (190,94,244) şeklindedir.

Kaşıkçı Elması, adını kaşık benzeri oval formundan alan ve Topkapı Sarayı Müzesi’nde sergilenen en önemi mücehver olup, çevresi çift sıra olacak şekilde eski Mazarin kesimli 49 tane elmas ile süslenmiş, tek yüzü düz gül kesimli 86 karat ağırlığında bir elmastır.



Tüm Makaleler
Yasal Uyarı: Bu sitede yayınlanan her türlü ses, görüntü, yazı içeren bilgi ve belge, ticari marka ve her tür fikri mülkiyet hakkı , ilgili markalara aittir, yalnızca sahipleri tarafından ve sahiplerinin izni ile kullanılmaktadır ve telif hakları kapsamındadır. ©