STİL ŞABLONLARI
Stil şablonları (CSS-Cascading Style Sheets),
hazırlamakta olduğunuz sayfalar için istenildiği zaman kullanılmak üzere şablonlar
oluşturmaya yarar. Html, etiket türünde bir yazım dili olduğundan tasarım
konusunda çoğu zaman yetersiz kalabiliyor. Bir web sayfası hazırlanırken çok
sayıda renk veya font kullanmamız estetik açısından gerekli olabilmekte. Html
ile bunları her defasında ayrı ayrı tanımlamak gerekirken, CSS bir defada
tanımlayıp tüm sayfada kullanabilmemize olanak sağlar. Böylelikle bir
değişiklik yapmamız gerektiğinde tüm sayfalarda değişiklik yapmak yerine,
mevcut CSS üzerinde değişiklik yaparak tüm sayfalara etki etmesi
sağlanmaktadır. Bu da işimizi oldukça kolaylaştırır.
Css
kodları, body veya head bölümlerinde yer almak üzere Html kodlarının içine
yazılarak kullanılır. Ayrıca harici CSS dosyaları oluşturarak da istenildiği
zaman html dosyasında kullanılmak üzere de çağrılabilme özelliğine sahiptir.
Stil Şablonlarının Komut Yapısı
Style dosyaları html
kodlarının <head>…</head> bölümünde tanımlanır.
Kullanımı:
<style
type="text/css">…..</style> şeklindedir.
Stil Şablonlarının Çeşitleri
Css kodlarının en önemli
özelliklerinden birisi farklı türlerde kullanılabilmesidir. İsteğe göre tek bir
ögeye, tüm sayfaya veya site içerisinde kullanılan tüm html dosyalarına etki
edebilme özelliğine sahiptir. Bu özellikler Yerel, Genel ve Harici CSS olarak adlandırılmaktadır.
Yerel CSS, html
belgesinin <body> bölümüne yazılır ve bir defaya mahsus olmak üzere
sadece yazıldığı yerde etkili olur.
yerel.html kodları:
<html>
<head>
</head>
<body>
<h3
style=font:14pt;color:red>Yerel CSS</h3>
</body>
</html>
Genel CSS, html
belgesinin <head> bölümüne yazılır ve mevcut html dosyasının tamamı
üzerinde etkili olur.
genel css.html kodları:
<html>
<head>
<style type="text/css">
h3 {font-size=15pt;color:blue}
</style>
</head>
<body>
<h3>Genel CSS </h3>
</body>
</html>
Harici CSS, Global stil şablonu
olarak da adlandırılır. Hazırlanmakta olan sitenin aynı özelliklerde olmasının
istenmesi durumunda kullanılır ve sitedeki tüm sayfalara etki eder. Harici CSS
de kodlar ayrı bir dosyaya yazılıp uzantısı .css olacak şekilde
kaydedilir. Daha sonra html dosyası içerisinde yer alan
<head>….</head> etiketleri arasına;
<link
rel="stylesheet" type="text/css"
href="dosya_ismi.css"> şeklinde yazılarak çağrılır.
haricicss.html kodları:
Aşağıda verilen kodları
kullanmakta olduğunuz editöre yazıp stil.css
olarak kaydediniz.
h1 {font-size:10pt;color:red}
h2 {font-size:14pt;color:green}
h3 {font-size:20pt;color:blue}
Aşağıdaki kodları
kullanmakta olduğunuz editöre yazıp haricicss.html olarak kaydediniz.
<html>
<head>
<link rel="stylesheet"
type="text/css" href="stil.css">
</head>
<body>
<h1>Harici
CSS1 </h1>
<h2>Harici
CSS2 </h2>
<h3>Harici
CSS3 </h3>
</body>
</html>
Kodlar kaydedilip
çalıştırıldığında tarayıcıdaki görüntüsü aşağıdaki gibi olacaktır.
 |
| Tarayıcı görünümü |
Seçiciler (Selectors)
Seçiciler CSS’nin en çok kullanılan
elemanlarındandır. <h1>, <h2>,<h3> gibi etiketlerin
özelliklerini değiştirmeden onlara yeni özellikler eklemeyi sağlar. Ayrıca
istediğimiz bir kelimeye, style özellikleri atayarak istenildiği zaman
çağırmaya da olanak sağlar.
Id seçicisi ve sınıf seçicisi olmak
üzere iki çeşit seçici vardır.
İd Seçicileri (ID
Selectors): Html belgesinde kendi tanımlayıcı adlarına gönderme yaparak
herhangi bir Html etiketine stil vermek amacıyla kullanılırlar. Id seçicilerini
tanımlayıcı adlarının önündeki “#“ işaretinden tanırız.
seçiciler.html kodkarı:
<html>
<head>
<style
type="text/css">
#idsecici{
background:red;
font-weight=bold;
color:blue;
}
</style>
</head>
<body>
<u id=idsecici>DENEME </u>
</body>
</html>
Sınıf Seçicileri
(Class Selectors): Yazmış olduğunuz kodlarda kullandığınız <h1> gibi
etiketlerin tümünün aynı özellikte olmasını istemediğiniz durumlar olabilir.
Sınıf seçicileri bu tür durumlarda kullanılır.
secicilerclass.html kodları(class):
<html>
<head>
<style
type="text/css">
.mavi{
color:blue
}
</style>
</head>
<body>
<h1>Başlık</h1>
<h1
class=mavi>Başlık</h1>
</body>
</html>
yerelcsstekrar.html kodları:
P etiketi ile bir
paragraf yazın ve css ile kalın yapın
<html>
<head>
</head>
<body>
<p style=font-weight:bold>Ekle sekmesinde, galeriler
belgenizin genel
görünümünü düzenlemek için tasarlanan öğeleri eklerler. Bu galerileri,
tablolar, üstbilgiler, altbilgiler, kapak sayfaları ve diğer belge
yapı taşlarını eklemek için kullanabilirsiniz. Resimler, kartlar veya
grafikler oluşturduğunuzda, aynı zamanda geçerli belge
görünümünüzü
de düzenlerler. </p>
</body>
</html>
genelcsstekrar.html kodları:
<html>
<head>
<style type="text/css">
h2 {
font-size:14pt;
color:red;
 |
| Css Uygulama Görünümü |
font-family:Arial;
}
u{
background:yellow;
font-weight:bolder;
}
</style>
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h2>Başlık 2</h2>
<p>Başlık 3 </p>
<h2>Başlık 4</h2>
<u>Deneme Yazıları</u>
</body>
</html>
haricicsstekrar.html ve stiltekrar.css
kodları:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="stiltekrar.css">
 |
| Uygulama görünümü |
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h2>Başlık 2</h2>
<p>Başlık 3 </p>
<h2>Başlık 4</h2>
<u>Deneme Yazıları</u>
</body>
</html>
idcsstekrar.html kodları:
<html>
<head>
<style type="text/css">
h2 {
font-size:14pt;
 |
| Uygulama tasarım görünümü |
color:red;
font-family:Arial;
}
u{
background:yellow;
font-weight:bolder;
}
#secici{
background:blue;}
.secici{
background:green;
}
</style>
</head>
<body>
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h2>Başlık 2</h2>
<p>Başlık 3 </p>
<h2>Başlık 4</h2>
<u id=secici>Deneme Yazıları 1</u>
<u>Deneme Yazıları 2</u>
<u class=secici>Deneme Yazıları 3</u>
</body>
</html>
geneluygulamacss.html kodları:
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="geneluygulamastil.css"> | |
| <style type="text/css"> | |
| h3{font-size:20pt;font-weight:bold;color:red} | |
| </style> | |
| </head> | |
| <body> | |
| <table border="1" align="center" height="600" width="960"> | |
| <tr> | |
| <td bgcolor="lightgray" align="center" height="100" width="960" colspan="2"> | |
| <font size="7"><a href="par1.html" target="misyon">MİSYON</a> | <a href="par2.html" target="vizyon">VİZYON</a></font></td> | |
| </tr> | |
| <tr> | |
| <td bgcolor="lightyellow" align="center" height="420" width="960" valign="top"> | |
| <h3>MİSYON</h3> | |
| <iframe name="misyon" src="" height="420" width="480"> | |
| </iframe> | |
| </td> | |
| <td bgcolor="lightgreen" align="center" height="420" width="960" valign="top"> | |
| <h3>VİZYON</h3> | |
| <iframe name="vizyon" src="" height="420" width="480"> | |
| </iframe> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td colspan="2" bgcolor="lightgray" align="center" height="80" width="960" valign="top"> | |
| <a href="geneluygulamacss.html" ><font size="7">TEMİZLE</font></a> | |
| </td> | |
| </tr> | |
| </body> | |
| </html> | |
Frameler başlangıçta boş
gelecek ve menülere tıklandığında ilgili bölümde paragraflar açılacaktır. Başlıklarda
h3 için genel css tanımlanacak ve paragraflarda harici css tanımlanacak.
 |
| Css uygulaması tarayıcı görünümü |
0 yorum :
Yorum Gönder