Css Dersleri
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 Gelişmiş 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'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
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 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
| Ö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
| Ö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
| Ö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
| Ö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
| Ö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
| Ö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 } |
Alıntıdır:
ODTÜ(Enformatik Grubu > HTML Dersleri > Basamaklı Stil Sayfaları (CSS) )
