10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği

10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği

HTML ile uğraşmaya başladığınızda, muhtemelen web sayfalarınıza daha fazla görsel etki eklemek isteyeceksiniz. CSS bunu yapmanın en iyi yoludur. CSS, satır içi stile güvenmeden değişiklikleri sayfanızın tamamına uygulamanıza olanak tanır.





Web sayfanızda bazı temel stil değişikliklerini nasıl yapacağınızı gösteren birkaç basit CSS örneği.



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

CSS ile stil oluşturmak, her öğe oluşturduğunuzda bir stil belirtmeniz gerekmediği anlamına gelir. Sadece 'tüm paragraflar bu özel stile sahip olmalı' diyebilirsiniz ve hazırsınız.





Diyelim ki her paragrafı istiyorsunuz (

, herkesin bilmesi gereken HTML etiketlerinden biri) normalden biraz daha büyük olacak. Ve siyah yerine koyu gri metinle.

İlgili: HTML Hile Sayfası



Bunun için CSS kodu:

p { font-size: 120%; color: dimgray; }

Basit! Artık tarayıcı bir paragraf oluşturduğunda, metin boyutu (normalin yüzde 120'si) ve rengi ('karartma') devralır.



Hangi düz metin renklerini kullanabileceğinizi merak ediyorsanız, buna göz atın. CSS renk listesi Mozilla'dan.

2. Karakter Büyüklüğünü Değiştirmek için CSS Örneği

Küçük büyük harflerle olması gereken paragraflar için bir tanım oluşturmak ister misiniz? Bunun için bir CSS örneği şöyle olacaktır:



p.smallcaps { font-variant: small-caps; }

Tamamen küçük harflerle yazılmış bir paragraf oluşturmak için biraz farklı bir HTML etiketi kullanın. İşte nasıl göründüğü:

Your paragraph here.

Bir öğeye bir nokta ve bir sınıf adı eklemek, o öğenin bir sınıf tarafından tanımlanan bir alt türünü belirtir. Bunu metin, resimler, bağlantılar ve hemen hemen her şeyle yapabilirsiniz.

Bir metin kümesini belirli bir duruma göre değiştirmek istiyorsanız, şu CSS kodu örneklerini kullanın:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Sonuncusu, her cümlenin ilk harfini büyük yapar.

Stil değişiklikleri paragraflarla sınırlı değildir. Bir bağlantıya atanabilecek dört farklı renk vardır: standart rengi, ziyaret edilen rengi, üzerine gelinen rengi ve etkin rengi (üzerine tıkladığınızda görüntülenir). Bu örnek CSS kodunu kullanın:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Bağlantılarda, her 'a'yı nokta değil, iki nokta üst üste gelir.

Bu bildirimlerin her biri, belirli bir bağlamda bir bağlantının rengini değiştirir. Rengini değiştirmek için bir bağlantının sınıfını değiştirmeye gerek yoktur.

Altı çizili metin bir bağlantıyı açıkça belirtirken, bazen bu altı çizgiyi silmek daha hoş görünür. Bu, 'text-decoration' özniteliği ile gerçekleştirilir. Bu CSS örneği, bağlantılardaki alt çizgilerin nasıl kaldırılacağını gösterir:

a { text-decoration: none; }

Bağlantı ('a') etiketine sahip her şeyin altı çizisiz kalacaktır. Kullanıcı üzerine geldiğinde altını çizmek ister misiniz? Basitçe ekleyin:

a:hover { text-decoration: underline; }

Bağlantı tıklandığında alt çizginin kaybolmamasını sağlamak için bu metin dekorasyonunu etkin bağlantılara da ekleyebilirsiniz.

Bağlantınıza daha fazla dikkat çekmek ister misiniz? Bir bağlantı düğmesi, bunun hakkında gitmek için harika bir yoldur. Bu, birkaç satır daha gerektirir:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Bu CSS örnek kodunu açıklayalım.

Dört bağlantı durumunun tümünü dahil etmek, bir kullanıcı üzerine geldiğinde veya tıkladığında düğmenin kaybolmamasını sağlar. Ayrıca, fareyle üzerine gelme ve etkin bağlantılar için, örneğin düğmeyi veya metin rengini değiştirme gibi farklı parametreler ayarlayabilirsiniz.

Arka plan rengi, arka plan rengiyle ve metin rengiyle renkle ayarlanır. Dolgu, kutunun boyutunu tanımlar --- metin dikey olarak 10 piksel ve yatay olarak 25 piksel ile doldurulur.

Metin hizalama, metnin tek taraflı değil düğmenin ortasında görüntülenmesini sağlar. Metin-dekorasyon, son örnekte olduğu gibi, alt çizgiyi kaldırır.

mac ve pc arasında dosya paylaşın

CSS kodu 'ekran: satır içi blok' biraz daha karmaşıktır. Kısacası, nesnenin yüksekliğini ve genişliğini ayarlamanıza izin verir. Ayrıca eklendiğinde yeni bir satıra başlamasını sağlar.

6. Metin Kutusu Oluşturmak için CSS Örnek Kodu

Düz bir paragraf çok heyecan verici değil. Sayfanızda bir öğeyi vurgulamak istiyorsanız, kenarlık eklemek isteyebilirsiniz. Bunu bir dizi basit CSS koduyla nasıl yapacağınız aşağıda açıklanmıştır:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Bu basit. Herhangi bir önemli sınıf paragrafının etrafında beş piksel genişliğinde düz mor bir kenarlık oluşturur. Bir paragrafın bu özellikleri devralmasını sağlamak için, onu şu şekilde bildirmeniz yeterlidir:

Your important paragraph here.

Bu, paragraf ne kadar büyük olursa olsun işe yarayacaktır.

Uygulayabileceğiniz birçok farklı kenarlık stili vardır; 'düz' yerine 'noktalı' veya 'çift' deneyin. Bu arada genişlik 'ince', 'orta' veya 'kalın' olabilir. CSS kodu, her bir kenarlığın kalınlığını aşağıdaki gibi tek tek tanımlayabilir:

border-width: 5px 8px 3px 9px;

Bu, üst kenarlık beş piksel, sağ kenarlık sekiz, alt kenarlık üç ve sol kenarlık boyutu dokuz piksel olur.

7. Temel CSS Koduyla Öğeleri Ortaya Hizalama

Ortak bir görev için, öğeleri CSS koduyla ortalamak şaşırtıcı bir şekilde sezgisel değildir. Birkaç kez yaptıktan sonra, çok daha kolay hale geliyor. Bir şeyleri ortalamak için birkaç farklı yolunuz var.

Bir blok öğesi (genellikle bir görüntü) için kenar boşluğu özelliğini kullanın:

.center { display: block; margin: auto; }

Bu, öğenin bir blok olarak görüntülenmesini ve her iki taraftaki kenar boşluğunun otomatik olarak ayarlanmasını sağlar. Tüm resimleri belirli bir sayfada ortalamak istiyorsanız, img etiketine 'margin: auto' bile ekleyebilirsiniz:

img { margin: auto; }

Neden bu şekilde çalıştığını öğrenmek için W3C'de CSS kutu modeli açıklaması .

Peki ya metni CSS ile ortalamak istiyorsanız? Bu örnek CSS'yi kullanın:

.centertext { text-align: center; }

Metni bir paragrafta ortalamak için 'centertext' sınıfını kullanmak ister misiniz? Basitçe o sınıfı ekleyin

etiket:

This text will be centered.

8. Dolguyu Ayarlamak için CSS Örnekleri

Bir elemanın dolgusu, her iki tarafta ne kadar boşluk olması gerektiğini belirtir. Örneğin, bir görüntünün altına 25 piksel dolgu eklerseniz, aşağıdaki metin 25 piksel aşağı itilir. Yalnızca görüntüler değil, birçok öğede dolgu olabilir.

Diyelim ki her görüntünün sol ve sağ taraflarında 20 piksel, üstte ve altta 40 piksel dolgu olmasını istiyorsunuz. Bunun için en temel CSS kod yürütmesi:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Bununla birlikte, tüm bu bilgileri tek bir satırda sunan daha kısa bir CSS talimatı vardır:

img { padding: 40px 25px 40px 25px; }

Bu, üst, sağ, alt ve sol dolguları doğru sayıya ayarlar. Yalnızca iki değerin kullanılması (40 ve 25) sayesinde daha da kısaltabilirsiniz:

img { padding: 40px 25px }

Yalnızca iki değer kullandığınızda, ilk değer üst ve alt için ayarlanırken, ikincisi sol ve sağ olacaktır.

9. Tablo Satırlarını CSS Kodlama ile Vurgulayın

CSS kodu, tabloların varsayılan ızgaralardan çok daha güzel görünmesini sağlar. Renk eklemek, kenarlıkları ayarlamak ve masanızı mobil ekranlara duyarlı hale getirmek çok kolay. Bu basit CSS örneği, fareyi üzerlerine getirdiğinizde tablo satırlarını nasıl vurgulayacağınızı gösterir.

tr:hover { background-color: #ddd; }

Artık fareyi bir tablo hücresinin üzerine getirdiğinizde, o satırın rengi değişecektir. Yapabileceğiniz diğer harika şeylerden bazılarını görmek için Süslü CSS tablolarında W3C sayfası .

10. Görüntüleri Saydam ve Opak Arasında Değiştirmek İçin Örnek CSS

CSS kodu, resimlerle harika şeyler yapmanıza da yardımcı olabilir. İşte görüntüleri tam opaklıktan daha düşük bir düzeyde görüntülemek için bir CSS örneği, bu nedenle biraz 'beyazlatılmış' görünüyorlar. Fareyi resimlerin üzerine getirdiğinizde, tam opaklığa getirilirler:

img { opacity: 0.5; filter: alpha(opacity=50); }

'filtre' özniteliği, 'opaklık' ile aynı şeyi yapar, ancak Internet Explorer 8 ve önceki sürümleri opaklık ölçümünü tanımaz. Daha eski tarayıcılar için bunu eklemek iyi bir fikirdir.

Artık görüntüler biraz saydam olduğuna göre, fareyle üzerine gelindiğinde onları tamamen opak hale getirebilirsiniz:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Kaynak Kodlu 10 CSS Örneği

Bu CSS kod örnekleriyle CSS'nin nasıl çalıştığı hakkında çok daha iyi bir fikre sahip olacaksınız. CSS şablonları yardımcı olabilir, ancak ham öğeleri anlamak çok önemlidir.

Bu 10 kolay CSS kodu örneği özetlenmiştir:

  1. Kolay paragraf biçimlendirme
  2. Harf büyüklüğünü değiştir
  3. Bağlantı renklerini değiştir
  4. Bağlantı alt çizgilerini kaldır
  5. Bağlantı düğmesi yap
  6. Bir metin kutusu oluşturun
  7. Ortaya hizalama öğeleri
  8. Dolguyu ayarlayın
  9. Tablo satırlarını vurgula
  10. Görüntüleri opak yap

Bunları tekrar gözden geçirdiğinizde, gelecekteki koda uygulayabileceğiniz birkaç kalıp fark edeceksiniz. İşte o zaman gerçekten bir CSS ustası olmaya başladığınızı anlarsınız. Ama hatırlamak zor olabilir. Gelecekte başvurmak üzere bu sayfayı yer imlerine eklemek isteyebilirsiniz.

Paylaş Paylaş Cıvıldamak E-posta Temel CSS3 Özellikleri Hile Sayfası

CSS3 özellikleri hile sayfamızla temel CSS sözdiziminde ustalaşın.

Sonrakini Oku İlgili konular
  • Programlama
  • Web Tasarım
  • CSS
  • komut dosyası
Yazar hakkında Christian Cawley(1510 Makale Yayınlandı)

Masaüstü ve yazılım desteği konusunda kapsamlı deneyime sahip Güvenlik, Linux, Kendin Yap, Programlama ve Teknik Açıklama ve Gerçekten Faydalı Podcast yapımcısı için Editör Yardımcısı. Linux Format dergisine katkıda bulunan Christian, bir Raspberry Pi tamircisi, Lego aşığı ve retro oyun hayranıdır.

Christian Cawley'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın