T.C.S.F.B.A.T - Alılı Tilki

css

Temel HTML   İleri HTML   Basamaklı Stil Sayfaları (CSS)   Web Renkleri

Basamaklı stil sayfaları (cascading style sheets, CSS) stil tabanlı biçimlendirmeleri belirlerken kullanılan koddur. Web sayfası ya da sayfa kümelerinin biçimlerini standartlaştırmaya yardımcı olur. Stil sayfasına etiketler için belirlenen stiller yazılarak HTML sayfasındaki etiketler biçimlendirilebilir.

Stil Sayfaları; Katıştırılmış (embedded) ve Harici (external) Stil sayfaları olmak üzere ikiye ayrılmıştır.

Katıştırılmış Stil Sayfaları HTML sayfasının Başlık bölümünün içine <style>..</style> arasına yazılır ve sadece o belgedeki biçimlendirmeyi sağlar. Örneğin;

<html>
<head>
<style>
p{
color:red
}
</style>
</head>

Harici Stil Sayfaları .css uzantısı ile kaydedilmiş dosyalardır ve HTML sayfasının head bölümünden aşağıdaki gibi link verilerek ulaşılır. Dosya ismini stil.css varsayalım.

<link rel="stylesheet" href="stil.css" type="text/css">

Ayrıca İleri HTML Dersinin Stiller bölümünde anlatıldığı gibi, etikete style bağımsız değişkeni eklenerek o etikete uygulanması istenen stiller belirlenebilir.

Başa Dön


CSS KURALLARI

CSS'nin 3 bölümden oluşan bir yazım mantığı vardır: Her CSS kuralı bir selector (seçici) ve bir tanımlama bölümüne sahiptir. Tanımlama bölümü bir özellik ve bir değerden meydana gelir.

selector { özellik : değer}

Örnek olarak:

body {color: red } veya p {font-size: 10px} div{font-color: blue}

Eğer bir etiket için birden fazla stil kuralı belirlemek istenirse, kurallar noktalı virgülle ayrılır:

body {color: red ; margin: 0px ;font-size: 10px}

Birkaç etikete aynı stili vermek için gruplama yapılabilir. Aşağıdaki örnekte tüm başlıklar gruplanarak kırmızı olmuştur.

h1,h2,h3,h4,h5,h6 {color:red }

Başa Dön


BİÇİMLENDİRME SINIFLARI VE KİMLİKLER

Sınıflar

İstenen etiketleri isteğe bağlı oluşturulan stillerle biçimlendirmek için sınıflar belirlenir. Sınıflar T ürkçe karakter içermemek şartıyla istenen ismi alabilir. CSS belgesinde sınıfı tanımlamak için sınıf isminin önüne nokta konur. Örnek olarak belirlenen sagayasla sınıfı ile class="sagayasla" değişkenine sahip tüm etiketlerin içindeki metinler sağa yaslanmış olacaktır.

.sagayasla {text-align: right }

Aşağıda ise h4 ve p etiketlerine class="sağayasla" değişkeni eklendiğinde başlığın ve paragrafın sağa yaslanmış olduğu görülebilir.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü

<h4 class="sagayasla">Sağa yaslanmış başlık</h4>
<p class="sagayasla" >Sağa yaslanmış paragraf</p>

Saga yaslanmış başlık

Saga yaslanmış paragraf

Kimlikler

Kimliklerin sınıflardan farkı, sınıflar birden fazla etikete atanabilirken kimliklerin sayfada sadece bir kez kullanılabilmesidir. CSS belgesinde kimliği tanımlamak için önüne # konur. Aşağıda örnek olarak altbolum kimliği oluşturulmuştur.

#altbolum{color:blue; text-align: center }

Aşağıda sayfanın alt kısmı için oluşturulan bölüme id="altbolum" değişkenini ekendiğinde metnin mavi ve ortalanmış olduğu görülebilir.

HTML etiketi Etiketin Web Sayfasındaki görüntüsü

<div id="altbolum">Her hakkı saklıdır.Bilgi için xxx@xxx.com </h4>

Her hakki saklıdır.Bilgi için xxx@xxx.com

Başa Dön


PSEUDO SINIFLARI

Pseudo sınıfları bazı etiketlere özel efektler eklemek istendiğinde kullanılır. En sık kullanımı, link vermek için kullanılan <a> etiketinde görülebilir. Yazım mantığı şöyledir.

selector:pseudo sınıfı { özellik : değer}

selector.sınıf:pseudo sınıfı { özellik : değer}

Linkler renklendirmek istenildiğinde, aşağıdaki stil kodlarının .css uzantılı dosyaya veya Başlık kısmındaki <style>..</style> etiketleri arasına konulması gerekir

a:link {color: navy}     /* ziyaret edilmemiş link rengi*/  
a:visited {color: green} /* ziyaret edilmiş link rengi*/
a:hover {color: red} /* fare üstüne geldiğindeki renk */
a:active {color: yellow} /* seçilmiş link */
Eğer linkler için bir sınıf oluşturmak istenirse (aşağıdaki örnekte siyah sınıfı oluşturuluyor);
a.siyah:link {color:black}
a.siyah:visited {color:black}
a.siyah:hover {color:gray}
a.siyah:active {color:black}

kodlarını kullanılır. İstenen linke bu sınıfı atamak için link etiketine(<a>) class="siyah" değişkeni eklenir.

Başa Dön


ARKAPLAN ÖZELLİKLERİ

Özellik Açıklama Aldığı Değerler Örnek Kullanım
background-color Etiketin arkaplanına renk atar. Renk değerleri

body{
background-color: red
}

background-image Etiketin arkaplanına resim atar. Resim dosyası adresi table{
background-image: url(resim.jpg)
}
background-repeat Etiketin arkaplanına eklenen resmin tekrar edip etmeyeceğinibelirler. repeat,
repeat-x,
repeat-y,
no-repeat
body{
background-image: url(resim.jpg);
background-repeat: repeat
}
background-attachment Arkaplana eklenen resmin sayfa ile kaymasını veya sabit kalmasını sağlar.

scroll,
fixed

body{
background-image: url(resim.jpg);
background-attachment: scroll
}
background-position background-image ile belirlenen resmin başlangıç noktasını belirler. top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-poz y-poz

body{
background-image: url(resim.jpg);
background-attachment: scroll background-image: top left
}

body{
background-image: url(resim.jpg);
background-attachment: scroll background-image: 10% 20%
}

Başa Dön


METİN ÖZELLİKLERİ

Özellik Açıklama Aldığı Değerler Örnek Kullanım
color Metnin rengini belirler. Renk değerleri p{ color: red}
direction Metnin yönünü belirler. ltr,(soldan sağa)
rtl (sağdan sola)
.sagdansola { direction:rtl
}
letter-spacing Harfler arasındaki boşluk değerini belirler. normal
uzunluk

p{letter-spacing: normal
}
p.bosluk {letter-spacing: 5 px
}

text-align Metnin etiketin içindeki hizasını belirler.

left
right
center
justify

p.solayasla{text-align: left
}
text-decoration Bu özellik metinlere özel işaretler koymamızı sağlar. none
underline
overline
line-through
blink

.alticiz{text-decoration: underline
}

text-indent Metni ilk satırda sola kaydırmak için kullanılır. uzunluk
%
p{text-indent: 10 px}
p{text-indent: 10 %}
text-transform Metnin büyük-küçük harf çevrimi için kullanılır. none
capitalize (ilk harfler büyük)
uppercase (hepsi büyük)
lowercase (hepsi küçük)
.ilkharfbuyuk { text-transform: capitalize}
word-spacing Kelimeler arasındaki boşluk değerini belirler. normal
uzunluk
span{word-spacing: normal}
div{word-spacing: 10px}

Başa Dön


FONT ÖZELLİKLERİ

Özellik Açıklama Aldığı Değerler Örnek Kullanım
font-family Metinlerin kullanılacağı font ailesini belirlemek için kullanılır.

font aile ismi (herhangi bir font ailesi ismi kullanılabilir.)
soysal aile ismi

p {font-family : Verdana, Arial, Helvetica, sans-serif;
}
font-size Fontun boyutunu belirler. xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
uzunluk
%
p{font-size:xx-small}
div{font-size:10 px}
p.buyukfont{font-size:150%}
font-style Fontun biçimlendirmesini belirler. normal
italic
oblique

.italik{font-style:italic}

font-weight Fontun kalınlık incelik durumunu belirler.

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

.kalinyaz {font-weight: bold}

Başa Dön


KENARLIK ÖZELLİKLERİ

Özellik Açıklama Aldığı Değerler Örnek Kullanım
border-style Kenarlık stilini belirlememizi sağlar none
hidden
dotted (noktalı)
dashed (kesik çizgili)
solid (kesiksiz)
double (çift çizgi)
groove (yivli)
ridge (çıkıntılı)
inset (içe doğru)
outset (dışa doğru)
table{border-style: solid}
border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır. border-style ile aynı değerleri alır. td {border-top-style: none}
border-width Kenarlık kalınlığı için kullanılır. thin
medium
thick
uzunluk

td {border-width:thin}

border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

border-width ile aynı değerleri alır.

.ustkenar{border-top-width: 2px}
border-color Kenarlık rengini belirlemek için kullanılır. Renk değerleri

table.yesilrenk {border-color: #00FF66}

border-top-color, border-right-color, border-bottom-color, border-left-color border-color özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır. Renk değerleri .sagtaraf{border-right-color: #CCFF00}

Başa Dön


MARGIN VE PADDING OZELLİKLERİ

Özellik Açıklama Aldığı Değerler Örnek Kullanım
margin Etiketin etrafındaki boşluk olarak tanımlanır. auto
uzunluk
%
p {margin:auto}
td {margin:10px}
table {margin:10%}
margin-top,
margin-right,
margin-bottom,
margin-left
margin özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır. margin ile aynı değerleri alır. td{margin-top:10px}
padding Padding içerik ile kenarlık arasındaki boşluk olarak tanımlanır. uzunluk
%
table {padding:10px}
td {padding:10%}
padding-top,
padding-right,
padding-bottom,
padding-left
Arkaplana eklenen resmin sayfa ile kaymasını veya sabit kalmasını sağlar.

padding ile aynı değerleri alır.

td {padding-top:10px}

Başa Dön


LİSTE OZELLİKLERİ

Özellik Açıklama Aldığı Değerler Örnek Kullanım
list-style-type Listedeki işareti belirler. none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 
ul {list-style-type:disc}

ol{list-style-type:upper-roman
}
list-style-image Listede işaretin yerine resim koymak için kullanılır. Resim dosyası adresi ul {list-style-image: url(liste.jpg)}
list-style-position Liste işaretinin yerini belirler. inside
outside
ul{list-style-position: nside }

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=