Oca 10

CSS ile Kenar Ovalleştirme

cssnedir

Css ile oluşturduğumuz bölümlere kenarlık ekleyebilmemiz mümkün olmaktadır. Ayrıca eklediğimiz kenarlıkları ovalleştirebilmemiz de mümkündür. Bu işlem için border-radius özelliğini kullanılmaktadır. Bu konuyu daha iyi anlamak için aşağıdaki komutu inceleyebilirsiniz;

.ovalornek {
height: 50px;
width:100px;
background-color:green;
border: 10px solid #d3d3d3;
border-radius: 20px;
}

Yukarıdaki örnekte oluşturduğumuz dive eklediğimiz kenarlığı 20px kadar ovalleştirmiş olduk.

Oca 10

CSS Div Kenarlık

cssnedir

Css’te oluşturduğumuz divlerin kenarlıklarını farklı şekillerde yapabilmemiz mümkündür. Bu işlemin nasıl yapıldığını aşağıdaki örnekten inceleyebilirsiniz;

<style type="text/css">
.deneme {
width:500px;
height:100px;
border-style:dashed;
 
}
</style>
 
<html>
<div class="deneme"></div>

Yukarıdaki örnekte border-style özelliği ile div kenarlığına dashed özelliğini tanımlamış olduk.

border-style özelliğinin alabileceği bazı değerler şu şekildedir;

Dotted
Dashed
Solid
Double
Groove
Ridge
İnset
outset

Not: Örnek kodları notepad dosyasının içine ekleyip dosyayı .html olarak kaydettiğinizde komutun çıktısını görebilirsiniz.

Oca 05

CSS Açıklama Satırı Ekleme

cssnedir

Programlama yaparken yazdığımız kodların aralarına açıklama satırları eklemek ileride yaşanabilecek herhangi bir karışıklığı önlemede önemli bir işlem olmaktadır. Açıklama satırlarını genel olarak programın bazı bölümlerine eklediğimiz kodların hangi amaçla kullandığımızı belirtmek için kullanmaktayız.

Css programlama dilinde /*  */ karakterlerin arasına yazılan yazılar açıklama satırı olarak yorumlanmaktadır ve yazdığımız kodda herhangi bir işlem yapmamaktır. Konuyu daha iyi anlamak için aşağıdaki komutu inceleyebilirsiniz;

body{
background-color:red;
/* Bu kod ile web sitenin arkaplan rengini belirledim. */
}

Ortak olarak çalışılan bir proje yapıyorsanız bu özelliği kullanmanızı kesinlikle tavsiye ederim.

Ara 05

CSS Reset Nedir? Nasıl Kullanılır?

cssnedirWeb tarayıcıların kendilerine ait varsayılan css ölçütleri vardır. Css ile bir arayüz kodladığımız zaman tarayıcılarda olan bu farklılık yüzünden her tarayıcıda farklı farklı boşluklar gözükebilir. İşte bu durumda bizim yardımımıza ccs reset koşmaktadır. Kısaca ccs reset ile tüm tarayıcıların varsayılan ölçülerini kendi istediğimize göre şekillendirebiliriz. Css reseti kullanmak için bir tane reset.css adında dosya oluşturup bu dosyanın içine aşağıdaki komutları eklememiz yeterli olacaktır;

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;list-style:none;list-style-type:none;text-decoration:none;font-family:'Open Sans', sans-serif;}

Tekrar görüşmek üzere. Şimdilik hoşçakalın.

Ara 11

CSS ile Daire Yapmak

cssnedirCss ile daire şekli yapmak için hangi komutarı yazmamız gerekeceğini bu konumuzda öğreneceğiz. Bu işlemi yapmak için aşağıdaki şekilde bir class oluşturmamız yeterlidir;

.dairesekli {
 background-color: red;
 height: 170px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 170px;
}

Yukarıda tanımladığmız sınıfı html sayfamızdaki dive eklediğimizde dairemiz gözükecektir. Css konularımıza devam edeceğiz. Bizi takip etmeye devam edin.

Kas 19

CSS ile Arkaplan Resmi Ekleme

cssnedirCss kullanarak web sitemize arkaplan resmi ve rengi eklememiz mümkündür. Arkaplan resmi eklemek için background-image özelliğini, arkaplan rengi için ise background-color özelliğini kullanmaktayız. Şimdi konumuzu daha iyi anlamak için bir tane örnek uygulama yapalım;

<html>
<head>
<title>Arkaplan</title>
<style type="text/css">
body{
    background-image: url(arkaplanresmi.png); 
    background-color: red;
}
</style>
</head>
<body>
<p>Bu yazı sitemizde gözükecektir</p>
</body>
</html>

Burada background-image bölümünde arka plan resim dosyasının konumunu belirttik. Background-color bölümünde ise sayfamızın arkaplan resmini red (kırmızı) yaptık. Css konularımıza devam edeceğiz. Bizi takip etmeye devam edin.

Kas 13

CSS ile Yazıları Tersten Yazdırma

cssnedirCss ile yazılarımızı tersten yazdırmamız mümkündür. Şimdi bu işlemi yapmak için örnek bir uygulama yapalım;

&lt;html&gt;
<head>
<style>
.tersyazi {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
}
</style>
</head>
<body>
<p class="tersyazi">www.bilisimzirve.com sitesine hoşgeldiniz...</p>
</html>

Bu şekilde yazılarımızı tersten yazdırabiliriz. Css konularımıza devam edeceğiz. Bizi takip etmeye devam edin.

Kas 10

CSS ile Yazı Boyutu Ayarlama

cssnedirCss ile yazı boyutunu ayarlamamız mümkündür. Bu işlem için font size özelliğini kullanmaktayız. Şimdi bu özelliğin kullanımını örnekle açıklayalım;

p {font-size: 18px;}

Bu komutu html sayfalarımıza eklediğimizde yazılarınız 18 px boyutunda olacaktır. Bu komutu sayfalarımızda ve sayfalarımızda istediğimiz bölümlerde kullanabiliriz. Css’in kullanımı ile ilgili makalelerimize css katagorisinden ulaşabilirsiniz. Şimdilik hoşçakalın.

Kas 10

CSS’de Link Rengi Değiştirme

cssnedirCss ile sayfamızda bulunan linklerin rengini değiştirmemiz mümkündür. Bu işlemin nasıl yapıldığını öğrenmeden önce css ile link yapısının nasıl olduğunu öğrenelim;

A:link = Linklerin sayfada görünümü tanımlamak için kullanılan komut,
A:Visited = Ziyaret edilen linklerin görünümü tanımlamak için kullanılan komut,
A:active = Sayfa içindeki aktif linklerin görünümü tanımlamak için kullanılan komut,
A:hover = linkin üzerine mause gelindiğinde görünümünü tanımlamak için kullanılan komut.

Linkin rengini değiştirmek için yukarıdaki özelliklere color özellğini tanımlamamız gerekmektedir. Linkin arkaplan rengini değiştirmek için background özelliğini tanımlamamız gerekmektedir. Şimdi bu kodları kullanarak örnek bir sayfa oluşturalım;

<html>
<head>
<style>
A:link {background:red; color: yellow;}
A:visited {background:red; color: blue;}
A:active {background:red; color: black;}
A:hover {background:red; color: grey;}
</style>
</head>
<body>
<a href="http://www.bilisimzirve.com">Bilgisayar Dersleri</a>
</body>
</html>

Tekrar görüşmek üzere. Şimdilik hoşçakalın.

Kas 07

CSS ile Büyük ve Küçük Harfe Dönüştürme

cssnedirCss ile yazılarımızı büyük harfe veya küçük harfe dönüştürmemiz mümkündür. Bu işlem için kullandığımız kod yapısı aşağıdaki şekildedir;

text-transform: lowercase;  Yazıların hepsini küçük harf yapar.
text-transform: uppercase; Yazıların hepsini büyük harf yapar.
text-transform: capitalize;   Yazıların baş harfini büyük yapar

Örnek;

<html>
<head>
<style>
p.buyukharf {text-transform:uppercase;}
p.kucukharf {text-transform:lowercase;}
p.basharfbuyuk {text-transform:capitalize;}    
</style>
</head>
<body>
<p class="buyukharf">bilisimzirve</p>
<p class="kucukharf">BİLGİSAYAR DERSLERİ</p>
<p class="basharfbuyuk">bilisimzirve</p>
</body>
</html>

Css ile bu şekilde yazılarımızı büyük yada küçük harfe çevirebiliriz. Css konularımıza devam edeceğiz. Bizi takip etmeye devam edin.