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">

</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">

</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">

</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">

</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">

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