CSS Nedir?

[ZeberusZeberus is verified member.]

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini tanımlamak için kullanılan bir stil dilidir. HTML belgesindeki öğelerin nasıl görüntüleneceğini, biçimlendirileceğini ve sayfa düzeninin nasıl olacağını belirler. CSS, web tasarımında stil ve görsel öğeleri kontrol etmek için kullanılır, böylece bir web sayfasının içeriğiyle ilgilenmeden görsel özellikleri ayarlayabilirsiniz.

CSS'in Temel Özellikleri:

[*]Görsel Tasarım:


[*]CSS, web sayfalarının renklerini, yazı tiplerini, arka planlarını, kenarlıklarını, boşlukları ve daha fazlasını düzenler. Bu sayede sayfanın görsel tasarımı HTML kodlarından ayrılır.

[*]Düzen (Layout):


[*]CSS, web sayfasındaki öğelerin konumlarını, boyutlarını ve düzenlerini belirlemek için kullanılır. Örneğin, sayfa öğelerinin yatayda ve dikeyde nasıl hizalanacağı, hangi öğelerin üst üste bineceği gibi özellikler CSS ile kontrol edilir.

[*]Responsive Tasarım:


[*]CSS, sayfa tasarımını farklı ekran boyutlarına ve cihazlara uyumlu hale getirmek için kullanılabilir. Media Queries gibi özelliklerle, sayfanın görünümünü cihazın ekran boyutuna göre dinamik olarak değiştirebilirsiniz.

[*]Stil Ayrımı:


[*]CSS, sayfa içeriğinden tamamen ayrıdır. HTML, sayfanın yapısını tanımlar, CSS ise sayfanın stilini tanımlar. Bu, tasarımı ve içeriği birbirinden bağımsız hale getirir.

CSS ile Yapılabilecekler:

[*]Yazı Tipi ve Renk:


[*]CSS, metinlerin rengini, boyutunu, türünü ve stilini belirleyebilir.
css
Kodu kopyala
<span>h1</span> {<br> <span>color</span>: blue;<br> <span>font-size</span>: <span>36px</span>;<br> <span>font-family</span>: Arial, sans-serif;<br>}<br>

[*]Düzenleme ve Konumlandırma:


[*]Sayfa öğelerinin düzenini ve konumunu değiştirebilirsiniz. Örneğin, öğeleri yatayda veya dikeyde ortalamak için CSS kullanabilirsiniz.
css
Kodu kopyala
<span>.container</span> {<br> <span>display</span>: flex;<br> <span>justify-content</span>: center;<br> <span>align-items</span>: center;<br>}<br>

[*]Arka Plan ve Kenarlıklar:


[*]CSS ile öğelerin arka plan rengini, resmini ve kenarlık özelliklerini ayarlayabilirsiniz.
css
Kodu kopyala
<span>body</span> {<br> <span>background-color</span>: <span>#f0f0f0</span>;<br>}<br><br><span>.box</span> {<br> <span>border</span>: <span>2px</span> solid <span>#000</span>;<br> <span>padding</span>: <span>20px</span>;<br>}<br>

[*]Animasyonlar ve Geçişler:


[*]CSS, öğeler üzerinde animasyonlar ve geçiş efektleri uygulamayı sağlar. Bu, kullanıcı etkileşimlerine veya zamanlayıcıya dayalı olarak animasyonları tetiklemek için kullanılabilir.
css
Kodu kopyala
<span>.button</span> {<br> <span>transition</span>: background-color <span>0.3s</span> ease;<br>}<br><br><span>.button</span><span>:hover</span> {<br> <span>background-color</span>: red;<br>}<br>

[*]Responsive (Duyarlı) Tasarım:


[*]Farklı cihazlar ve ekran boyutları için tasarımı optimize edebilirsiniz. Media Queries sayesinde, cihazın genişliğine göre stil değişiklikleri yapabilirsiniz.
css
Kodu kopyala
<span>@media</span> (<span>max-width</span>: <span>600px</span>) {<br> <span>body</span> {<br> <span>background-color</span>: lightblue;<br> }<br>}<br>

CSS'in Temel Bileşenleri:

[*]Selektörler:


[*]CSS'de stil uygulamak istediğiniz HTML öğelerini seçmek için selektörler kullanılır. Bir selektör, HTML öğesini tanımlar.
[*]Örneğin:

[*]p: Tüm &lt;p&gt; etiketlerini seçer.
[*].class-name: Belirtilen sınıfa sahip öğeleri seçer.
[*]#id-name: Belirtilen id'ye sahip öğeyi seçer.


[*]Deklarasyonlar:


[*]CSS kuralları bir "declaration" (deklare) içerir. Deklarasyonlar, stil özelliği ve değeri içerir. Her deklare, bir özellik adı ve bu özelliğin değeri ile yazılır.
css
Kodu kopyala
<span>h1</span> {<br> <span>color</span>: red; <span>/* 'color' özelliği 'red' değeriyle */</span><br>}<br>

[*]Özellikler ve Değerler:


[*]CSS'deki her özellik, bir öğenin görünümünü veya düzenini belirler. Her özellik bir değere sahiptir.

[*]color: Yazı rengini belirler.
[*]background-color: Arka plan rengini belirler.
[*]font-size: Yazı tipinin boyutunu belirler.
[*]border: Kenarlık stilini belirler.


[*]Yorum Satırları:


[*]CSS dosyasında yorum satırları eklemek mümkündür. Yorumlar, kodun daha anlaşılır olmasına yardımcı olur ve tarayıcılar tarafından dikkate alınmaz.
css
Kodu kopyala
<span>/* Bu bir yorumdur */</span><br><span>p</span> {<br> <span>color</span>: green;<br>}<br>

CSS Türleri:

CSS, üç şekilde sayfa öğelerine uygulanabilir:


[*]Inline CSS:


[*]HTML etiketlerinin içine doğrudan stil eklenir. Bu, küçük stil değişiklikleri için kullanılabilir, ancak genellikle önerilmez çünkü kodun okunabilirliğini zorlaştırır.
html
Kodu kopyala
<span>&lt;<span>h1</span> <span>style</span>=<span>"color: red;"</span>&gt;</span>Başlık<span>&lt;/<span>h1</span>&gt;</span><br>

[*]Internal (Yerel) CSS:


[*]HTML belgesinin &lt;head&gt; kısmında yer alan &lt;style&gt; etiketleri içinde stil tanımlanır. Bu, sayfa içi stil değişiklikleri yapmak için uygundur.
html
Kodu kopyala
<span>&lt;<span>style</span>&gt;</span><span><br><span>h1</span> {<br> <span>color</span>: red;<br>}<br></span><span>&lt;/<span>style</span>&gt;</span><br>

[*]External (Dış) CSS:


[*]Dış bir CSS dosyasına bağlantı verilir ve tüm stil tanımlamaları bu dosyada yapılır. Bu yöntem, büyük projelerde tercih edilir çünkü stil değişikliklerini tek bir dosyada merkezi olarak yönetmeyi sağlar.
html
Kodu kopyala
<span>&lt;<span>link</span> <span>rel</span>=<span>"stylesheet"</span> <span>href</span>=<span>"style.css"</span>&gt;</span><br>

CSS'in Avantajları:

[*]Görsel Ayrım: CSS ile içerik ve stil ayrılır, böylece sayfa tasarımındaki değişiklikler HTML içeriğini etkilemez ve sayfanın yapısı bozulmaz.
[*]Performans: CSS, sayfa stilini hızlı bir şekilde yükler ve tarayıcılar, dış CSS dosyalarını önbelleğe alarak sayfa yükleme hızını artırır.
[*]Tekrar Kullanılabilirlik: CSS, aynı stil kurallarını birden fazla öğe için tekrar kullanmanıza imkan tanır. Bu da tutarlı ve bakımı kolay bir tasarım sağlar.
[*]Responsive Tasarım: CSS, medya sorguları (media queries) ile farklı ekran boyutları için özel stiller uygulayarak, mobil uyumlu ve duyarlı tasarımlar oluşturmayı mümkün kılar.

Sonuç:

CSS, web sayfalarının stilini ve görünümünü düzenleyen önemli bir teknolojidir. HTML ile birlikte çalışarak, sayfanın tasarımını şekillendirir ve görsel öğeleri ayarlamanızı sağlar. Modern web geliştirmede, CSS'in doğru kullanımı, kullanıcı deneyimini artırarak, estetik ve fonksiyonel web sayfaları yaratmayı mümkün kılar.

 

[Yapay-Zeka]

CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini belirlemek için kullanılan bir teknoloji olup, HTML belgesindeki öğelerin nasıl görüneceğini ve düzenleneceğini tanımlar. CSS, web tasarımında sayfa stilini kontrol etmek için kullanılır ve sayfanın içeriği ile görsel tasarımı birbirinden bağımsız hale getirir.

CSS'in temel özellikleri arasında şunlar yer alır:

1. Görsel Tasarım: Renkler, yazı tipleri, arka planlar, kenarlıklar ve boşluklar gibi görsel öğeleri düzenlemek için CSS kullanılır. Bu sayede sayfanın görsel tasarımı HTML'den ayrı olarak yönetilir.

2. Düzen (Layout): CSS, web sayfasındaki öğelerin konumlarını, boyutlarını ve düzenlerini belirlemek için kullanılır. Yatay ve dikey hizalamalar, öğelerin yerleşimi gibi özellikler CSS ile kontrol edilir.

3. Responsive Tasarım: CSS, sayfa tasarımını farklı ekran boyutlarına ve cihazlara uygun hale getirmek için kullanılır. Media Queries gibi özelliklerle, sayfanın görünümü cihazın özelliklerine göre dinamik olarak değiştirilebilir.

4. Stil Ayrımı: CSS, sayfa içeriğinden ayrı bir şekilde çalışır. HTML yapıyı tanımlarken, CSS ise sayfanın görünümünü belirler. Bu sayede tasarımı ve içeriği birbirinden bağımsız hale getirir.

CSS ile yapılabilecekler arasında şunlar bulunmaktadır:

- Yazı tipi ve renklerin ayarlanması
- Sayfa öğelerinin düzeni ve konumlandırılması
- Arka plan ve kenarlık özelliklerinin belirlenmesi
- Animasyonlar ve geçiş efektlerinin uygulanması
- Responsive tasarımın sağlanması

CSS'in temel bileşenleri arasında, selektörlerin (elements), deklarasyonların (declarations), özelliklerin ve değerlerin yanı sıra yorum satırlarının da önemli bir yeri vardır. CSS, Inline, Internal ve External olmak üzere üç farklı şekilde sayfalara uygulanabilir ve avantajları arasında görsel ayrım, performans, tekrar kullanılabilirlik ve responsive tasarım gibi unsurlar bulunmaktadır.

Sonuç olarak, CSS web sayfalarının stilini düzenleyen ve görsel öğeleri kontrol etmek için önemli bir araçtır. Doğru kullanıldığında, CSS modern web geliştirmede önemli bir rol oynayarak, estetik ve işlevsel web sayfalarının oluşturulmasını sağlar.