Css Metin Özellikleri

Css dilinde metin düzenleme işlemleri (metnin rengini, boyutunu, konumunu,harfler ve kelimeler arası boşluk, büyük harf, küçük harf vb.) yapılmaktadır. Html biçimlendirme isimli dersimizde anlattığımız gibi Css dilinde de biçimlendirme (metin düzenleme) işlemlerinin nasıl yapıldığını öğreneceksiniz.

Css Metin Özellikleri:

  • color
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • letter-spacing
  • word-spacing
  • line-height
  • vertical-align
  • text-shadow

Css Color Özelliği

Css color özelliği metnin rengini belirlemek için kullanılır. Değer olarak rengin ingilizce ismi, hex veya rgb kodu kullanılabilir.

Css Text-align Özelliği

Css text align özelliği metnin konumunu belirlemek için kullanılır.

Css Text-decoration Özelliği

Css text-decoration özelliği metnin altı çizili, üstü çizili, ortası çizili, yanıp sönen veya linklerde olan alt çizgiyi kaldırmak için kullanılır.

Css Text-transform Özelliği

Css text-transform özelliği metinde bulunan harfleri küçük,büyük veya ilk harfleri büyük olarak yapmak için kullanılır.

Css Text-indent Özelliği

Css text-indent özelliği girinti eklemek yani paragraf eklerken ne kadar içten başlayacağını belirlemek için kullanılır.

Css Letter-spacing Özelliği

Css letter-spacing özelliği metinde bulunan harfler arasında ne kadar boşluk mesafe olacağını belirlemek için kullanılır.

Css Word-spacing Özelliği

Css word-spacing özelliği metinde bulunan kelimeler arasında ne kadar boşluk mesafe olacağını belirlemek için kullanılır.

Css Line-height Özelliği

Css line-height özelliği satırlar arasındaki mesafeyi ayarlamak için kullanılır.

Css Vertical-align Özelliği

Css vertical-align özelliği html ögelerinin dikey olarak hizalanması için kullanılır.

Css Text-shadow Özelliği

Css text-shadow özelliği metne gölge eklemek için kullanılır.


Css Boyut

Css dilinde html ögelerinin boyutunu ayarlamamız gerekebilir. Bu boyutları ayarlamak için en sık kullanılan iki özellik bulunmaktadır. Bunlar:

Width : Genişlik

Height: Yükseklik 

Html dilinde temel ögeleri kullanmayı öğrendik. Şimdi css ile birlikte <div> etiketinin nasıl kullanıldığını detaylı bir şekilde anlatacağız.

Div'ler css ile kullanılan önemli bir etikettir. 

Div Kullanımı :

<div>

İçerik

</div>

 

Css Width Özelliği

Css width özelliği sayfada kullanılan html ögelerinin genişliğini belirlemek için kullanılmaktadır.

Css Width Genişlik Özelliği Kullanımı:

<style type="text/css">

.genislik{

width:500px;
background-color:red;

}

</style>

<div class="genislik"> AZKOD GENİŞLİK </div>

 

Css Height Özelliği

Css height özelliği sayfada kullanılan html ögelerinin yüksekliğini belirlemek için kullanılmaktadır.

Css Height Yükseklik Özelliği Kullanımı:

<style type="text/css">

.yukseklik{

height:350px;
background-color:purple;

}

</style>

<div class="yukseklik"> AZKOD YÜKSEKLİK </div>

 

Css ile Yükseklik ve Genişlik Özelliği Birlikte Kullanımı

<style type="text/css">

.boyut{

width:250px;
height:350px;
background-color:purple;

}

</style>

<div class="boyut"> AZKOD YÜKSEKLİK ve GENİŞLİK ÖZELLİĞİ BİRLİKTE KULLANIMI </div>

 

Css ile Div Kullanarak Kare Yapma

<style type="text/css">

.kare{

width:50px;
height:50px;
background-color:gray;


}

</style>

<div class="kare"> KARE </div>

 


Html Medya

Html dilinde bulunan medya elemanları video, ses ve flaş dosyası ekleme gibi işlemler için kullanılmaktadır.

Html Video

Html dilinde web sitelerine video eklenebilmektedir. Web sitelerine video eklemek için gerekli olan etiketi <video> etiketi'dir. 

<video> olarak açılır </video> şeklinde kapanmaktadır. 

Html video etiketi ile kullanılan parametreleri:

controls : Videonun başlayıp durmasını sağlamak için kullanılmaktadır.

autoplay : Videonun otomatik olarak başlaması için kullanılır.

source : Videonun bulunduğu adresi belirtmek için kullanılmaktadır.

width : Videonun genişliğini belirlemek için kullanılır.

height : Videonun yüksekliğini belirlemek için kullanılır.

Metin : Videonun çalışmadığı tarayıcı tarafından desteklenmediği zaman görüntülenir.

Html Video Ekleme

<video width="250" height="250" controls>

  <source src="video_adresi.mp4" type="video/mp4">

Video etiketi tarayıcı tarafından desteklenmemektedir.

</video>

Otomatik Olarak Başlayan Video Ekleme

<video width="250" height="250" autoplay>

  <source src="video_adresi.mp4" type="video/mp4">

Video etiketi tarayıcı tarafından desteklenmemektedir.

</video>

 

Html Ses Dosyaları

Html dilinde web sitelerine ses dosyaları yani müzikler eklenebilmektedir. Ses dosyası eklemek için <audio> etiketi kullanılmaktadır. Ses etiketi <audio> açılmakta ve </audio> şeklinde kapanmaktadır.

Html Ses Dosyası Ekleme

<audio controls>

  <source src="ses_dosyasi_ismi.mp3" type="audio/mpeg">

Ses Dosyası Tarayıcı tarafından desteklenmemektedir.

</audio>

Otomatik Olarak Başlayan Ses Dosyası Ekleme

<audio autoplay>

  <source src="ses_dosyasi_ismi.mp3" type="audio/mpeg">

Ses Dosyası Tarayıcı tarafından desteklenmemektedir.

</audio>

 

Html Flash Dosyaları

Html dilinde web sitelerine flash dosyaları yani animasyonlar eklenebilmektedir. Flash dosyası eklemek için <embed> etiketi kullanılmaktadır.

Embed Etiketi Kullanımı

<embed src="dosya_adresi" width="Genişlik" height="Yükseklik">

Embed Etiketi ile Flash Dosyası Ekleme

swf uzantılı olan oyun,animasyon vb. dosyalar yüklenebilmektedir.

<embed src="dosya_adresi.swf" width="100%" height="100%">