26-Kasım-2024, 11:44
|
#3 |
|
|  CSS Nedir? (Cascading Style Sheets)
CSS Nedir? (Cascading Style Sheets) CSS (Cascading Style Sheets), web sayfalarının görsel görünümünü düzenlemek için kullanılan bir stil dilidir. HTML veya XML (örneğin, XHTML) gibi işaretleme dilleri ile birlikte kullanılır ve web sayfalarına renk, yazı tipi, düzen ve animasyon gibi stil özellikleri eklemek için tasarlanmıştır. CSS, içerikten (HTML) ayrılarak, web sitelerinin daha düzenli, esnek ve yönetilebilir olmasını sağlar.
CSS'nin Temel Amacı: CSS'nin temel amacı, HTML ile oluşturulan yapıların görünümünü özelleştirmektir. Web sayfasının estetiğini ve kullanıcı deneyimini geliştirir.
CSS'nin Açılımı:- Cascading: Stil kurallarının önceliklendirme sistemini ifade eder. Farklı stiller bir araya geldiğinde hangi stilin geçerli olacağını belirler.
- Style Sheets: Stil kurallarının toplandığı dosyalar anlamına gelir.
CSS'in Temel Özellikleri:- Görsel Tasarım: Web sayfalarındaki metinlerin, arkaplanların, kutuların, butonların renkleri ve yazı tipleri gibi görsel unsurlarını değiştirir.
- Sayfa Düzeni: Sayfanın düzenini oluşturmak için kullanılır (örneğin, sütunlar, kutular veya grid sistemleri ile çalışmak).
- Mobil Uyumlu (Responsive) Tasarım: Farklı ekran boyutlarına ve cihazlara uygun tasarımlar oluşturur.
- Tekrar Kullanılabilirlik: Birden fazla sayfada aynı stil dosyasını kullanarak tutarlılığı sağlar ve kod tekrarını azaltır.
CSS'nin Kullanım Yöntemleri: Inline CSS (Satır İçi Stil): HTML etiketinin içine style özelliği ile yazılır. Tek bir elemente stil vermek için kullanılır.
HTML Kodu <p style="color: red;">Bu kırmızı bir paragraf.</p> Internal CSS (Dahili Stil): Stil kuralları, HTML dosyasının <head> bölümünde <style> etiketi içerisinde tanımlanır. HTML Kodu <style> p { color: blue; }</style>
External CSS (Harici Stil): Stil kuralları, ayrı bir .css dosyasına yazılır ve HTML dosyasına <link> etiketi ile bağlanır.
HTML Kodu <link rel="stylesheet" href="style.css">
CSS'in Temel Yapısı: CSS bir seçici, özellik ve değerden oluşur:
HTML Kodu seçici { özellik: değer;}
Örnek: HTML Kodu h1 { color: green; font-size: 24px;} CSS Seçicileri: CSS'de stil uygulamak için belirli HTML elementlerini seçmek gerekir. Bazı yaygın seçiciler:- Element Seçicileri: p, h1, div
- Sınıf Seçicileri: .buton (Sınıf adıyla seçme)
- ID Seçicileri: #header (Benzersiz bir ID ile seçme)
Neden CSS Kullanılır?- Tasarımı İçerikten Ayırır: HTML sayfasının yapısı ve içeriği ile tasarım ayrıdır.
- Tutarlılık Sağlar: Aynı stil kuralları birçok sayfada uygulanabilir.
- Bakımı Kolaylaştırır: Tek bir CSS dosyasındaki değişiklik tüm sayfaları etkiler.
- Performansı Artırır: Tekrar kullanılabilir kod sayesinde sayfa yükleme süreleri kısalır.
|
|
|  |