CSS Əsasları

CSS (Cascading Style Sheets) veb səhifələrin dizaynını və görünüşünü tərtib etmək üçün istifadə olunur. Aşağıda əsas CSS kodlarını və onların istifadəsini göstərən bir dərs təqdim edirəm.


---

1. CSS Əsasları

CSS ilə Stil Əlavə Etməyin 3 Yolu

1. Inline CSS (HTML elementinə birbaşa yazılır):

<h1 style="color: red;">Bu başlıqdır</h1>


2. Internal CSS (HTML sənədinin <style> bölməsində yazılır):

<style>
h1 {
color: blue;
font-size: 24px;
}
</style>


3. External CSS (Ayrı bir .css faylında saxlanılır): style.css faylı:

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: green;
text-align: center;
}

HTML faylı:

<link rel="stylesheet" href="style.css">




---

2. Rənglər və Şriftlər

Rənglər üçün color, background-color istifadə olunur.

Şriftləri dəyişmək üçün font-family, font-size, font-weight tətbiq edilir.


Kod Nümunəsi:

body {
background-color: #f5f5dc; /* Bej fon rəngi */
color: #333; /* Mətn rəngi */
font-family: 'Arial', sans-serif;
font-size: 16px;
}

h1 {
color: #ff6600; /* Narıncı başlıq */
font-size: 32px;
text-align: center;
}


---

3. Sərhədlər və Marginlər

Sərhədlər: border

Marginlər: Xarici məsafə üçün

Padding: Daxili məsafə üçün


Kod Nümunəsi:

div {
border: 2px solid black; /* Qara sərhəd */
padding: 20px; /* Daxili məsafə */
margin: 10px; /* Xarici məsafə */
background-color: #e0e0e0; /* Açıq boz fon */
}


---

4. Şəkillərlə İş

Şəkilləri miqyaslandırmaq və onların formasını dəyişmək.

Kod Nümunəsi:

img {
width: 100%; /* Tam genişlik */
height: auto; /* Proporcional hündürlük */
border-radius: 50%; /* Dairə şəkilli */
}


---

5. Mətni Tərtib Etmək

Text-align: Mətnin düzləndirilməsi

Text-decoration: Mətnin xətti (altından, üstündən xətt və ya xətt yoxdur)

Letter-spacing və Word-spacing: Mətn aralığı


Kod Nümunəsi:

h1 {
text-align: center; /* Mətn ortalanır */
text-decoration: underline; /* Altından xətt çəkilir */
letter-spacing: 2px; /* Hərf aralığı */
}


---

6. Hover və Transition Effektləri

Hover: Elementin üzərinə gələndə görünüşünü dəyişir.

Transition: Dəyişiklikləri animasiya ilə göstərir.


Kod Nümunəsi:

button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease; /* Animasiya */
}

button:hover {
background-color: #0056b3; /* Hover zamanı rəng */
}


---

7. Flexbox Layout

Flexbox istifadə edərək elementləri mərkəzləşdirin və tərtib edin.

Kod Nümunəsi:

.container {
display: flex;
justify-content: center; /* Üfüqi mərkəzləşdirmə */
align-items: center; /* Şaquli mərkəzləşdirmə */
height: 100vh; /* Tam ekran hündürlüyü */
background-color: #f0f8ff;
}

.item {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
border-radius: 5px;
}

HTML:

<div class="container">
<div class="item">Element 1</div>
<div class="item">Element 2</div>
</div>


---

8. Grid Layout

CSS Grid ilə mürəkkəb layoutları asanlıqla yaradın.

Kod Nümunəsi:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 bərabər sütun */
gap: 10px; /* Hüceyrələr arasında məsafə */
background-color: #f4f4f4;
padding: 20px;
}

.grid-item {
background-color: #2196f3;
color: white;
text-align: center;
padding: 20px;
border-radius: 5px;
}

HTML:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>


---

9. Media Queries (Mobil Uyğunluq)

Ekran ölçüsünə uyğun stil tətbiq etmək üçün.

Kod Nümunəsi:

@media (max-width: 768px) {
body {
background-color: #ffeb3b; /* Kiçik ekranlar üçün sarı fon */
}

h1 {
font-size: 20px; /* Başlıq ölçüsünü kiçiltmək */
}
}


---

CSS ilə tərtib etmə mövzuları haqqında daha çox məlumat və ya spesifik nümunələr istəyirsinizsə, mənə bildirin!



Proqramlaşdırma