Css

Css nedir?

CSS Nedir? Cascading Style Sheets

Css’in açılımı ile söze başlayalım. Cascading Style Sheets. Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil. Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. Css bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html’e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor. Ayrıca ileriki konularımızda bahsedeceğimiz üzere bağlantılı stil şablonlar aracılığı ile de birden çok sayfaya etkiyebiliyor. Bu da bize sitenin görünümün değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu imkanı sağlıyor.

Stil Şablon’un tarayıcılara eklenmesinden sonra iki versiyonu çıktı. Bunlar Css 1 ve Css 2. Ayrıca bazı konularda MSIE (Internet Explorer) ve NN (Netscape Navigator) tarayıcıları aynı kodları kabul etmiyorlar. Biz derslerimizde her iki tarayıcıda da etkin olan veya etkin olmayıp dizaynı bozmayan (A:hover gibi) Stil Şablon özelliklerini göreceğiz. Şimdi derslerin içeriğinde neler var onları görelim :

1. Stil Şablon çeşitleri :
Css’in en çok beğenilen yönü istendiğinde sadece bir öğeye etkimesi, istendiğinde tüm sayfaya etkimesi, istendiğinde site içindeki tüm html dosyalarına etkimesidir. Bunlar kısaca Stil Şablonun kullanım çeşitleridir.

2. Html etiketleri ile Css :
Bu dersimizde Html’deki font,background gibi çeşitli özelliklerin Stil Şablon tarafından nasıl belirlenebileceğini göreceğiz.

3. Seçiciler (Selectors) :
Kimi zaman Html etiketlerinden fontu hepimiz kullanırız. Örneğin bir sayfa içerisinde font etiketine birden çok görünüm eklemek isteriz. Bu durumda seçiciler imdadımıza yetişir. Bu dersimizde de seçicilerin nasıl kullanıldığını ve yazım kurallarını öğrenceğiz.

4. Genel kullanım şekilleri :
Bu dersimizde ise A (link) etiketinin çeşitli kullanım biçimleri ile birlikte bir Stil Şablonun nasıl kullanırsak işimize daha fazla yarayacağını göreceğiz. Siz buradaki kullanım tarzına göre Css’i kullanırken kendinize nasıl bir yön izleyeceğinize karar vereceksiniz.

Kaynak:webteknikleri

.........................................

Css ile tekrarlanmayan arka plan resmi yapmak için öncelikle arka plana bir resim atamak gerekir. Bunu background-image : url(resmim); kodu ile yaparız.
Daha sonra bu resmin tekrarlanmasını önlemek için background-repeat:no-repeat komutunu vermek gerekir.
En son olarak resmi ortalamak için background-position : center komutunu vereceğiz

Şu kodda olduğu gibi :

BODY
{
 BACKGROUND-IMAGE : URL(./bayrak.gif);
 BACKGROUND-REPEAT: NO-REPEAT;
 BACKGROUND-POSITION : CENTER;
}

.......................

SORU:

Web sitemde fare işaretlerini kendi belirlemiş olduğum fare işaretçisi ile değiştirmek istiyorum.. Bunu nasıl yapabilirim..

CEVAP:

Merhaba..Bunun için cursor dediğimiz dosya formatında olan ve sonu *.cur ile biten bir resim dosyasına ihtiyaçınız var ve bunları multimedia sitelerinde çok rahat bulabilirsiniz..

<style>
<!-- 
A           { cursor:url('resim.cur'); }
A:link      { cursor:url('resim.cur'); }
A:visited   { cursor:url('resim.cur'); }
A:hover     { cursor:url('resim.cur'); }
BODY        { cursor:url('resim.cur'); }
}
-->
</style>

......................

Web sitemde kaydırma çubuklarını (Scroll bar) nasıl renklendirebilirim..

CEVAP:Web sayfanızın Head Head bölümene aşağıdaki kodu yazınız..

<style>
<!-- 
solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px
solid; BORDER-TOP: #1F9FFF 0px
solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS; FONT-SIZE: 9pt; 
FONT-WEIGHT: bold}body
{	scrollbar-face-color:#CCCCCC;
	scrollbar-shadow-color:#FFFFFF;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-3dlight-color:#FFFFFF;
	scrollbar-darkshadow-color:#FFFFFF;
	scrollbar-track-color:#FFFFFF;
	scrollbar-arrow-color:#CCCCCC;
; font-size: xx-small; border-top-width: thin} 
-->
</style>
Css nedir neler yapabilir
Cascading Style Sheets. 
Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil.

Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. Css bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html’e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor.

Ayrıca ileriki konularımızda bahsedeceğimiz üzere bağlantılı stil şablonlar aracılığı ile de birden çok sayfaya etkiyebiliyor. Bu da bize sitenin görünümün değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu imkanı sağlıyor
HTML etiketleri ile CSS
Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu kullanacağız. Bu yüzden Css ile Html dosyalarımız beraber olacak böylece de konuyu kavrama ve anında uygulamanız daha kolay olacak.
 
Şimdi Css’in etkidiği Html etiketlerini hangi özelliklerini değiştirdiğini görelim.
 
3.1. Font Özellikleri 
Adı üzerinde Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Nasıl kullanıldığına hemen bir bakalım.
 
 
 
 



<html> 
<body> 
<head> 
<title>Css</title> 
<style type="text/css"> 
<!-- 
p 
{ 
font-size : 12pt; 
font-family : Arial; 
font-weight : bold; 
font-style : italic; 
color : #00FFFF; 
} 
--> 
</style> 
<body> 
<p>Web Teknikleri</p> 
</body> 
</html>

Alt özellikleri tanıyalım. 
font-size : Font büyüklüğünü belirtir. 
İsterseniz aşağıdaki gibi standart değerleri seçersiniz; 

xx-large (en büyük ) 
x-large (biraz büyük) 
large (büyük) 
medium (orta) 
small (küçük) 
x-small (biraz küçük) 
xx-small (en küçük) 
isterseniz direkt olarak punto (pt) değerini verebilirsiniz. 

font-family : Font tipini belirler. 

Arial, Courier, Verdana gibi font isimlerini alabilir. 
font-weight : Fontun kalınlı incelik durumunu belirler. 
bold : Fontu kalın yapar. normal : Fontun normal halde olmasını sağlar. 
Bu özellik yazılmadığında normal özellik alınır. 

font-style : Fontun yatık olup olmamasını sağlar. 
italic : Yazının sağa doğru yatık olmasını sağlar. normal : Fontu normal halde olmasını sağlar. 
Bu özellik yazılmadığında normal özellik alınır. 

color : Fontun rengini belirler. 
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir. 

3.2 Text Özellikleri 
Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz. Örnek ile açıklayalım. 


<html> 
<body> 
<head> 
<title>Css</title> 
<style type="text/css"> 
<!-- 
p { 
text-transform : lowercase; 
text-decoration : underline; 
text-align : left; 
line-height : 20px; 
text-indent : 15px; 
} 
--> 
</style> 
<body> 
<p>Web Teknikleri</p> 
</body> 
</html>

Alt özellikleri tanıyalım. 
text-transform : 
lowercase : Yazının tümünün küçük harf olmasını sağlar. 
uppercase : Yazının tümünün büyük harf olmasını sağlar. 
capitalize : Yazının istenilen şekilde kalmasını sağlar. 
text-decoration : 
underline : Yazının altının çizili olmasını sağlar. 
overline : Yazının üstünün çizili olmasının sağlar. 
line-through : Yazının üstünün çizili olmasını sağlar. 
none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar. 
text-align: 
left: Yazının sola bitişik olmasını sağlar. 
center : Yazının ortada olmasının sağlar. 
right : Yazının sağa bitişik olmasını sağlar. 
line-height :Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır. 
text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır. 

3.3 Background Özellikleri 
Background ile html sayfamızın arkafonlarının özelliklerini değiştirmemizi sağlar. 


<html> 
<body> 
<head> 
<title>Css</title> 
<style type="text/css"> 
<!-- 
p { 
background-color :#00ff00; 
background-image : url ("resim_adi.gif"); 
background-position : center; 
background-repeat : repeat-y; 
} 
--> 
</style>   
<body> 
<p>Web Teknikleri</p> 
</body> 
</html>

background-color : Arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererek de tanımlayabiliriz. 

background-image : Arka fonu bir resim dosyası yapmak için kullanılır. url etiketinin içine resim dosyasının yolu ve ismi tam olarak yazılmalıdır. 

background-position : 
left : Arka fondaki resmin sadece sol tarafta olmasını sağlar. 
center : Arka fondaki resmin sadece sol tarafta olmasını sağlar. 
right : Arka fondaki resmin sadece sol tarafta olmasını sağlar. 
background-repeat : Arkafondaki resmin tekrarlanması istendiğinde kullanılır. 
repeat : Tüm yönlerde tekrar edilmesini sağlar. 
repeat-x : X (yatay) yönünde tekrar edilmesini sağlar. 
repeat-y : Y (dikey) yönünde tekrar edilmesini sağlar. 
no-repeat : Resmin tekrar edilmeyerek bir kere gösterilmesini sağlar. 

3.4 List Özellikleri 
Bu Css özelliği <ul> ve <li> html etiketleri ile oluşturduğumuz listelerin özelliklerini belirlemek için kullanılır. 


<html> 
<body> 
<head> 
<title>Css</title> 
<style type="text/css"> 
<!-- 
li { 
list-style-type : circle; 
list-style-position : inside; 
list-style : decimal; 
list-style-image : url ("resim.gif"); 
} 
--> 
</style> 
<body> 
<ul> 
<li>Web Teknikleri 
<li>Html 
<li>Javascript 
<li>Css 
<li>Web Grafik 
</ul> 
</body> 
</html>

list-style-type : 
disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar. circle : Liste biçiminin çember şeklinde olmasını sağlar. square : Liste biçiminin kare olmasını sağlar. decimal : Liste biçiminin rakamlardan oluşmasını sağlar. 
lower-roman : Liste biçiminin i,ii,iii, gibi roma rakamlarının küçük harfi olmasını sağlar. 
upper-roman: Liste biçiminin I,II,II gibi roma rakamlarının büyük harfi olmasını sağlar. lower-alpha : Liste biçiminin a,b,c şeklinde olmasını sağlar. upper-alpha: Liste biçiminin A,B,C şeklinde olmasını sağlar. none : Listenin imgesiz olmasını sağlar. 
list-style-position : 
inside : Listenin ikinci satırının en soldan başlamasını sağlar. Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar. 
list-style-image : Liste biçiminin resim olmasını sağlar. 

3.5 Position Özelliği 
Html’de kullandığımız Layer (katman) etiketlerinin html üzerindeki yerleştirme işlemi için kullanılır. Hemen bir örnek ile görelim. 


<html> 
<head> 
<title>Css</title> 
<style type="text/css"> 
<!-- 
div { 
position:absolute; 
top:20px; 
left:10px; 
width:200px; 
height:200px; 
clip:auto; 
overflow:scroll; 
z-index:auto; 
visibility:visible; 
} 
--> 
</style> 
<body> 
<div> 
Web Teknikleri<br> 
Html<br> 
Javascript<br> 
Css<br> 
Grafik<br> 
</div> 
<p> Web Teknikleri 
</body> 
</html>


position : 
absolute : Katmanın yerinin kesin olarak belirlenmek istendiğinde kullanılır. 
relative : Katmanın yerinin göreli(diğer öğelere göre değişebilen) olarak belirlenmek istendiğinde kullanılır. 
static : Katmanın yerinin sabit olarak belirlenmek istendiğinde kullanılır. 
top : Katmanın üst kısımdan kaç piksel aşağıda olması gerektiğini belirler. 
left : Katmanın sol kısımdan kaç piksel aşağıda olması gerektiğini belirler. 
width : Katmanın genişliğinin kaç piksel olacağını belirler. 
height : Katmanın boyunun kaç piksel olacağını belirler. 
clip : Katmanın görünmesi istenen bölgeyi içeren kutucuk. 
overflow : Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler. 
auto : Otomatik olarak belirlenir. 
scroll : Kaydırma çubukları ekler. 
visibility : Katmanın görünebilirlik ayarı yapar 
visible : Görünür hale getirir. 
hidden : Gizler. 
z-index : Katmanın sayfa üzerindeki sıra sayısı.