0Pricing
CSS Academy · Ders

Kenarlık Stilleri, Genişliği ve Rengi

Kısa ve uzun yazım özelliklerini kullanarak farklı stillerde, genişliklerde ve renklerde kenarlıklar uygulayın.

Kenarlık Stilleri, Genişliği ve Rengi, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

border Kısa Gösterimi

border kısa gösterimi dört kenarın tamamını tek seferde ayarlar: genişlik, stil ve renk.

<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>

border-style Değerleri

Bir kenarlığın görüntülenmesi için border-style ayarlanmalıdır. Kullanılabilir değerler:

  • solid — kesintisiz çizgi
  • dashed — uzun kesik çizgiler
  • dotted — yuvarlak noktalar
  • double — iki paralel çizgi
  • groove/ridge/inset/outset — üç boyutlu efektler
  • none — kenarlık yok (varsayılan)

border-width

border-width, herhangi bir uzunluk birimini veya thin, medium, thick anahtar sözcüklerini kabul eder. Kesinlik için sayıları kullanın.

<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>

border-color

border-color, saydamlık için RGBA dahil olmak üzere herhangi bir CSS renk değerini kabul eder. currentColor, metin rengini devralır.

<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>

Tek Tek Kenarlıklar

Uzun gösterim özellikleriyle belirli kenarlara kenarlık ekleyin:

<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>

border-radius

border-radius, öğe köşelerini yuvarlar. Tek bir değeri tüm köşeleri aynı şekilde yuvarlamak için, köşe bazında denetim içinse en fazla dört değeri kullanın.

<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">&#9679;</div>
<div class="custom">Custom</div>

Eliptik border-radius

Asimetrik eliptik yuvarlama için her köşe yarıçapı, / ile ayrılmış iki değere sahip olabilir:

<div class="leaf"></div>

border-image

border-image, kenarlığı dilimlenmiş bir görsel veya renk geçişiyle değiştirerek dekoratif kenarlıklar oluşturmanızı sağlar:

<div class="fancy">Gradient border image</div>

outline ve border Karşılaştırması

outline, kenarlığın dışına bir çizgi çizer. border'ın aksine, düzeni veya öğe boyutlarını etkilemez. Genellikle klavye odağı göstergeleri için kullanılır.

<button class="focus-demo">Focused Button (demo)</button>

outline'u Kaldırırken Dikkatli Olun

Alternatif ve görünür bir odak göstergesi sağlamadan :focus anahatlarını hiçbir zaman kaldırmayın. Odak stillerini kaldırmak, klavye ve ekran okuyucu kullanan kişilere zarar verir.

<button>Button without outline</button>
<a href="#">Link without outline</a>

Tablolar için border-collapse

HTML tablolarında border-collapse: collapse, daha temiz bir görünüm için bitişik hücre kenarlıklarını tek bir çizgide birleştirir.

<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>30</td></tr>
</table>

Hızlı Kontrol

Öğe düzenini etkilemeden kenarlığın dışına çizgi çizen CSS özelliği hangisidir?

Özet

border kısa gösterimi genişlik, stil ve rengi ayarlar. border-radius köşeleri yuvarlar. outline, kenarlıktan ayrıdır; düzeni etkilemez ve klavye erişilebilirliği için odak göstergelerinde kritik öneme sahiptir.

Sıkça Sorulan Sorular

“Kenarlık Stilleri, Genişliği ve Rengi” dersi ücretsiz mi?

Evet — “Kenarlık Stilleri, Genişliği ve Rengi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Kenarlık Stilleri, Genişliği ve Rengi” dersinde ne öğreneceğim?

Kısa ve uzun yazım özelliklerini kullanarak farklı stillerde, genişliklerde ve renklerde kenarlıklar uygulayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Kenarlık Stilleri, Genişliği ve Rengi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama
  2. Kenarlık Stilleri, Genişliği ve Rengi
  3. Box-Sizing: Content-Box ve Border-Box
  4. Outline ve Box-Shadow
← CSS Academy Sayfasına Dön