10 Basit CSS Kodu Örneği | editorcum

10 Basit CSS Kodu Örneği

HTML ile uğraşmaya başladıktan sonra, muhtemelen web sayfalarınıza daha fazla güç katmakla ilgileneceksiniz. CSS bunu yapmanın en iyi yoludur. CSS, satır içi stil kullanmaya dayanmadan tüm sayfanızdaki değişiklikleri uygulamanıza olanak tanır. Aşağıda, web sayfanızda bazı temel stil değişikliklerini nasıl yapacağınızı gösteren birkaç basit CSS örneği hazırladım. Keyifli okumalar 🙂

1. Paragraf Biçimlendirme için Temel CSS Kodu :

CSS ile paragrafa istediğimiz gibi stil verebiliriz. Yazı boyutu ,tipi ,rengi vs. Şimdi paragrafın boyutu ve rengini özelleştirelim. Bunun için gereken CSS kodu şu şekilde :

Artık, tarayıcı paragraf işlediğinde, metin boyutu normalin yüzde 120’si ve rengi “dimgray” devralacak.

2.Harf Durumunu Değiştirelim :

Küçük büyük harflerle yazılması gereken paragraflar için atama oluşturmak ister misiniz? Bunun için CSS örneği şöyle olacaktır;

Tamamen küçük harflerle yazılmış paragraf yapmak için biraz farklı bir HTML etiketi kullanacağız :

Bir öğeye nokta ve sınıf adı eklemek, sınıf tarafından tanımlanan o öğenin alt türünü belirtir. Bunu metin, resimler, bağlantılar ve hemen hemen her şeyle yapabilirsiniz. Metin dizisinin büyük / küçük harfini belirli bir büyük harfle değiştirmek istiyorsanız, şu CSS örneklerini kullanın:

Sonuncu yazdığım kod, her cümlenin ilk harfini büyük harf yapar.

3. Bağlantı Renklerini Değiştirelim :

Stil değişiklikleri paragraflarla sınırlı değildir. Bağlantının atanabileceği dört farklı renk vardır: standart rengi, ziyaret edilen rengi, vurgulu rengi ve etkin rengi üzerine tıkladığınızda görüntüleyen. İşte bunlar için gereken CSS kodu:

Yukarıda ki kodun her biri belirli bağlantının rengini değiştirir. Rengin değişmesi için bağlantının sınıfını değiştirmeye gerek yoktur.

4. Bağlantı Alt Çizgilerini Kaldıralım :

Bağlantılardaki alt çizgilerin nasıl kaldırılacağına bakalım. Bunun için gereken CSS kodu şu şekildedir ;

Link (“a”) etiketli herhangi bir şey altı çizili kalır. Kullanıcı üzerine geldiğinde altını çizmek ister misiniz? Basitçe ekleyin:

Yukarıdaki metin süslemesini, bağlantı tıklandığında alt çizginin kaybolmamasını sağlamak için etkin bağlantılara ekleyebilirsiniz.

5. CSS Koduyla Bağlantı Düğmesi Yapalım :

Bağlantınıza daha fazla dikkat çekmek ister misiniz? Link butonu yapabilirsiniz.Bu sefer birkaç satır daha gerektirir, ancak her birinin üzerine ayrı ayrı geçeceğim:

Dört bağlantı durumunun da dahil edilmesi, kullanıcının üzerine geldiğinde veya tıkladığında düğmenin kaybolmamasını sağlar. Ayrıca düğmenin veya metin renginin değiştirilmesi gibi, asılı ve aktif bağlantılar için farklı parametreler de ayarlayabilirsiniz.

Arka plan rengi, arka plan rengiyle ve metin rengiyle renk olarak ayarlanır. Dolgu, kutunun boyutunu tanımlar; metin dikey olarak 10 piksel ve yatay olarak 25 pikseldir.

Metin hizalama, metnin bir tarafa değil, düğmenin ortasında görüntülenmesini sağlar. CSS kodu “display: inline-block” biraz daha karmaşık. Kısacası, nesnenin yüksekliğini ve genişliğini ayarlamanızı sağlar. Ayrıca, yerleştirildiğinde yeni bir satır başlatmasını sağlar.

6. Metin kutusu oluşturalım :

Düz bir paragraf çok heyecan verici değil. Sayfanızdaki öğeyi vurgulamak istiyorsanız, kenarlık eklemek isteyebilirsiniz. İşte CSS kodu:

7. Ortaya Hizalama Elemanları :

Çok yaygın bir görev için, elemanların CSS koduyla merkezlenmesi şaşırtıcı derecede sezgisel değildir. Yine de birkaç kez yaptıktan sonra, çok daha kolay hale gelir. Bir şeyleri ortalamak için birkaç farklı yönteminiz var.

Blok elemanı genellikle resim için margin niteliğini kullanın:

Elemanın blok olarak gösterilmesini ve her iki taraftaki kenar boşluğunun otomatik olarak ayarlanmasını sağlar. Tüm görüntüleri belirli bir sayfada ortalamak istiyorsanız, img etiketine “margin: auto” ekleyebilirsiniz:

Peki ya metni CSS ile ortalamak istiyorsak? Bu örnek CSS’yi kullanın:

Metni paragrafta ortalamak için “centertext” sınıfını kullanmak ister misiniz? Basitçe o sınıfı <p> etiketine ekleyin:

8. Dolgu Ayarı için CSS Örnekleri :

Elemanın dolgusu, her iki tarafta ne kadar yer olması gerektiğini belirtir. Örneğin, görüntünün altına 25 piksel dolgu eklerseniz, aşağıdaki metin 25 piksel aşağı doğru itilir. Pek çok eleman sadece görüntülerde değil dolguda olabilir.

Her görüntünün sol ve sağ tarafta 20 piksel, üstte ve altta 40 piksel olmasını istediğinizi varsayalım. En temel uygulama:

Tüm bu bilgileri tek bir satırda sunmak için kullanabileceğimiz kısa CSS kodu var:

9. Tablo Satırlarını Vurgula :

CSS kodu, tabloların varsayılan ızgaralardan çok daha güzel görünmesini sağlar. Renk ekleme, kenarlıkları ayarlama ve masanızı mobil ekranlara duyarlı hale getirme işlemleri kolaydır. Burada sadece tek bir etki yaratacağız: fare üstünde üzerlerine geldiğinde tablo satırlarını vurgulamak.

İşte bunun için ihtiyacınız olan CSS kodu:

10. Saydam ve Opak Arasında Resimler Değiştirme :

CSS kodu, resimlerle de harika şeyler yapmanıza yardımcı olabilir. İşte görüntüleri tam opaklıktan saydama çeviren CSS kodu.

“Filter” özelliği “opacity” ile aynı şeyi yapar ancak internet Explorer 8 ve önceki sürümleri opacity ölçümünü tanımıyor. Daha eski tarayıcılar için bunu eklemek iyi bir fikirdir.

Artık görüntüler biraz şeffaf olduğu için, farenin tam olarak opak görünmesini sağlayacağız:


Basit CSS kodu örneklerini kullanarak sizde web sayfanıza istediğiniz stili verebilirsiniz. CSS ile yaptığınız çalışmaları benimle paylaşabilirsiniz. Konu ile ilgili sorularınızı yorum yaparak sorabilirsiniz. Görüşmek üzere 🙂

Göz atmanız gereken yazılarım ;

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir