Altın Konu 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği

[Replicant]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

​

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ın (<p>, herkesin bilmesi gereken HTML etiketlerinden biri) normalden biraz daha büyük olmasını istiyorsunuz. Ve siyah yerine koyu gri metinle.

Bunun için CSS kodu:

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

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

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üğü:

<p class="smallcaps">Your paragraph here.</p>

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.

3. Bağlantı Renklerini Değiştirmek için Kolay CSS​

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.

4. Bu Örnek CSS ile Bağlantı Alt Çizgilerini Kaldırın​

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 herhangi bir ş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.

5. CSS Koduyla Bağlantı Düğmesi Yapın​

Bağlantınıza daha fazla dikkat çekmek ister misiniz? Bir bağlantı düğmesi, bu konuda ilerlemek 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.

CSS kodu "display: inline-block" 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:

<p class="important">Your important paragraph here.</p>

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

Uygulayabileceğiniz birçok farklı bordür 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 Ortaya Hizalama Öğeleri​

Ortak bir görev için, öğeleri CSS koduyla ortalamak şaşırtıcı bir şekilde sezgisel değildir. Bunu 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; }

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 bu sınıfı <p> etiketine ekleyin:

<p class="centertext">This text will be centered.</p>

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.

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 şekilde 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" özelliğ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.

 

[EsatOfficial]

Eline Sağlık Kirvem

 

[Replicant]

Rica ederim