Yeni Kayıt
Konudaki Resimler
önceki
|
Hızlı 
Bildirim
SIFIRDAN CSS DERSLERİ (Kendi Anlatımım) (3. sayfa)
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
takipteyim. Bir süredir internetten html ve css öğrenmeye çalışıyorum, eminim bu konu çok faydalı olacak. Devamını bekliyoruz 
-
eğitsel yazmak zahmetli iş , tebrikler -
Harika bir resim. pandingin ne olduğu daha iyi anlatılamaz.quote:
Orijinalden alıntı: umutozturk
-
Kardeş ben css tasarım yapmayı çok istiyorum ama daha html kodunu bile bilmiyorum en iyisi ben vaz geçeyim 
-
quote:
Orijinalden alıntı: umutozturk
Arkadaşlar burada çok önemli bir nokta var. Stilleri tanımlarken bazı tasarımcılar CSS id lerden yararlanırken , bazıları ise CSS Classlardan yararlanır. İD sadece bir elemente atanabilirken, class, aynı sayfa içerisinde farklı ögelere atanabildiği için ben class kullanımını tavsiye ediyorum ve bu dersleri de class kullanımına göre hazırladım.
Hocam sizden ricam CSS id ile CSS class arasındaki farkı biraz daha detaylı anlatabilirmisiniz?
Ellerinize sağlık Saygılar..
-
mesajım bulunsun yarın konuyu okuyacağım. -
Arkadaşlar css ile tabi ki buton, textfield, textarea gibi form elementleri class atayabilirsiniz. Bunun yanında, twitter da olduğu gibi form textfield atıklandığında parlama efektri oluşturabilirsiniz. Bunların hepsine değineceğim zaten zaman içerisinde.
DW ile bazı temel stilleri otomatik oluşturabilirsiniz ama bunu sayfa içerisinde veya inline yapacaktır. Bu hem müdahaleyi zorlaştırır, hem de harici stil kullanmamak büyük amatörlük olur günümüzün çok sayfalı ve php entegreli dinamik sitelerinde...
Soru sormak isteyenler sorsun ben elimden geldiğince cevap veririm ama ltfen css sayfasının, html kodunun ve sayfa çıktısının görüntüsünü ekleyin ki herkese yararlı olsun -
Arkadaşlar class ile id arasındaki temel fark, bir class'ın birden fazla elemente kullanilabilirken id de bu imkanın olmamasıdır. Örneğin bir adet h3 classı hazırladınız. kırmızı renkte 17 px dediniz class adını da basligim koydunuz. Sayfanın farklı yerlerinde, farklı divler içeriisndeki h3 elementleri için bu classı çağırabildiğiniz gibi, diğer bir sayfada alaksız bir div içerisinde kullandığınız h4 için bile bu classı çağırıp çalıştırabilirsiniz. Ancak bir id'yi sadece bir elemente atayabilirsiniz. Keza bir element de birden fazla id alamaz. Günümüz modern browserları bazı css hatalarını görmezden gelebilse de, validate yapmaya kalktığınızda kullanım hatalarından dolayı sayyfanız ve css kodlarınız onay almaz...
Tavsiyem mümkün mertebe class kullanımı. Ama class ların farklı elementlere etki etmesinden dolayı yaşanılan çakışma ve karışıklıklarda ise, spesifik olarak id kullanabilirsiniz bir elementinizi bu çakışmadan kurtarmak için...
-
quote:
Orijinalden alıntı: umutozturk
Arkadaşlar class ile id arasındaki temel fark, bir class'ın birden fazla elemente kullanilabilirken id de bu imkanın olmamasıdır. Örneğin bir adet h3 classı hazırladınız. kırmızı renkte 17 px dediniz class adını da basligim koydunuz. Sayfanın farklı yerlerinde, farklı divler içeriisndeki h3 elementleri için bu classı çağırabildiğiniz gibi, diğer bir sayfada alaksız bir div içerisinde kullandığınız h4 için bile bu classı çağırıp çalıştırabilirsiniz. Ancak bir id'yi sadece bir elemente atayabilirsiniz. Keza bir element de birden fazla id alamaz. Günümüz modern browserları bazı css hatalarını görmezden gelebilse de, validate yapmaya kalktığınızda kullanım hatalarından dolayı sayyfanız ve css kodlarınız onay almaz...
Tavsiyem mümkün mertebe class kullanımı. Ama class ların farklı elementlere etki etmesinden dolayı yaşanılan çakışma ve karışıklıklarda ise, spesifik olarak id kullanabilirsiniz bir elementinizi bu çakışmadan kurtarmak için...
aynen katılıyorum önceden bende id kullanıyordum ama class cennet gibi.benim de tavsiyem class kullanın alt tarafı # ve . ta değişiyor kolay gelsin
< Bu ileti mobil sürüm kullanılarak atıldı >
-
Çok iyi gidiyordu bitti mi dersler yoksayoksa...
< Bu ileti mobil sürüm kullanılarak atıldı > -
Hayır bitmedi tabi ki. Bir süre özel sebeplerden uzak kaldım dersler bir kaç gün içerisinde devam edecektir... -
Güzel konu
-
bekliyoruz -
Devamını bekliyoruz... 
-
bana soracak olursanız css kodlarını sıfırdan öğrenmek yerine dreamweaveri komple öğrenmeye yeğlerim çünkü program css leri otomatik olarak yapıyor artı zamandan tasarruf uğraşmaya değmez. fakat alt yapı olarak css nedir ne işe örenmekte fayda var ama zamandan tasarruf etmek isteyenlere dreamveaveri öğrenmelerini şiddetle tavsiye ediyorum -
web sitesi kurulumu icin bu derslerin yanında yardımcı bir kaynak oneriri misiniz -
quote:
Orijinalden alıntı: umutozturk
Çok iyiymiş bu konu cidden. http://fatihhayrioglu.com/css-dersleri/ şu siteden sonra gördüğüm en açıklayıcı şekilde anlatan kişisiniz.
Eğer zaman ayırıp derslere devam ederseniz çok sevinirim. -
Konuda DW. öğrenmek yeterli diyen arkadaşım dreamw. yazdığı inline stiller ve import etmeden oluşturulan stil tanımlamaları ile profesyonel bir iş aldığınızda işin altından kalkamazsınız. İnsanları yanlış yönlendirmeyelim. Profesyonel bir web tasarımcı CSS ve HTML dillerini ezbere ve iyi bir biçimde bilmedi, önüne gelen veya kendi çizdiği tasarımı, hiç tereddüt etmeden birebir kendi CSS yerleşimi ile hayata geçirebilmelidir. Malesef CSS ve HTML öğrenmekten korkan insanların dayanağıdır nasıl olsa DW bunu yapıyor söylemi. O zaman html öğrenmeye de gerek yok onu da yazıyor diyelim :) Böyle bir mantık yok
Profesyonel bir web sitesini kodlarken editör olarak DW kullanabilirsiniz ama gerçek manada profesyonelim diyen bir web tasarımcı kendi HTML ve CSS kodları ile yapıyı inşa eder. Diğerleri merdivenaltı 50 liralık site yapan forum kurtlarından ileri gidemez -
DERS 8: CSS ile SİTEMİZE STANDART BİR MENÜBAR EKLEMEK
Evet arkadaşlar hatırlarsanız bir önceki derste sitemizin banner kısmını yapmıştık. Şimdi size sitemize bir menubar tasarlamanın ne kadar kolay olduğunu adım adım göstereceğim. Daha önce kodlarımızı 7.ci derste bulabilirsiniz.
Şimdi burada banner class 'ını kapattığımız yerde bir satır aşağıya inip menubar classımızı oluşturalım ve içerisine linklerimizi yazalım;
——————————————————————————————
<body> (BODY tagını açıyoruz)
<div align=”center”> (siteyi ortalayan divi açıyoruz)
<div class=”banner”> BURAYA BANNER RESMİNİ EKLEYEBİLİRSİNİZ</div> (banner divimizi açıyor, class ını atıyor ve içeriği girip kapatıyoruz)
<div class=”menubar”>
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=72679099&url=index.php" data-href="index.php">ANASAYFA</a> |
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=72679099&url=galeri.php" data-href="galeri.php">GALERİ</a> |
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=72679099&url=iletisim.php" data-href="iletisim.php">İLETİŞİM</a>
</div> (MENUBARIMIZI OLUŞTURUP İÇERİSİNE LİNKLERİMİZİ YAZDIK VE DİVİMİZİ KAPADIK)
</div> (siteyi ortalayan divi kapatıyoruz)
</body> (Body tagını kapatıyoruz)
——————————————————————————————–
Bu şekilde html kodlarımızı hazırlamış olduk. Burada belirlediğimiz menubar classı ve içerisindeki linkleri düzenlemek için CSS dosyamızı açıyoruz. İlk derslerde harici CSS dosyamızı nasıl import edeceğimizi yazmıştım hatırlamıyorsanız kafanızın karışmaması açısından lütfen dersleri tekrar okuyunuz.
CSS dosyamızı açıyoruz ve menubar classımızı tanımlıyoruz. Örneğin;
arka planı mor renkte , 1000 px genişliğinde her kenarından 10ar piksel padding yani iç boşluk içeren, ve içerisine gelecek yazılar sola dayalı
bir menubar oluşturalım.
KODLARIMIZ ŞU ŞEKİLDE OLMALIDIR.
.menubar {
width:1000px;
padding:10px;
background-color:purple;
text-align:left;
}
PEKİ ŞİMDİ DE MENUBARIN İÇERİSİNE KOYDUĞUMUZ LİNKLERİN BEYAZ ALTI ÇİZGİSİZ OLMASINI VE ÜZERİNE MOUSE GELDİĞİNDE ALTINDA BİR ÇİZGİ BELİRİP RENGİNİN ALTIN SARISINA DÖNÜŞMESİNİ PLANLAYALIM VE CSS DOSYAMIZA YAZALIM:
BURASI LİNKİN MOUSE ÜZERİNDE DEĞİLKENKİ STİLLERİNİ TANIMLAMAKTA:
.............................................................
.menubar a{
color:white;
text-decoration:none;
}
..............................................................
BURASI LİNKİN MOUSE ÜZERİNE GELDİĞİNDEKİ STİLLERİNİ TANIMLAMAKTA:
.............................................................
.menubar a:hover{
color:gold;
text-decoration:underline;
}
..............................................................
ARKADAŞLAR GÖRDÜĞÜNÜZ ÜZERE PLANLI GİDERSENİZ CSS ÖĞRENMEYE DEVAM EDEBİLECEĞİZ. BAKIN BU DERSTE BİR MENUBAR DİVİ OLUŞTURUP İÇERİSİNE LİNKLER YERLEŞTİRMEYİ VE BU LİNKLERE VE MENUBAR ALANINA BAZI STİLLER VEREBİLMEYİ ÖĞRENDİK. İLGİYE GÖRE DERSLERE DEVAM EDECEĞİM. ÖZEL DERS ALMAK İSTEYENLER (ANKARA İÇİ) BENİMLE İRTİBATA GEÇEBİLİRLER :) SEVGİYLE KALIN
< Bu mesaj bu kişi tarafından değiştirildi umutozturk -- 11 Mart 2013; 13:14:37 >
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
