Angular Academy · Ders

Bileşen Kapsamlı Stiller

Stilleri bir bileşenle sınırlı tutun.

Bileşen Kapsamlı Stiller, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Stiller Bileşenlere Aittir

Angular, her bileşenin kendi CSS'sini taşımasına izin verir. Varsayılan olarak bu stiller kapsamla sınırlandırılmıştır; yani yalnızca o bileşenin şablonunu etkiler, sayfanın geri kalanını etkilemez.

Satır İçi Stil Dizisi

Stilleri, styles dizisini kullanarak @Component dekoratöründe satır içinde tanımlayabilirsiniz.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

Harici styleUrls

Daha yaygın olarak, bir veya daha fazla harici stil sayfasına styleUrls ile başvurun.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

styleUrl Kısa Yazımı

Tek bir stil sayfası için modern Angular, tekil styleUrl özelliğini destekler.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

Kapsam Sınırlandırma Uygulamada

Bir bileşendeki .card kuralı, card sınıfını da kullanan başka bir bileşene sızmaz. Her biri yalıtılmıştır.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

Kapsam Sınırlandırma Nasıl Çalışır?

Angular, bir bileşenin öğelerine benzersiz öznitelikler ekler ve CSS seçicilerini bunlarla eşleşecek şekilde yeniden yazar; böylece stiller yalnızca o bileşenin içinde uygulanır.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

Stiller İçeri Sızmaz

Stillerinizin dışarı sızmaması gibi, dışarıdaki stillerin çoğu da bileşen kurallarını istemeden geçersiz kılmaz. Bu, bileşenlerin kendi içinde tamamlanmasını sağlar.

Genel Stiller

Uygulama genelindeki stiller için angular.json içinde listelenen genel styles.css dosyasını kullanın. Bunlar kapsamla sınırlandırılmaz.

/* src/styles.css - global */
body { font-family: system-ui; }

Birden Çok Stil Sayfası

Bir bileşen, stil sayfalarını dizede listeleyerek birden çok stil sayfası yükleyebilir.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

class Bağlamalarını Kullanma

Kapsamla sınırlandırılmış stiller, kuralları koşullu olarak uygulamak için class bağlamalarıyla doğal biçimde birlikte çalışır.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

Kapsam Sınırlandırma Neden Yararlıdır?

Kapsamla sınırlandırılmış stiller, büyük bir uygulamadaki ad çakışmalarını önler, ekiplerin bağımsız çalışmasına olanak tanır ve bileşenleri taşınabilir, anlaşılır hâle getirir.

Hızlı Kontrol

Bileşen kapsamındaki stillerle ilgili anlayışınızı sınayın.

Özet

Bileşenler CSS'i styles, styleUrls veya styleUrl aracılığıyla taşır. Varsayılan olarak bu kurallar bileşenle sınırlıdır ve çakışmaları önler. Uygulamanın tamamını ilgilendiren kurallar için genel stil dosyasını kullanın.

Sıkça Sorulan Sorular

“Bileşen Kapsamlı Stiller” dersi ücretsiz mi?

Evet — “Bileşen Kapsamlı Stiller” 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 Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Bileşen Kapsamlı Stiller” dersinde ne öğreneceğim?

Stilleri bir bileşenle sınırlı tutun. Angular 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.

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

Önceden deneyim gerekmez. CoddyKit'te Angular 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 1. dersidir.

“Bileşen Kapsamlı Stiller” 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 Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular 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

← Angular Academy Sayfasına Dön