Css Uygulama-1

Css Uygulama Örneği

CSS, web sayfamızdaki öğelerin stilini/görünümünü değiştirmemizi sağlar. Sayfamızda bölümler oluşturup o bölümler üzerinde istediğimiz gibi işlem yapmamızı sağlar.

Öncelikle burada bölümler oluşturacağız. Bölümleri <div> etiketi ile oluşturuyoruz.

Uygulamamızda iki tane dosya kullanacağız , bir tanesi index.html , diğeri stil.css dosyası olacak.

İndex dosyası içerisine kaç tane bölüm oluşturacak isek bunları belirliyoruz.

Üst ,Sol , Orta ,Sag ve Alt bölüm.

index.html dosyası

<link rel=”stylesheet” type=”text/css” href=”stil.css”/> –> Oluşturduğumuz css dosyasına bağlantı veriyoruz.
<div id=”ust”> Üst Bölüm </div>
<div id=”sol”> Sol Bölüm </div>
<div id=”orta”> Orta Bölüm </div>
<div id=”sag”> Sag Bölüm </div>
<div id=”alt”> Alt Böllüm </div>

 

Stil.css dosyasına geçmeden önce burada kullanacağımız 4 özellik var. Bunlar

width: Genişliğini ayarlıyoruz. Satır olarak düşünürsek bir satır %100 dür. Buna göre diyelim iki bölümden oluşturacağız o zaman 1.kısımı %70 yaparsak 2.kısım %30 olur.

height : Burada yükseklik kısmını ayarlıyoruz.

float: Oluşturduğumuz bölümleri veya nesneleri sağa,sola hizalamak için kullanıyoruz.

background-color: Burada arka plan rengini ayarlıyoruz.

Stil.css dosyası

#ust
{
width:100%;
height:150px;
float:left;
background-color:#0C3;
}
#sol
{
width:20%;
height:400px;
float:left;
background-color:#FF0;
}
#orta
{
width:50%;
height:400px;
float:left;
background-color:#F00;
}
#sag
{ width:30%;
height:400px;
float:left;
background-color:#09F;
}
#alt
{
width:100%;
height:40px;
float:left;
background-color:#333;
}

Bu örneğimizde basit olarak css mantığını anlatmaya çalıştım. Bölüm oluşturduk ileriki konularda bu bölümlerin içerisine resim ,tablo vb. eklemeler yapacağız.

Uygulama2

Css Uygulama Dosyası

219 defa okundu.

  • No Related Post

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Powered by WordPress | Designed by: credit repair | Thanks to st louis web design, essay writing and fire glass
c# örnekleri , csharp örnekleri , c# örnek , C# Örnekleri , örnekleri c# , C# ÖRNEKLERİ
BTT Sınavları

C# Uygulamaları

Müdür Yardımcılığı Sınavına Hazırlık Sayfası

Müdür Yardımcılığı Çalışma Notları

C# Uygulamaları

Yazılı Soruları Php Dersleri Bilişim Teknolojileri Alanı Yazılı Soruları C# Dersleri C# Örnekleri