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ı.
|