Cottonmouth
Aileden
Ders 1 # 20 Mayıs 2012
Merhaba arkadaşlar.
Adminlerimizden özel olarak web tasarım bölümü açılmasını rica eden bendim. Sebebi hem siz değerli üyelerin bilgilerini geliştirmesi hemde biz az veya çok birşey bilenlerin. Çünkü hepimiz biliyoruz ki bilgi paylaştıkça çoğalır
Bölümün açılması benim fikrim olduğu için en büyük desteklerden birinide benim yapmam gerektiğini düşünüyorum. Bu yüzden sizlere makale şeklinde bir ders seti sunmaya karar verdim. Şimdilik Css ile yavaşça başlıyoruz. Kendi bilgisayarıma kavuşunca oldukça hızlanıcaz. Yeni balşayanlar için CSS derslerine hoş geldiniz. Derslerin amacı web tasarımı yapmak isteyen ama henüz CSS ile ilgili hiç bilgisi olmayan arkadaşlara birşeyler öğretmek. CSS öğrenmek istiyorsanız HTML konusunda bilginiz olmasında fayda var.
HTML'yi kabaca anlatmak gerekirse bir web sayfasında gördüğünüz herşeyin oraya koymanızı sağlayan dildir. CSS ise bundan farklı olarak oraya koyulan şeyin görselliği ile ilgilidir. Örneğin sayfanın en üst solunda maxigame logosunu görüyorsunuz. Onun orda olmasını sağlayan HTML, enini, genişliğini, resmini belirleyen şey ise CSS'dir .
Temel bir CSS sözdizimi aşağıdaki şekildedir.
PHP:
Element {
Özellik: Değer;
}Herşeyin temeli bu. Aslında CSS neredeyse bundan ibaret
Kullandığımız element, özellik ve değer nedir peki ? Bunları açıklayalım.Element : HTML sayfasında erişmek, düzenlemek veya değiştirmek istediğiniz şeydir. Örneğin bir paragraf, işte nasıl paragraf elementini düzenleyebileceğimiz :
Özellik : Elementin değiştirmek istediğimiz özelliğini tanımlıyoruz. Renk, yazı boyutu, yazı rengi gibi.
Değer :Değiştirmek istediğimiz özelliğin alacağı değer. Renk için kırmızı, yazı boyutu için small gibi...
PHP:
p {
color : blue;
}Bu işlemi yapınca bu CSS dosyasının geçerli olduğu tüm HTML sayfalarınızda paragraflar mavi renkli olucaktır. Renkleri blue,red,yellow gibi yazmak yerine hexadecimal renk kodlarınıda kullanabilirsiniz.(https://www.maxigamerz.com/f766/html-renk-kodlari-183985/) bu konudan renk kodlarına ulaşabilirsiniz. Yada daha kullanışlısı internetten Hex Colorpicker adlı Türkçe programı edinebilirsiniz. Ekrandan istediğiniz anda tek tuş ile istediğiniz yerdeki rengin hex değerini almanızı sağlıyor. Oldukça kullanışlı.
Örnek bir hexadecimal kodu : #000000 ---> Siyah
Kaldığımız yerden devam edelim.
CSS ile her zaman HTML'de kullanılan bir elementi tag olarak kullanmak zorundasınız. Paragraf için p, başlık 1 için h1 gibi. Gördüğünüz gibi son derece kolay.
Devam etmeden önce, bu css'i sayfamıza nasıl ekleriz dediğinizi duyar gibiyim
Bunu göstermek istiyorum. HTML sayfanız ile aynı klasörde olucak bir dosya oluşturun.
Adını style.css olarak değiştirin.
Aşağıdaki kodu style.css dosyanızı açıp içine yapıştırın, yada kendi kodlarınızı yazın. (Herhangi bir texteditor ile. Notepad++ tavsiyemdir.)
PHP:
body {
background-color: red;
}
h1 {
font-family: Calibri;
}
p {
color: #B62A2A;
}Gördüğünüz gibi. CSS'in temeli aslında ortaokul seviyesinde İngilizce ve birazcık düşünme.
Şimdi index.html adına bir dosya oluşturun.
Aşağıdaki kodları yapıştırın.
PHP:
<html><head><link rel="stylesheet" type="text/css" href="style.css"><title>CSS test!</title><body><h1>Maxigame Css</h1><br><br><p>Css oldukça kullanışlı.</p></body></html>Ve kaydedin.
Şimdi 2 dosyanında (style.css ve index.html) aynı klasörde olduğuna emin olun. Yada ikiside masaüstünde.
Index.html'yi web tarayıcınız ile açın, ve oda ne !? Bakın birkaç satır okuyarak neler yaptınız
Şimdi işleri biraz daha heyecanlı hale getirelim. Css'in bize sağladığı diğer kolaylıklardan bahsedelim. İlk olarak gruplama.
Nedir bu gruplama ?
Yukarıdaki tüm örneklerde sadece bir tag, yani etiket kullandık. Etiket kelimesini sadece Türkçe karşılığını bilin diye söyledim ama aklınızda tag olarak kalsın. Ama Türkçe kaynaklarda etiket kelimesi ile karşılaşınca da şaşırmayın. Peki birden fazla tag ile işlem yapabilirmiyiz ? Cevabımız hepinizin tahmin ettiği gibi, evet.
PHP:
p, h1 {
font-family: calibri;
color: green;
}Yukarıdaki örnek kodcuğumuzda gördüğünüz gibi gruplama yaparken tagları birbirinden ayırmak için virgül (,) kullanılır. Gruplama yaparken kullandığınız tag sayısında bir sınırlama yoktur. Ama başlangıç için az kullanmanızda fayda var.
Dikkat dikkat, birazda olsa sıkılma belirtisi olan arkadaşlar varsa konuyu şuan terketsin ve daha sonra gelip kaldığı yerden devam etsin
Uyarımızı yaptık, hız kesmeden devam ediyoruz.
Css'in bize sağladığı diğer bir özellik. Seçiciler.
Peki nedir bu seçiciler ?
Yukarıdaki örneklerde HTML elementlerine özellikler eklemeyi gördük. Peki aynı elemente farklı özellikler eklemek istersem ? Örneğin sayfamda 2 çeşit paragraf olsa, birinin rengi kırmızı; diğerinin yeşil olmasını istesem ? Burda seçiciler yardımımıza koşuyor. Seçicileri sınıf ve id seçicisi olarak iki başlık altında incelemekte fayda var.
a. Sınıf Seçicileri (Class selector)
PHP:
p.ilktur {
background-color: red;
}
PHP:
p.ikincitur {
background-color:green;
}İstediğimiz gibi iki farklı paragraf türü ve iki tür içinde farklı arka plan rengi yaptık. Seçicilerde bir HTML elementini tag olarak ekledikten sonra bu elementin hangi sınıfının özelliklerini değiştirmek istiyorsak bunu belirtiriz. Bu işlemi yapmak için tagdan sonra önce nokta (.) ve daha sonra Sınıf adı (class) yazılır. Gerisi yukarıda gördüklerimiz gibi temel CSS.
Bu özellikleri HTML kodları ile sayfamızda uygulamak için:
<p class="ilktur">Arka plan rengi kırmızı olan paragrafımız</p>
<p class="ikincitur">Ve yeşil paragrafımız. Css ne kadar kullanışlı !</p>
İlk satırlarda CSS'de her zama bir HTML elementini tag olarak kullanmak zorundasınız demiştim. O şu ana kadar geçerliydi ama artık değil. Bu söylediğimi unutun
Aynı işlemi element belirtmedende yapabilirsiniz. Böylece element gözetmeksizin o class'a ait olan tüm elementler o özellikleri alır.
PHP:
.ilktur {
background-color:Red;
}Şeklinde kodumuz. Gördüğünüz gibi ilk önceki örneklerde ilk sırada olan element tagımız bu sefer yok. Kullanımı da şu şekilde olucak.
<h1 class="ortala">Element tagı olmadan seçici kullandık. Başlık 1 için</h1>
Yada
<p class="ortala"> Element tagı olmadan seçici kullandık. Paragraf için.</p>
b. ID Seçicileri (ID Selector)
ID seçicileri sınıf seçicilerinden biraz farklıdır. Ancak paniklemeyin
Sadece basit birkaç fark o kadar. Aslında temelde ikiside aynı işe yarar ve kullanımları aynıdır. Sanırım en büyük fark class seçicileri birden fazla element için kullanılabilirken ID seçicileri o ID'ye sahip sadece tek bir element için kullanabilirler. ID'nin Türkçe karşılığı kimliktir. Gerçek hayatta olduğu gibi HTML'de de her elementin tek ve diğerlerinden farklı bir kimliği (ID) olmak zorundadır.Diğer bir farkda sınıf seçicilerinde (sınıf ve class'ı sürekli farklı kullanıyorum ki aklınızda ikiside kalsın) sınıf belirlemeden önce kullandığımız nokta (.) işareti yerine burada (#) işareti kullanılıcak. Ve işaretden sonra tahmin ettiğiniz gibi ID gelicek.
PHP:
#iddeneme{
background-color:Red;
font-family: Calibri;
color:blue;
}Kullanım şeklide şu şekilde:
PHP:
<p id="iddeneme">ID seçicisi ile element belirtmeden özellik değiştirdik</p>
<span id="iddeneme">Element tagı olmadığı için ID'ye sahip tüm elementlerde kullanabiliyorum</span>Eğer bir element tagı kullanmak isteseydik aynı class seçicisinde yaptığımız gibi #iddeneme den önce bir element tagı yerleştiricektik. Şu şekilde ;
PHP:
p#iddeneme {
background-color:Red;
font-family; Calibri;
color:blue;
}Kullanımı şu şekilde;
PHP:
<p id="iddeneme">ID seçicisi ile element belirtmeden özellik değiştirdik</p>Önceki kodda yaptığımız gibi
<span id="iddeneme">Element tagı olmadığı için ID'ye sahip tüm elementlerde kullanabiliyorum</span> yazsaydık özelliği sadece p elementinin iddeneme ID'sine atadığımız için hiçbir değişiklik olmayacaktı.
Yanlış yazdığım birşey, atladığım bir konu varsa affola. İlk defa web tasarımı ile ilgili bir yazı yazıyorum biraz heyecan var
Tamamını kendim yazdım arkadaşlar ve ben başladığımde nerelerde zorlandıysam neleri merak ettiysem onları anlatmaya çalıştım. Ellerim yoruldu beynim sulandı artık bu derslik bu kadar yeter Yorumlarınızı bekliyorum devamı için.Ders 2 # 22 Mayıs 2012
Evet arkadaşlar. Kahvem ve ben yeni ders için hazırız umarım sizde hazırsınızdır Önceki dersde CSS'in temellerinden bahsetmiştik, seçicilerden ID ve Sınıf seçicilerini anlatmıştık. Bu derste ise yine seçicilerden devam edicez. Bu yüzden önceki ders ile ilgili ufacıkta olsa sorununuz, sıkıntınız varsa tekrar gözden geçirmenizi öneririm. Yoksa zorluk çekmeniz olası.
Sizleri daha fazla meraklandırmadan konuya giriş yapalım. Css'in ne kadar kullanışlı, ne kadar güçlü olduğunu artık hepiniz biliyorsunuz. Peki neden Css bu kadar güçlüdür ? Bunun en büyük nedenlerinden biri (x)HTML dökümanının alt yapısını kullanması şüphesiz. (x)HTML yazmak biraz zor bu yüzden bundan sonra xhtml olarak yazıcam
Peki nedir bu xhtml ?
xhtml'nin açılımı Extensible HyperText Markup Language yani Türkçe karşılığı ile Genişletilebilir Büyütülmüş Metin İşaretleme Dilidir. xhtml 16 Haziran 2000 tarihinden beri bir web standartı olarak kabul görmüştür. Ve kısa bir sürede oldukça büyük bir kullanım alanına yayılmıştır. Neredeyse internetin tamamına. Kendinden önceki dillere göre kodlama olarak oldukça büyük farklar yaratmıştır. W3C tarafından önerilmektedir. xhtml'nin bir diğer özelliğide - ve bizi en çok ilgilendiren - uyumlu ve esnek yapısı ile kodlama yapanları CSS kullanmaya özendirmesidir.
Xhtml hakkında bilgi verdikten sonra kaldığımız yerden devam ediyoruz.Css uygun stilleri ve bu stillerin nasıl uygulanacağını belirtmek için xhtml yapısını,hiyerarşisini kullanır. Devam etmek için Xhtml hiyerarşisine bir göz atmakta fayda var.
XHTML Hiyerarşisi
xhtml dökümanları gizli bir hiyerarşi ile oluşturulur, ve kendine uygun yerlere yerleştirilir. Bu ilişkiyi şu ilkokulda zorla yaptığımız soy ağaçlarına benzetebiliriz. Nasıl yani dediğinizi duyar gibiyim. Anlatımı güçlendirmek ve anlamanızı kolaylaştırmak için bir resim üzerinden devam edelim.
Özetle bir elementin - elementin ne olduğunu önceki dersimizden biliyoruz - ne ebeveyn olup olmadığını anlamak için o elemente bağlı, o elementin altında başka bir element olup olmadığına bakarız.
Aşina olduğumuz h1 elementine bir göz atalım. Resimde gördüğünüz gibi h1 elementinin altında em elementi bulunuyor, bu yüzden h1 elementi bir ebeveyn element. em elementinin ebeveyni. Tam tersi şeklinde em elementide h1 elementinin altında olduğu için h1 elementinin çocuğu, yani bir çocuk element.
Html sayfamızda h1 ebeveyni ve em çocuk elementini nasıl yazıcağımızı gösterelim:
Daha anlaşılır bir şekilde göstermek gerekirse.
Aslında tek fark alt alta yazmak oldu ama ben bu şekilde daha iyi anlamıştım öğrenirken. Umarım sizede yardımcı olur
İşler biraz daha karmaşık hâl alıcak şimdi. Ama sadece biraz panik yapmayın Ben kahvemi tazeledim, sizede gözlerinizi dinlendirmenizi öneririm. Eksik kalan birşeyler varsa, yada en ufak bir tereddütünüz, şimdiye kadar olan kısmı tekrar gözden geçirin.
Şimdi 2 yeni kavramdan bahsedelim. Aslında ilkinden az önce bahsettik ama ikincisine ilk defa değinicez. Ata(ancestor) ve Torun(descendant) elementler. Ata element daha önce bahsettiğimiz ebeveyn element ile aynı şey. Sadece farklı bir adı. Çocuk elemente sahip olan elementlere ata element denir. Bu Türkçe ismin ve özellikle İngilizce isminde aklınızda bulunmasında fayda var. Zira gün gelicek Türkçe kaynaklar bizim için yetersiz olmaya başlayacak. Yardımıza koşanlarda İngilizce kullanan dostlarımız olacak Konuyu dağıtmadan bahsettiğimiz ikinci terimi açıklayalım. Torun elementleri yani. Ata elementin altında bulunan her element torun element durumundadır.
Şimdi asıl önemli konumuz torun elementler için CSS kullanımına geçebiliriz.
Torun Seçiciler (Descendant Selectors)
Torun seçicilere - bir diğer adıyla da iç içe seçiciler - uygulanan Css özellikleri sadece belirtilen elementler için uygulanır. Örnek olarak 'p' elementinin 'a' torun elementine bir stil uygulayalım. Yazı rengini kırmızı yapalım mesela.
Bu sınıf atası 'p' elementi olan her 'a' elementi için belirlediğimiz stili uygulayacaktır. Atası 'p' olmayan diğer 'a' elementleri ise bu kodlarımızdan hiçbir şekilde etkilenmez.
Bu işi torun seçiciler ile yapmasaydık ilk dersde öğrendiğimiz gibi 'a' elementi için bir sınıf oluşturucaktık. Sonra her 'p' elementinin altında bulunan 'a' elementine bu stili tek tek uygulayacaktık. Örneğin maxigame gibi büyük bir siteniz ve daha karmaşık iç içe geçmiş torun elementleriniz olduğunu düşünürseniz bu işlemi yapmak hem çok uzun hemde çok zahmetli olucaktı. Ve malesef hata yapmanızda aynı şekilde kaçınılmaz olacaktı. Ama torun seçiciler hemen yardımımıza koştu. Birkez daha Css'in kullanışlılığına ve kolaylığına saygımızı gösteriyoruz, ama bu sefer xhtml'yi de unutmayın
Torun seçicilerde seçici elementleri birbirinden ayırmak için boşluk karakteri kullanılır. ID seçicilerde (#) class seçicilerde (.) kullandığımız gibi. Ve tabiki en az iki seçiciden oluşur. Ama yazabileceğimiz seçici sayısında bir sınır yoktur. Sınırsız seçici kullanıp boşluk ile birbirine bağlayabilirsiniz.
Şimdi önceki bilgilerinizide test edicek ve pekiştiricek bir örnek yapalım. 'li' ve 'ul' iki ata elementimiz olsun. Bu iki ata elementinde 'b' torun elementi olsun. 'li' elementinin torunu olan 'b' elementinin ve 'ul' elementinin torun elementi olan 'b' elementinin yazı rengini yeşil yapalım. Sizlere tavsiyem nasıl yapıldığına bakmadan önce kendi başınıza bir denemeniz. Eminim rahatlıkla başarabilirsiniz.
Daha fazla meraklandırmadan kodumuza göz atalım.
Gördüğünüz gibi gayet basit. Torun seçiciyi zaten öğrendiniz artık ama burda hatırlatmak istediğim nokta gruplama. Grup seçiciyi kullanarak her iki atamayıda ayrı ayrı yapmak yerine virgül ile ayırarak aynı anda yaptım. Gruplama kullanmadan yapsaydık şu şekilde yapmamız gerekirdi
Fazladan dört satır. Şuan etkisiz ama yüzlerde satırdan oluşan CSS dosyanızı düşündüğünüzde etkili olmaya başlayacak. Ve doğabilicek karışıklıkları düşündüğünüzde.
Bu derslik bu kadar arkadaşlar. Kahvem bitti uykum geldi Derslere ilgi biraz az şuan ama umarım yükselir devamı gelir böylece. Yine elimden geldiğince birşeyler anlatmaya çalıştım sizlere. Emeğimi göz ardı etmezseniz minnettar kalırım. Hepinize iyi kodlamalar, bol sabırlar
Önceki dersde CSS'in temellerinden bahsetmiştik, seçicilerden ID ve Sınıf seçicilerini anlatmıştık. Bu derste ise yine seçicilerden devam edicez. Bu yüzden önceki ders ile ilgili ufacıkta olsa sorununuz, sıkıntınız varsa tekrar gözden geçirmenizi öneririm. Yoksa zorluk çekmeniz olası. Sizleri daha fazla meraklandırmadan konuya giriş yapalım. Css'in ne kadar kullanışlı, ne kadar güçlü olduğunu artık hepiniz biliyorsunuz. Peki neden Css bu kadar güçlüdür ? Bunun en büyük nedenlerinden biri (x)HTML dökümanının alt yapısını kullanması şüphesiz. (x)HTML yazmak biraz zor bu yüzden bundan sonra xhtml olarak yazıcam
Peki nedir bu xhtml ?
xhtml'nin açılımı Extensible HyperText Markup Language yani Türkçe karşılığı ile Genişletilebilir Büyütülmüş Metin İşaretleme Dilidir. xhtml 16 Haziran 2000 tarihinden beri bir web standartı olarak kabul görmüştür. Ve kısa bir sürede oldukça büyük bir kullanım alanına yayılmıştır. Neredeyse internetin tamamına. Kendinden önceki dillere göre kodlama olarak oldukça büyük farklar yaratmıştır. W3C tarafından önerilmektedir. xhtml'nin bir diğer özelliğide - ve bizi en çok ilgilendiren - uyumlu ve esnek yapısı ile kodlama yapanları CSS kullanmaya özendirmesidir.
Xhtml hakkında bilgi verdikten sonra kaldığımız yerden devam ediyoruz.Css uygun stilleri ve bu stillerin nasıl uygulanacağını belirtmek için xhtml yapısını,hiyerarşisini kullanır. Devam etmek için Xhtml hiyerarşisine bir göz atmakta fayda var.
XHTML Hiyerarşisi
xhtml dökümanları gizli bir hiyerarşi ile oluşturulur, ve kendine uygun yerlere yerleştirilir. Bu ilişkiyi şu ilkokulda zorla yaptığımız soy ağaçlarına benzetebiliriz. Nasıl yani dediğinizi duyar gibiyim. Anlatımı güçlendirmek ve anlamanızı kolaylaştırmak için bir resim üzerinden devam edelim.
Özetle bir elementin - elementin ne olduğunu önceki dersimizden biliyoruz - ne ebeveyn olup olmadığını anlamak için o elemente bağlı, o elementin altında başka bir element olup olmadığına bakarız.
Aşina olduğumuz h1 elementine bir göz atalım. Resimde gördüğünüz gibi h1 elementinin altında em elementi bulunuyor, bu yüzden h1 elementi bir ebeveyn element. em elementinin ebeveyni. Tam tersi şeklinde em elementide h1 elementinin altında olduğu için h1 elementinin çocuğu, yani bir çocuk element.
Html sayfamızda h1 ebeveyni ve em çocuk elementini nasıl yazıcağımızı gösterelim:
PHP:
<h1>Ebeveyn<em>çocuk</em></h1>Daha anlaşılır bir şekilde göstermek gerekirse.
PHP:
<h1> Ebeveyn
<em> Çocuk
</em>
</h1>Aslında tek fark alt alta yazmak oldu ama ben bu şekilde daha iyi anlamıştım öğrenirken. Umarım sizede yardımcı olur
İşler biraz daha karmaşık hâl alıcak şimdi. Ama sadece biraz panik yapmayın
Ben kahvemi tazeledim, sizede gözlerinizi dinlendirmenizi öneririm. Eksik kalan birşeyler varsa, yada en ufak bir tereddütünüz, şimdiye kadar olan kısmı tekrar gözden geçirin.Şimdi 2 yeni kavramdan bahsedelim. Aslında ilkinden az önce bahsettik ama ikincisine ilk defa değinicez. Ata(ancestor) ve Torun(descendant) elementler. Ata element daha önce bahsettiğimiz ebeveyn element ile aynı şey. Sadece farklı bir adı. Çocuk elemente sahip olan elementlere ata element denir. Bu Türkçe ismin ve özellikle İngilizce isminde aklınızda bulunmasında fayda var. Zira gün gelicek Türkçe kaynaklar bizim için yetersiz olmaya başlayacak. Yardımıza koşanlarda İngilizce kullanan dostlarımız olacak
Konuyu dağıtmadan bahsettiğimiz ikinci terimi açıklayalım. Torun elementleri yani. Ata elementin altında bulunan her element torun element durumundadır.Şimdi asıl önemli konumuz torun elementler için CSS kullanımına geçebiliriz.
Torun Seçiciler (Descendant Selectors)
Torun seçicilere - bir diğer adıyla da iç içe seçiciler - uygulanan Css özellikleri sadece belirtilen elementler için uygulanır. Örnek olarak 'p' elementinin 'a' torun elementine bir stil uygulayalım. Yazı rengini kırmızı yapalım mesela.
PHP:
p a {
color: red;
}Bu sınıf atası 'p' elementi olan her 'a' elementi için belirlediğimiz stili uygulayacaktır. Atası 'p' olmayan diğer 'a' elementleri ise bu kodlarımızdan hiçbir şekilde etkilenmez.
Bu işi torun seçiciler ile yapmasaydık ilk dersde öğrendiğimiz gibi 'a' elementi için bir sınıf oluşturucaktık. Sonra her 'p' elementinin altında bulunan 'a' elementine bu stili tek tek uygulayacaktık. Örneğin maxigame gibi büyük bir siteniz ve daha karmaşık iç içe geçmiş torun elementleriniz olduğunu düşünürseniz bu işlemi yapmak hem çok uzun hemde çok zahmetli olucaktı. Ve malesef hata yapmanızda aynı şekilde kaçınılmaz olacaktı. Ama torun seçiciler hemen yardımımıza koştu. Birkez daha Css'in kullanışlılığına ve kolaylığına saygımızı gösteriyoruz, ama bu sefer xhtml'yi de unutmayın
Torun seçicilerde seçici elementleri birbirinden ayırmak için boşluk karakteri kullanılır. ID seçicilerde (#) class seçicilerde (.) kullandığımız gibi. Ve tabiki en az iki seçiciden oluşur. Ama yazabileceğimiz seçici sayısında bir sınır yoktur. Sınırsız seçici kullanıp boşluk ile birbirine bağlayabilirsiniz.
PHP:
p strong a em
{
color: red;
}Şimdi önceki bilgilerinizide test edicek ve pekiştiricek bir örnek yapalım. 'li' ve 'ul' iki ata elementimiz olsun. Bu iki ata elementinde 'b' torun elementi olsun. 'li' elementinin torunu olan 'b' elementinin ve 'ul' elementinin torun elementi olan 'b' elementinin yazı rengini yeşil yapalım. Sizlere tavsiyem nasıl yapıldığına bakmadan önce kendi başınıza bir denemeniz. Eminim rahatlıkla başarabilirsiniz.
Daha fazla meraklandırmadan kodumuza göz atalım.
PHP:
li b, ul b {
color: green;
}Gördüğünüz gibi gayet basit. Torun seçiciyi zaten öğrendiniz artık ama burda hatırlatmak istediğim nokta gruplama. Grup seçiciyi kullanarak her iki atamayıda ayrı ayrı yapmak yerine virgül ile ayırarak aynı anda yaptım. Gruplama kullanmadan yapsaydık şu şekilde yapmamız gerekirdi
PHP:
li b {
color:green;
}
ul b {
color:green;
}Fazladan dört satır. Şuan etkisiz ama yüzlerde satırdan oluşan CSS dosyanızı düşündüğünüzde etkili olmaya başlayacak. Ve doğabilicek karışıklıkları düşündüğünüzde.
Bu derslik bu kadar arkadaşlar. Kahvem bitti uykum geldi
Derslere ilgi biraz az şuan ama umarım yükselir devamı gelir böylece. Yine elimden geldiğince birşeyler anlatmaya çalıştım sizlere. Emeğimi göz ardı etmezseniz minnettar kalırım. Hepinize iyi kodlamalar, bol sabırlar
Son düzenleme:
