CSS’te Sözde Sınıflar (pseudo-class), Outline,Column,Resize ve Selection

CSS’te Sözde Sınıflar (pseudo-class), Outline,Column,Resize ve Selection

• 1. CSS CSS CSS’te Sözde Sınıflar (pseudo-class) CSS’te Outline,Column,Resize ve Selection
• 2. CSS’te Sözde Sınıflar CSS’te Sözde Sınıflar :first-letter •Belirtilen elementteki ilk harfin özelliklerini değiştirmek için kullanılır. Deneme5 ID'sine sahip div'imizin içindeki p elementinin ilk harflerinin büyüklüğünü 24px yapacağız ve kalın yazdıracağız.
• 3.                                :first-letter :first-letter Bunlarda HTML kodlarımız. Görüldüğü gibi ilk harfler kalın ve büyük yazıldı.
• 4.                       :first-child ve :last-child  :first-child ve :last-child •:first-child bir div içinde belirtilen ilk elementi seçer ve özelliklerini değiştirir. :last-child ise son element içindir. deneme7 ID'sine sahip div içindeki paragraflardan ilk satırın büyük ve kalın yazılmasını istedik. Son satırın ise büyük ve altı çizili olmasını istedik.
• 5.                       :first-child ve :last-child :first-child ve :last-child Bu şekilde de HTML kodlarına sahibiz.
• 6.                               :nth-child(n) :nth-child(n) •Bir div içindeki belirtilen sıradaki elementin özelliğini değiştirmek için kullanılır. deneme8 ID'sine sahip div içindeki p elementlerinden dördüncüsünün altı çizili ve mor renkte olmasını istedik.
• 7.                               :nth-child(n) :nth-child(n) Bunlarda HTML kodlarımız. Ekran çıktımız ise bu şekilde olacaktır. Görüldüğü gibi dördüncü satır altı çizili ve mor bir şekilde yazdırıldı.
• 8.                                    :hover :hover •hover en çok kullanılan sözde sınıftır. Fare ile bir elementin üzerine gelindiğinde o anda yapılacak değişikliği gösterir. Bu örnekte fare ile deneme ID'sine sahip div'in üzerine gelince div'in arkaplan rengi maviden eflatuna dönecektir.
• 9.                                    :hover :hover Normal görünüşü : Üzerine gelindiğindeki görünüşü : Renk değişimini fark etmiş olmalısınız.
• 10.                                     :focus :focus •Focus dilimizde odaklanmak anlamına gelmektedir. Fare ile bir elementin üzerine geldiğinizde ve tıkladığınızda elementte meydana gelecek değişikliği belirtir. En çok veri girişi için kullanılan form etiketlerinde kullanılır. change-color adında bir sınıf açtık ve focus olduğunda arkaplan renginin mavi olmasını istiyoruz. Bu sınıfı textbox'ımıza ekliyoruz.
• 11.                                     :focus :focus Adınız adlı metin kutusuna change-color sınıfını ekledik. Farenizi başka yere götürseniz dahi arkaplan rengi mavi olarak kalacaktır. :hover'dan farkı budur.
• 12.                                    :active :active •Bir link'e tıklandığında o anda yapılacak değişikliği gösterir. Çok nadir kullanılan sözde sınıflardan biridir. CSS kodlarımız bu şekildedir.
• 13.                                    :active :active HTML kodlarımız ise bu şekilde. Normal görünüşü : Tıklandığında :
• 14.                              nth-of-type(n) nth-of-type(n) •Bir div içindeki elementlerden belirtilen formülde olanları seçer. deneme9 ID'sine sahip div'imiz içindeki p elementlerinden tekinci sırada olanların özelliklerinin değişmesini istedik. 2n+1 yerine odd da yazabilirsiniz. odd dilimizde tek anlamına gelmektedir.
• 15.                              nth-of-type(n) nth-of-type(n) Bu şekilde de HTML kodlarına sahibiz. Görüldüğü gibi tek sayıya sahip satırlar altı çizili ve mor olarak yazdırıldı. Eğer çiftinci sıradakilere bu şekilde yapmak isteseydik 2n ya da even yazmamız yeterliydi. Even dilimizde çift anlamına gelmektedir.
• 16.                                  :first-line :first-line •Belirtilen elementteki ilk satırın özelliklerini değiştirmek için kullanılır. deneme6 ID'sine ait div'deki p elementinin ilk satırını büyük ve kalın yazdırmak istiyoruz. CSS kodlarımız bu şekilde.
• 17.                                  :first-line :first-line HTML kodlarımız ise bu şekilde. Görüldüğü gibi ilk satır büyük ve kalın yazdırıldı.
• 18. CSS’te Outline,Column,Resize ve Selection CSS’te Outline,Column,Resize ve Selection Outline Google Chrome ile web'de gezinirken bir sitenin arama kutusuna tıkladığınızda arama kutusunun etrafının sarı bir çizgi ile seçili hâle geldiğini fark etmişsinizdir. Bunu sağlayan outline özelliğidir. Outline dilimizde dış çizgi anlamına gelir.
• 19.                                           Outline Outline • Kodlara outline: none değerini ekledim. Bu özellik çizgiyi ortadan kaldıracak. Çizgili hali : Çizgisiz hali :
• 20.                                 Columns Columns •CSS3 ile gelen bir yeniliktir. Columns dilimizde kolonlar anlamına gelmektedir. Metinleri gazete yazılarında olduğu gibi kolon kolon göstermeye yarar.
• 21.                                 Columns Columns • Bu şekilde metinlerimiz 3 kolon hâlinde görüneceklerdir. Google Chrome ve Safari tarayıcıları için -webkit- ön ekini ve Mozilla Firefox tarayıcısı içinse -moz- ön ekini ekledim.
• 22.                                    Resize Resize •Textarea dilimizde metin alanı anlamına gelmektedir ve resize özelliği ile bu metin alanının yeniden boyutlandırılıp boyutlandırılmamasına karar verebiliriz. Resize ise dilimizde yeniden boyutlandırmak anlamına gelmektedir. Şeklinde CSS kodlarına sahibiz.
• 23.                                    Resize Resize HTML kodlarımız ise bu şekilde. “Resize:none;” kullanıldığında : “Resize:none;” kullanılmadığında : Görüldüğü üzere resize:none değerini eklersek metin alanı dilendiği gibi genişletip daraltılamaz.
• 24.                                   Selection Selection •Metinlerin seçim rengi gibi özelliklerini belirlemek için kullanılır. Selection dilimizde seçim anlamına gelmektedir. Şeklinde CSS kodlarımız olsun. secim-rengi div'inin içindeki metni seçtiğimizde seçili metnin arkaplan rengi siyah ve metnin rengi yeşil olacaktır.
• 25.                                   Selection Selection Bu sayede seçili metnin arkaplan rengi siyah ve metin rengimiz yeşil oldu.
• 26.                         KAYNAKÇA KAYNAKÇA •http://zinzinzibidi.com/web_tasarim/css3/css_te_outline_animation_ column_overflow_resize_ve_selection •http://zinzinzibidi.com/web_tasarim/css3/css_te_sozde_siniflar