html den css style dosyasi

**boncuks** · 16.01.2009 01:50

CSS de daha cok cok yeni oldugum icin ve forumu ne kadar dolassamda iliskili bilgiye ulasamadigim icin sormak istedim elimdeki HTML sayfasini style.CSS olarak kullanabilicek sekilde nasil kayit edebilirim? yada boyle birsey mumkunmudur?

**erdinç** · 16.01.2009 02:47

Selamlar,

Sorunu tam anlamadım ama yardımcı olabilecek birkaç bilgi şu şekilde:

1. Eğer elindeki HTML dosyasını style.CSS dosyası ile nasıl ilişkilendiririm diyorsan şu şekilde oluyor:
Diyelim ki style.CSS dosyası ile HTML dosyası ile aynı klasörde olsun. Bu durumda HTML dosyasının head tagları arasına şunu yazman lazım:

Kod:

<link rel="stylesheet" type="text/CSS" href="styles.CSS" />

Eğer style dosyan başka bir klasörün içindeyse, örneğin style.CSS dosyan CSS isimli bir klasörün içinde duruyorsa, o zaman verdiğin link şu şekilde değişiyor:

Kod:

<link rel="stylesheet" type="text/CSS" href="CSS/styles.CSS" />

Diyelim ki htm dosyan bir klasörün içinde, CSS dosyan da başka bir klasörün içinde olsun. Bu durumda şu şekilde link veriyorsun:

Kod:

<link rel="stylesheet" type="text/CSS" href="../CSS/styles.CSS" />

2. Bir de CSS kodlarını HTML dosyasının içinde tutma seçeneği var. Yani ayrı bir CSS dosyası kullanmak yerine CSS kodlarını HTML dosyasının içine yazabilirsin. Head tagları arasına yazılıyor. Örnek:

Kod:

<head>
<style type="text/CSS">
#kutu1 {
	background-color: #FF0000;
	color: #0000FF;
	height: 150px;
	width: 250px;
}
</style>
</head>
<body>
<div id="kutu1">test</div>
</body>
</HTML>

3. Eğer elimde bir yerden kopyaladığım CSS kodları var ama bunu CSS dosyası haline nasıl dönüştürürüm diyorsan onu da şu şekilde yapabilirsin. Örneğin notepad'i açıp kodları yapıştırıp sonra style.CSS olarak kaydedebilirsin. CSS dosyalarında HTML dosyasında olduğu gibi head, body vesaire bölümler olmaz. Sadece CSS kodları doğrudan yazılır.

Hangi programı kullandığını yazarsan daha ayrıntılı yardım alabilirsin. En çok kullanılan program Dreamweaver ve Dreamweaver özellikle CSS ile çalışmak için çok elverişli bir web editörü.

Erdinç

**boncuks** · 16.01.2009 16:47

ustam cok tesekkurler ilgi gosterip yazdigin icin ama ben iki aciklamandanda cevabimi alamadim dahasi sanirim benim sorumdan kaynaklaniyor tam olarak anlatamadim ben cok az HTML biliyorum asil isim grafik tasarim bu yuzden Photoshop da yapdigim tasarilari save for web yapip uzerinde linklerle iliskilendirip basit bir site haline getiriyorum ancak simdiki yapdigim tasarimda bazi degisiklikler oldu ve isin icinden cikamadim derken bi template indidrip icerigini inceledigimde benim gibi image leri kullanmayip background a bir innerstyle.CSS dosyasi atmis ve sitedesign ini CSS kodlarinin icine gommus sanirim bu siteyi hem hizlandirmis hemde div kullanimini kolaylastirmis simdi benim anlamaya calisdigim nokta ise o CSS dosyasini nasil hazirlamis olmasi yani oranlama ortalama vb. Sorum sa bunun kolay bi yolu oldugu seklindeydi yani bendeki tasarimi yada HTML ye dokulmus basit sitesini full CSS olarak dusunup sitemin backgroundunda CSS olarak calistirmak ve boylece sikistirmadan zaman kazanip hizli bi sekilde yuklenmesini saglamak sonrasinda div leri istedigim sekilde yonetebilmek...

baya uzun oldu sanirim anlatmak istediklerimi anlatabilmisimdir ins. bu yuzden merak ediyorum bu sekilde elimdeki full resimden olusmus HTML page ini template deki gbi nasil CSS e gomebilirim? yada bunun bi converteri ( cod converter ; HTML to CSS) gbi bi programi varmidir?

**wefra** · 16.01.2009 22:38

Sevgili boncuks, erdinc arkadasimizin anlattığından daha yalın bir teknik anlatım düşünemiyorum.
Senin sorularına cevap alacağın gün pek yakın gibi görünmüyor. HTML öğeleri nasıl yönetirsen photoshopta hazırladığın grafiği buna adapte edebilirsin? sorusunun cevabı CSS bilmekten geçiyor. Modern tasarımcıların birçoğunun bloglarına gözatarsan hepsinin CSS ve JavaScript kütüphanelerini de bildiklerini göreceksin. CSS küçümsenemeyecek bir bilgi birikimi. Tam yeterli bilgin olduğunu düşündüğün anda internet tarayıcılar arası yorum farkından kaynaklanan sorunları aşmayı da eklersek bu dediğim daha da çok ortaya çıkar.

CSSin varlık nedeni olan optimizasyon ve sağlam yapı gereksinimlerini otomatik olarak karşılamanın imkanı yok. Grafikleri parçalayıp HTML içine koyan Adobe image Ready gibi programların çıktıları kabul edilemez. Tahmin ettiğim kadarıyla HTML ve CSS bilgin çerçevesinde düşünürsek yazdıklarım biraz iç sıkıcı ama doğru. Sadece CSS kodlama işleri aldığım bile oluyor bir webmaster olarak. Bunu artık tasarımcılar yapabilmeli oysaki. Yeni trend bu çünkü.
başarılar

**erdinç** · 17.01.2009 00:24

Selamlar,
Dreamweaver'da HTML sayfasının içine gömülü CSS kodlarını harici bir CSS dosyasına export etme seçeneği var. Ancak bu senin işine yaramaz çünkü senin karşılaştığın problem farklı.

Anladığım kadarıyla sen Photoshop'ta slice yöntemi ile grafikleri kesip HTML olarak export ediyorsun ama karşılaştığın bir template de CSS kodları olduğunu gördün. Şimdi elindeki Photoshop'ta slice yöntemi ile yaratılmış siteyi CSS ile hazırlanmış template'e nasıl benzetirim diye soruyorsun.

Bu mümkün değil. CSS ile yaratılmış site iskeletleri (site layout) tablo kullanmaz. Tablo kullanan bir tasarımı tablo kullanmayan bir tasarıma otomatik olarak gönüştüremezsin. Bunu manuel olarak yapabilirsin ama bu da çok iyi olmaz çünkü CSS slice yöntemi için çok elverişli değil.

Bence sen en iyisi sıfırdan CSS öğren. Bunun için Dreamweaver kullanman iyi olur. Zaten Dreamweaver ile kodları oturup çalışmana gerek kalmıyor. Biraz uğraşınca neyin ne olduğunu kısa sürede anlayabilirsin.

Öncelikle div denilen şey aslında bir çerçeve, hücre veya kutucuk olarak tanımlanabilir. Örneğin benim sana yukarıda verdiğim örnekte bir div var ve birkaç biçimlendirme (renk, boyut vb.) yapılmış. İşte sitenin iskeletini bu divlerden yaratıyorsun. Tablo kullanmıyorsun.

Bu konuya bir bak istersen: CSS'de Layout

Konu Başlığı: html den css style dosyasi

Konuyu Paylaş

Seçenekler

html den css style dosyasi

Re: html den css style dosyasi

Re: html den css style dosyasi

Re: html den css style dosyasi

Re: html den css style dosyasi

Bu konu başlığı için etiketler

Mesaj Seçenekleri