Css

CSS Background Özellikleri

CSS Background ile html sayfamızın arkafonlarının özelliklerini değiştirmemizi sağlar. Örnek:

<html>
<body>
<head> <title>Css</title>
<style type="text/css">

</style>
<body>
<p>Web Dersleri</p>
</body> </html>

background-color :

arka fonun rengini belirler. Css’te renkleri blue, red gibi tanımlayabileceğimiz gibi Html kodunu vererekte 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

Devamını Oku

CSS Global Stil Şablon

Global Stil Şablonları bir önceki örnekte yaptığımız h2 etiketinin tüm sayfada aynı özellikte olması istendiğinde kullanılır. Bunu için Stil Şablon özellikleri sayfanın başlangıcında (<head></head> etiketleri arasında) tanımlanmalıdır. Örnek ile biraz daha ayrıntılı inceleyelim.

Html Etiketi	Etiketin Web Sayfasındaki görüntüsü
<html> <head> <title>Css</title> <style type="text/css"> <!-- h2 {font-size:30pt; color:red} --> </style> </head> <body> <h2>Web Bilgileri</h2> </body> </html>	Web Bilgileri

Yukarıdaki örnekte Sayfa içerisinde kullanacağımız tüm h2 etiketlerinin özelliklerini sabitlemiş olduk. Yani sayfa içerisinde nerede kullanırsanız kullanın h2 etiketinin stil özellikleri hep aynı olacaktır. Yazım kurallarına biraz değinirsek, Stil Şablon tanımlamaları <head> </head> etiketleri arasında <style type="text/css"> ile başlayıp </style> ile bitmelidir.  etiketi ile son bulur.

Bağlantılı Stil Şablon

Global stil şablonu ise sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanabiliriz. Şöyleki;

Her zaman olduğu gibi stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız. Fakat bunu html dosyamızın içerisinde değil de boş bir sayfaya yazarız. Sonra onu kaydederken css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine <head> </head> etiketleri arasına <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> şeklinde ekleriz. Şimdi hemen bir örnek verelim.

h1 {font-size:13pt; color:green}h2 {font:20pt; color:blue}

h3 {font-size:15pt; color:red}

Bu dosyamızı stil.css olarak kaydedelim. Şimdi de html dosyamıza gelelim. Html dosyamızın kodları da şu şekilde olmalıdır.

Html Etiketi	Etiketin Web Sayfasındaki görüntüsü
<html> <head> <title>Css</title> <link rel="stylesheet" type="text/css" href="stil.css"> </head> <body> <h1>Web Bilgileri</h2> <h2>Web Bilgileri</h2> <h3>Web Bilgileri</h2> </body> </html>	Web Bilgileri Web Bilgileri Web Bilgileri

Html dosyasının kodları arasında geçen <link rel="stylesheet" type="text/css" href="stil.css"> kodu stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar. Bu kodu istediğimiz diğer html dosyalarına da eklediğimizde orada da kullanabiliriz. Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta tanımladığımız stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem de paradan :) Biz bundan sonraki tüm Stil Şablon örneklerimizde Global Stil Şablonu kullanacağız. Bu yüzdenCss 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.

Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta tanımladığımız stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem de paradan :) Biz bundan sonraki tüm Stil Şablon örneklerimizdeGlobal 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 Htmletiketlerini hangi özelliklerini değiştirdiğini görelim

Devamını Oku

Yerel Stil Şablon Kullanımı

Yerel Stil Şablonu

Css giriş sayfasında belirttiğimiz gibi Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde(yerel) etkiler. Şimdi bir örnek verelim

Html Etiketi

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

<html>
<head>
<title>ilk örnek</title>
</head>
<body>
<h2>Web Bilgileri</h2>
<h2 style=font-size:15pt; color:red>Web Bilgileri</h2>
</body>
</html>

Web Bilgileri

Bu örneğimizi css.htm adıyla kaydedip tarayıcı yardımıyla açtığımızda iki tane Web Bilgileri yazısıyla karşılacağız. Fakat gördüğünüz gibi bunların yazım tarzı farklı olacak. Çünkü biz ikinci h2 adlı etiketimize etkimek üzere bir stil şablon ekledik.

Devamını Oku

« 1 »